import * as React from "react"; import { CalendarRange, CheckCircle2, LayoutDashboard, ListChecks, Milestone, NotebookPen, Sparkles, } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Typography } from "@/components/ui/Typography"; const { Small: TypographySmall, Large: TypographyLarge } = Typography; import { SidebarAppShellProductProjectFavoritedSpacesFive } from "@/registry/sidebar-app-shell-product-project-favorited-spaces-five/sidebar-app-shell-product-project-favorited-spaces-five"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; type ComponentProps = React.ComponentPropsWithoutRef< typeof SidebarAppShellProductProjectFavoritedSpacesFive >; type SidebarAppShellProductProjectFavoritedSpacesFiveFavorite = NonNullable< ComponentProps["favorites"] >[number]; type SidebarAppShellProductProjectFavoritedSpacesFiveWorkspaceGroup = NonNullable[number]; type SidebarAppShellProductProjectFavoritedSpacesFiveViewOption = NonNullable< ComponentProps["viewOptions"] >[number]; type SidebarAppShellProductProjectFavoritedSpacesFiveFilterToken = NonNullable< ComponentProps["filters"] >[number]; type SidebarAppShellProductProjectFavoritedSpacesFiveCommandItem = NonNullable< ComponentProps["commandItems"] >[number]; const favorites: SidebarAppShellProductProjectFavoritedSpacesFiveFavorite[] = [ { id: "roadmap", label: "Roadmap 2025", isActive: true, icon: , }, { id: "launches", label: "Launch planning", icon: , }, { id: "retro", label: "Retro insights", icon: , }, ]; const workspaces: SidebarAppShellProductProjectFavoritedSpacesFiveWorkspaceGroup[] = [ { id: "spaces", label: "Spaces", nodes: [ { id: "roadmaps", label: "Roadmaps", description: "Vision, milestones, and timeline", badge: "6", children: [ { id: "roadmap-2025", label: "2025 GTM", description: "OKRs + launch calendar", badge: "Fav", }, { id: "roadmap-2024", label: "2024 Completed", description: "Archive", }, ], }, { id: "sprints", label: "Sprints", description: "Current + future sprint hubs", badge: "4", }, ], defaultOpen: true, }, { id: "docs", label: "Docs", nodes: [ { id: "specs", label: "Feature specs", children: [ { id: "spec-intelligence", label: "Intelligence Hub", description: "Draft", }, { id: "spec-ai", label: "AI Workflow", description: "Approved" }, ], }, ], }, ]; const filters: SidebarAppShellProductProjectFavoritedSpacesFiveFilterToken[] = [ { id: "owner", label: "Owner: L. Nguyen" }, { id: "priority", label: "Priority: High", variant: "outline" }, { id: "status", label: "Status: Shipping" }, ]; const commandItems: SidebarAppShellProductProjectFavoritedSpacesFiveCommandItem[] = [ { id: "cmd-roadmap", title: "Open 2025 GTM roadmap", description: "Milestones, dependencies, and launch moments", icon: , group: "Spaces", }, { id: "cmd-spec", title: "Create feature spec", description: "Start from PRD template", icon: , group: "Templates", }, ]; const viewOptions: SidebarAppShellProductProjectFavoritedSpacesFiveViewOption[] = [ { id: "board", label: "Board", description: "Swimlanes grouped by status", icon: , }, { id: "list", label: "List", description: "Spreadsheet-style backlog", icon: , }, { id: "timeline", label: "Timeline", description: "Quarterly milestones + dependencies", icon: , }, ]; export function SidebarAppShellProductProjectFavoritedSpacesFiveDemo() { const [activeView, setActiveView] = React.useState(viewOptions[0]); const [activeFilters, setActiveFilters] = React.useState(filters); return ( setActiveView(option)} onFilterRemove={(filter) => setActiveFilters((prev) => prev.filter((token) => token.id !== filter.id), ) } storageUsage={{ used: "84 GB", total: "120 GB", percent: 70 }} header={{ breadcrumb: [ { label: "Product ops", href: "#" }, { label: "Strategic planning", href: "#" }, { label: "2025 GTM roadmap", isCurrent: true }, ], primaryAction: { label: "New project", icon: }, secondaryActions: [ { id: "import", label: "Import Jira issues" }, { id: "share", label: "Share roadmap" }, ], }} >

Active initiatives Top-level epics prioritized for the next two quarters.

{[ "Activation", "Retention", "Expansion", "AI ops", "Infrastructure", "Insights", ].map((track) => (

{track} Owner alignment and sequencing by sprint.

))} ); } function PlusIcon() { return ( ); } export default SidebarAppShellProductProjectFavoritedSpacesFiveDemo;

Simple