Collapsible

"use client"

import { ChevronRightIcon } from "lucide-react"

import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"

const favorites = ["AirDrop", "Recents", "Applications", "Desktop", "Documents", "Downloads"]

// A sidebar section that hides its items, like Finder's Favorites.
export default function CollapsibleDemo() {
  return (
    <Collapsible defaultOpen className="w-56 text-mac-body">
      <CollapsibleTrigger className="group flex w-full cursor-default items-center justify-between rounded-[6px] px-2 py-1 text-mac-subheadline font-semibold text-mac-label-tertiary outline-none hover:text-mac-label-secondary focus-visible:mac-focus-ring">
        Favorites
        <ChevronRightIcon className="size-3 transition-transform group-aria-expanded:rotate-90" strokeWidth={2.5} />
      </CollapsibleTrigger>
      <CollapsibleContent>
        <ul className="flex flex-col pt-0.5">
          {favorites.map((item) => (
            <li key={item} className="rounded-[8px] px-2 py-1.5 text-mac-label">
              {item}
            </li>
          ))}
        </ul>
      </CollapsibleContent>
    </Collapsible>
  )
}