added tons of features

components/shared/app-sidebar.tsx~

@@ -0,0 +1,175 @@
+'use client'
+
+import {
+	AudioWaveform,
+	BookOpen,
+	Bot,
+	Command,
+	Frame,
+	GalleryVerticalEnd,
+	Map,
+	PieChart,
+	Settings2,
+	SquareTerminal
+} from 'lucide-react'
+import * as React from 'react'
+
+import {NavMain} from '@/components/shared/nav-main'
+import {NavProjects} from '@/components/shared/nav-projects'
+import {NavUser} from '@/components/shared/nav-user'
+import {TeamSwitcher} from '@/components/shared/team-switcher'
+import {
+	Sidebar,
+	SidebarContent,
+	SidebarFooter,
+	SidebarHeader,
+	SidebarRail
+} from '@/components/ui/sidebar'
+
+// This is sample data.
+const data = {
+	user: {
+		name: 'shadcn',
+		email: 'm@example.com',
+		avatar: '/avatars/shadcn.jpg'
+	},
+	teams: [
+		{
+			name: 'Acme Inc',
+			logo: GalleryVerticalEnd,
+			plan: 'Enterprise'
+		},
+		{
+			name: 'Acme Corp.',
+			logo: AudioWaveform,
+			plan: 'Startup'
+		},
+		{
+			name: 'Evil Corp.',
+			logo: Command,
+			plan: 'Free'
+		}
+	],
+	navMain: [
+		{
+			title: 'Playground',
+			url: '#',
+			icon: SquareTerminal,
+			isActive: true,
+			items: [
+				{
+					title: 'History',
+					url: '#'
+				},
+				{
+					title: 'Starred',
+					url: '#'
+				},
+				{
+					title: 'Settings',
+					url: '#'
+				}
+			]
+		},
+		{
+			title: 'Models',
+			url: '#',
+			icon: Bot,
+			items: [
+				{
+					title: 'Genesis',
+					url: '#'
+				},
+				{
+					title: 'Explorer',
+					url: '#'
+				},
+				{
+					title: 'Quantum',
+					url: '#'
+				}
+			]
+		},
+		{
+			title: 'Documentation',
+			url: '#',
+			icon: BookOpen,
+			items: [
+				{
+					title: 'Introduction',
+					url: '#'
+				},
+				{
+					title: 'Get Started',
+					url: '#'
+				},
+				{
+					title: 'Tutorials',
+					url: '#'
+				},
+				{
+					title: 'Changelog',
+					url: '#'
+				}
+			]
+		},
+		{
+			title: 'Settings',
+			url: '#',
+			icon: Settings2,
+			items: [
+				{
+					title: 'General',
+					url: '#'
+				},
+				{
+					title: 'Team',
+					url: '#'
+				},
+				{
+					title: 'Billing',
+					url: '#'
+				},
+				{
+					title: 'Limits',
+					url: '#'
+				}
+			]
+		}
+	],
+	projects: [
+		{
+			name: 'Design Engineering',
+			url: '#',
+			icon: Frame
+		},
+		{
+			name: 'Sales & Marketing',
+			url: '#',
+			icon: PieChart
+		},
+		{
+			name: 'Travel',
+			url: '#',
+			icon: Map
+		}
+	]
+}
+
+export function AppSidebar({...props}: React.ComponentProps<typeof Sidebar>) {
+	return (
+		<Sidebar {...props}>
+			<SidebarHeader>
+				<TeamSwitcher teams={data.teams} />
+			</SidebarHeader>
+			<SidebarContent>
+				<NavMain items={data.navMain} />
+				<NavProjects projects={data.projects} />
+			</SidebarContent>
+			<SidebarFooter>
+				<NavUser user={data.user} />
+			</SidebarFooter>
+			<SidebarRail />
+		</Sidebar>
+	)
+}