Sidebar

"use client"

import * as React from "react"
import {
  ArchiveIcon,
  FileIcon,
  FlagIcon,
  FolderIcon,
  InboxIcon,
  SendIcon,
  Trash2Icon,
} from "lucide-react"

import {
  MacSidebar,
  MacSidebarContent,
  MacSidebarEmpty,
  MacSidebarHeader,
  MacSidebarItem,
  MacSidebarItemBadge,
  MacSidebarSearch,
  MacSidebarSection,
  MacSidebarSectionLabel,
} from "@/components/ui/mac-sidebar"
import { Toolbar, ToolbarTitle } from "@/components/ui/toolbar"
import {
  Window,
  WindowContent,
  WindowControls,
  WindowMain,
} from "@/components/ui/window"

const mailboxes = [
  { label: "Inbox", icon: InboxIcon, count: 4 },
  { label: "Flagged", icon: FlagIcon, count: 2 },
  { label: "Drafts", icon: FileIcon },
  { label: "Sent", icon: SendIcon },
  { label: "Archive", icon: ArchiveIcon },
  { label: "Trash", icon: Trash2Icon, keywords: ["deleted", "bin"] },
]

const folders = ["Projects", "Receipts", "Travel", "Newsletters"]

// Type in the search field to filter the items. Sections without a match
// disappear, and keywords let an item match words that aren't in its label.
export default function MacSidebarSearchDemo() {
  const [selected, setSelected] = React.useState("Inbox")

  return (
    <Window className="h-96 w-full max-w-xl">
      <MacSidebar className="w-56">
        <MacSidebarHeader>
          <WindowControls />
        </MacSidebarHeader>
        <MacSidebarSearch placeholder="Search mailboxes" />
        <MacSidebarContent>
          <MacSidebarSection>
            <MacSidebarSectionLabel className="h-6">Favorites</MacSidebarSectionLabel>
            {mailboxes.map((item) => (
              <MacSidebarItem
                key={item.label}
                keywords={item.keywords}
                active={selected === item.label}
                onClick={() => setSelected(item.label)}
              >
                <item.icon strokeWidth={1.6} />
                {item.label}
                {item.count && <MacSidebarItemBadge>{item.count}</MacSidebarItemBadge>}
              </MacSidebarItem>
            ))}
          </MacSidebarSection>
          <MacSidebarSection>
            <MacSidebarSectionLabel>On My Mac</MacSidebarSectionLabel>
            {folders.map((label) => (
              <MacSidebarItem
                key={label}
                active={selected === label}
                onClick={() => setSelected(label)}
              >
                <FolderIcon strokeWidth={1.6} />
                {label}
              </MacSidebarItem>
            ))}
          </MacSidebarSection>
          <MacSidebarEmpty />
        </MacSidebarContent>
      </MacSidebar>
      <WindowMain>
        <Toolbar>
          <ToolbarTitle title={selected} className="pl-3" />
        </Toolbar>
        <WindowContent className="flex items-center justify-center bg-mac-content text-mac-label-secondary">
          {selected}
        </WindowContent>
      </WindowMain>
    </Window>
  )
}