Seed: product-management template (23 files)
This commit is contained in:
@@ -0,0 +1,192 @@
|
||||
import { useState } from "react";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
Rocket, CheckCircle2, Bug, Sparkles, Zap, Mail, ArrowRight
|
||||
} from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import Sidebar from "@/components/Sidebar";
|
||||
import Header from "@/components/Header";
|
||||
|
||||
interface ReleaseFeature {
|
||||
text: string;
|
||||
type: string;
|
||||
typeColor: string;
|
||||
}
|
||||
|
||||
interface Release {
|
||||
id: number;
|
||||
version: string;
|
||||
date: string;
|
||||
title: string;
|
||||
description: string;
|
||||
features: ReleaseFeature[];
|
||||
}
|
||||
|
||||
const releases: Release[] = [
|
||||
{
|
||||
id: 1,
|
||||
version: "v2.4.0",
|
||||
date: "April 10, 2026",
|
||||
title: "Roadmap & Analytics",
|
||||
description: "Major update introducing our new visual roadmap board, enhanced feedback analytics, and improved team collaboration features.",
|
||||
features: [
|
||||
{ text: "Visual roadmap board with drag-and-drop columns", type: "New", typeColor: "bg-blue-100 text-blue-700" },
|
||||
{ text: "Real-time collaboration with cursor presence", type: "New", typeColor: "bg-blue-100 text-blue-700" },
|
||||
{ text: "Feedback sentiment analysis powered by AI", type: "New", typeColor: "bg-blue-100 text-blue-700" },
|
||||
{ text: "Fixed PDF export cutting off long descriptions", type: "Fix", typeColor: "bg-red-100 text-red-700" },
|
||||
{ text: "Improved dashboard widget loading performance", type: "Improved", typeColor: "bg-amber-100 text-amber-700" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
version: "v2.3.0",
|
||||
date: "March 25, 2026",
|
||||
title: "Integration Hub",
|
||||
description: "Seamless integrations with your favorite tools. Connect Slack, Jira, and Linear to keep your team in sync.",
|
||||
features: [
|
||||
{ text: "Slack integration for feature notifications", type: "New", typeColor: "bg-blue-100 text-blue-700" },
|
||||
{ text: "Jira two-way sync for feature tracking", type: "New", typeColor: "bg-blue-100 text-blue-700" },
|
||||
{ text: "Linear import for existing roadmap data", type: "New", typeColor: "bg-blue-100 text-blue-700" },
|
||||
{ text: "Webhook support for custom integrations", type: "New", typeColor: "bg-blue-100 text-blue-700" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
version: "v2.2.0",
|
||||
date: "March 10, 2026",
|
||||
title: "Priority Framework",
|
||||
description: "A new weighted scoring model to help you make data-driven prioritization decisions.",
|
||||
features: [
|
||||
{ text: "Customizable priority scoring with weighted criteria", type: "New", typeColor: "bg-blue-100 text-blue-700" },
|
||||
{ text: "RICE and ICE scoring frameworks built-in", type: "New", typeColor: "bg-blue-100 text-blue-700" },
|
||||
{ text: "Fixed incorrect vote counts on filtered views", type: "Fix", typeColor: "bg-red-100 text-red-700" },
|
||||
{ text: "Improved search performance for large feature lists", type: "Improved", typeColor: "bg-amber-100 text-amber-700" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
version: "v2.1.0",
|
||||
date: "February 20, 2026",
|
||||
title: "Team Workspaces",
|
||||
description: "Collaborate better with dedicated team workspaces, role-based permissions, and activity audit logs.",
|
||||
features: [
|
||||
{ text: "Team workspaces with member management", type: "New", typeColor: "bg-blue-100 text-blue-700" },
|
||||
{ text: "Role-based access control (Admin, Editor, Viewer)", type: "New", typeColor: "bg-blue-100 text-blue-700" },
|
||||
{ text: "Activity audit log for compliance tracking", type: "New", typeColor: "bg-blue-100 text-blue-700" },
|
||||
{ text: "Fixed notification emails missing context details", type: "Fix", typeColor: "bg-red-100 text-red-700" },
|
||||
{ text: "Improved onboarding flow with interactive tutorial", type: "Improved", typeColor: "bg-amber-100 text-amber-700" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const typeIcons: Record<string, React.ElementType> = {
|
||||
New: Sparkles,
|
||||
Fix: Bug,
|
||||
Improved: Zap,
|
||||
};
|
||||
|
||||
export default function ChangelogPage() {
|
||||
const [email, setEmail] = useState("");
|
||||
|
||||
const handleSubscribe = () => {
|
||||
if (!email.includes("@")) {
|
||||
toast.error("Please enter a valid email address");
|
||||
return;
|
||||
}
|
||||
toast("Subscribed to changelog updates!");
|
||||
setEmail("");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen bg-slate-50">
|
||||
<Sidebar activePath="/changelog" />
|
||||
<div className="flex-1 lg:ml-64">
|
||||
<Header />
|
||||
<main className="p-6 space-y-8">
|
||||
{/* ── Page Header ── */}
|
||||
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-slate-900 animate-fade-up">Changelog</h1>
|
||||
<p className="text-slate-500 mt-1">Stay up to date with the latest improvements</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── Subscribe Banner ── */}
|
||||
<Card className="border-0 shadow-sm bg-gradient-to-r from-blue-600 to-sky-500">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
|
||||
<div className="text-white">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<Mail className="h-5 w-5" />
|
||||
<h3 className="font-semibold">Subscribe to updates</h3>
|
||||
</div>
|
||||
<p className="text-blue-100 text-sm">Get notified when we ship new features and improvements</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 w-full sm:w-auto">
|
||||
<Input
|
||||
placeholder="your@email.com"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="bg-white/20 border-white/30 text-white placeholder:text-blue-200 h-10 min-w-[220px]"
|
||||
/>
|
||||
<Button onClick={handleSubscribe} className="bg-white text-blue-600 hover:bg-blue-50 h-10 shrink-0">
|
||||
Subscribe <ArrowRight className="ml-1 h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* ── Release Timeline ── */}
|
||||
<div className="relative">
|
||||
{/* Timeline Line */}
|
||||
<div className="absolute left-6 top-0 bottom-0 w-px bg-slate-200 hidden md:block" />
|
||||
|
||||
<div className="space-y-8 stagger">
|
||||
{releases.map((release, index) => (
|
||||
<div key={release.id} className="relative flex gap-6">
|
||||
{/* Timeline Dot */}
|
||||
<div className="hidden md:flex items-start pt-1">
|
||||
<div className={`h-12 w-12 rounded-full flex items-center justify-center shrink-0 z-10 \${index === 0 ? "bg-blue-600 text-white" : "bg-white border-2 border-slate-200 text-slate-400"}`}>
|
||||
<Rocket className="h-5 w-5" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Release Card */}
|
||||
<Card className={`border-0 shadow-sm flex-1 \${index === 0 ? "ring-2 ring-blue-100" : ""}`}>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex flex-wrap items-center gap-3 mb-3">
|
||||
<Badge className="bg-blue-100 text-blue-700 font-mono text-xs border-0">{release.version}</Badge>
|
||||
<span className="text-sm text-slate-400">{release.date}</span>
|
||||
{index === 0 && <Badge className="bg-emerald-100 text-emerald-700 text-xs border-0">Latest</Badge>}
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-slate-900 mb-2">{release.title}</h3>
|
||||
<p className="text-sm text-slate-500 mb-4 leading-relaxed">{release.description}</p>
|
||||
<div className="space-y-2">
|
||||
{release.features.map((feature, fi) => {
|
||||
const FeatureIcon = typeIcons[feature.type] || CheckCircle2;
|
||||
return (
|
||||
<div key={fi} className="flex items-start gap-3 py-1.5">
|
||||
<Badge className={`\${feature.typeColor} text-[10px] font-semibold border-0 px-2 py-0.5 shrink-0 flex items-center gap-1`}>
|
||||
<FeatureIcon className="h-3 w-3" />
|
||||
{feature.type}
|
||||
</Badge>
|
||||
<span className="text-sm text-slate-600">{feature.text}</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user