Dashboard Sidebar Shell

"use client"
import * as React from "react"
import { AudioWaveform, BookOpen, Bot, Command, Frame, GalleryVerticalEnd, Map, PieChart, Settings2, SquareTerminal } from "lucide-react"
import { NavMain } from "./nav-main"
import { NavProjects } from "./nav-projects"
import { NavUser } from "./nav-user"
import { TeamSwitcher } from "./team-switcher"
import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarRail } from "@/components/ui/sidebar"

const data = {
  user: { name: "Team Member", email: "you@example.com", avatar: "/avatars/placeholder.jpg" },
  teams: [
    { name: "Your Company", logo: GalleryVerticalEnd, plan: "Enterprise" },
    { name: "Client Workspace", logo: AudioWaveform, plan: "Team" },
  ],
  navMain: [
    { title: "Overview", url: "#", icon: SquareTerminal, isActive: true, items: [{ title: "History", url: "#" }, { title: "Starred", url: "#" }] },
    { title: "Projects", url: "#", icon: Bot, items: [{ title: "Active", url: "#" }, { title: "Archived", url: "#" }] },
    { title: "Docs", url: "#", icon: BookOpen, items: [{ title: "Get started", url: "#" }, { title: "Changelog", url: "#" }] },
    { title: "Settings", url: "#", icon: Settings2, items: [{ title: "General", url: "#" }, { title: "Billing", url: "#" }] },
  ],
  projects: [
    { name: "Design", url: "#", icon: Frame },
    { name: "Marketing", url: "#", icon: PieChart },
    { name: "Ops", url: "#", icon: Map },
  ],
}

export function AppSidebar(props) {
  return (
    <Sidebar collapsible="icon" {...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>
  )
}