Components
Starting preview...
Announcement in Sidebar
npx shadcn@latest add https://21st.dev/r/vercel/announcementimport { Announcement } from "@/components/ui/announcement";
import { BookOpen, Users, FolderKanban, HelpCircle } from 'lucide-react';
const NAV_ITEMS = [
{
title: "New Chat",
variant: "primary"
},
{
icon: Users,
title: "Community"
},
{
icon: BookOpen,
title: "Library"
},
{
icon: FolderKanban,
title: "Projects"
},
{
icon: HelpCircle,
title: "Feedback"
}
];
const RECENT_CHATS = [
"Landing Page Design",
"API Integration Help",
"Next.js Auth Setup",
"Database Schema Review",
"Tailwind Components",
"React Performance Issue",
"Docker Setup Guide",
"GraphQL Query Help",
"UI Animation Bug",
"TypeScript Types"
];
export function SidebarDemo() {
return (
<div className="flex h-full min-h-[600px] w-full items-center justify-center bg-background p-4">
<div className="relative h-full w-60 rounded-lg bg-background/95 flex px-2 flex-col">
<nav className="space-y-2">
{NAV_ITEMS.map((item, index) => (
<button
key={index}
className={`w-full flex items-center gap-2 py-2 px-2 rounded-lg text-sm ${
item.variant === "primary"
? "bg-muted border text-foreground hover:bg-primary/90"
: "text-foreground hover:bg-muted"
}`}
>
{item.icon && <item.icon className="h-4 w-4" />}
{item.title}
</button>
))}
</nav>
<div className="mt-6 pt-6 border-t border-border/30">
<div className="flex items-center justify-between mb-4">
<span className="text-sm px-2 text-muted-foreground">Recent Chats</span>
</div>
<div className="space-y-2">
{RECENT_CHATS.map((chat, index) => (
<button
key={index}
className="w-full text-left px-2 py-1 text-sm text-foreground/80 hover:text-foreground hover:bg-muted rounded-lg"
>
{chat}
</button>
))}
</div>
</div>
<div className="mt-auto">
<Announcement
title="New Feature"
description="Introducing v0 Community. Share your v0 generations, or start from a template."
href="https://v0.dev/chat/community"
onClose={() => console.log('Closing announcement')}
/>
</div>
</div>
</div>
);
}
export { SidebarDemo }