import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Badge } from "@/components/ui/badge"; import { CheckCircle, Clock, Lightbulb, Rocket } from "lucide-react"; const Roadmap = () => { const roadmapItems = [ { status: "completed", quarter: "Q4 2023", title: "Shadcn Example v2.0 Launch", items: [ "Complete UI redesign with Shadcn/UI", "TypeScript migration", "Dark mode support", "Mobile-first responsive design", "50+ new components", "Performance optimizations" ] }, { status: "completed", quarter: "Q1 2024", title: "Enhanced Features", items: [ "Advanced data tables with sorting/filtering", "Real-time notifications system", "Multiple dashboard layouts", "Email template collection", "Form validation patterns", "API integration examples" ] }, { status: "in-progress", quarter: "Q2 2024", title: "Developer Experience", items: [ "Comprehensive documentation site", "Video tutorial series", "Storybook component library", "CLI tool for quick setup", "Custom hooks library", "Testing utilities and examples" ] }, { status: "planned", quarter: "Q3 2024", title: "Advanced Components", items: [ "Drag & drop dashboard builder", "Advanced chart library integration", "Calendar and scheduling components", "File upload with preview", "Rich text editor integration", "Multi-step form wizard" ] }, { status: "planned", quarter: "Q4 2024", title: "Integration & Plugins", items: [ "Authentication provider templates", "Database integration examples", "Payment gateway templates", "Social media integrations", "Analytics and tracking setup", "SEO optimization tools" ] }, { status: "future", quarter: "2025", title: "Next Generation Features", items: [ "AI-powered component generation", "Real-time collaboration tools", "Advanced theming system", "Micro-frontend architecture", "Progressive Web App features", "Advanced accessibility tools" ] } ]; const columns = [ { status: "completed", title: "Completed", icon: , bgColor: "bg-green-50 dark:bg-green-950", borderColor: "border-green-200 dark:border-green-800" }, { status: "in-progress", title: "In Progress", icon: , bgColor: "bg-blue-50 dark:bg-blue-950", borderColor: "border-blue-200 dark:border-blue-800" }, { status: "planned", title: "Planned", icon: , bgColor: "bg-orange-50 dark:bg-orange-950", borderColor: "border-orange-200 dark:border-orange-800" }, { status: "future", title: "Future", icon: , bgColor: "bg-purple-50 dark:bg-purple-950", borderColor: "border-purple-200 dark:border-purple-800" } ]; const getItemsByStatus = (status: string) => { return roadmapItems.filter((item) => item.status === status); }; return (

{/* Header */}

Product Roadmap

App {" "} Roadmap

We're constantly improving Shadcn Example based on user feedback and industry trends. Here's what we've accomplished and what's coming next.

{/* Kanban Board */}

{columns.map((column) => (

{/* Column Header */}

{column.icon}

{column.title}

{getItemsByStatus(column.status).length}

{/* Column Items */}

{getItemsByStatus(column.status).map((item, index) => (

{item.title}

{feature}
+{item.items.length - 3} more features

))}

); }; export default Roadmap;