Sheet / Drawer

"use client"


import { FolderSimple, GearSix, House, List, Users } from "@phosphor-icons/react"
import {
  Button,
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
  Text
} from "@glinui/ui"


export function SheetMobileNavExample() {
  const links = [
    { icon: House, label: "Home" },
    { icon: FolderSimple, label: "Projects" },
    { icon: Users, label: "Team" },
    { icon: GearSix, label: "Settings" }
  ]
  return (
    <div className="mx-auto w-full max-w-sm rounded-2xl border border-[var(--line-soft)] bg-[var(--surface-1)] [box-shadow:var(--elev-1)]">
      <div className="flex items-center gap-2 border-b border-[var(--line-soft)] px-3 py-2">
        <Sheet>
          <SheetTrigger asChild><Button size="icon" variant="ghost" aria-label="Open menu"><List aria-hidden="true" /></Button></SheetTrigger>
          <SheetContent side="left">
            <SheetHeader>
              <SheetTitle>Lumen</SheetTitle>
              <SheetDescription>Jump to a section.</SheetDescription>
            </SheetHeader>
            <nav aria-label="Mobile" className="grid gap-1 py-4">
              {links.map(({ icon: Icon, label }) => (
                <a key={label} href="#" className="flex items-center gap-3 rounded-lg px-3 py-2 text-sm hover:bg-[color-mix(in_oklab,var(--color-foreground)_8%,transparent)]"><Icon aria-hidden="true" className="size-4" />{label}</a>
              ))}
            </nav>
          </SheetContent>
        </Sheet>
        <span className="text-sm font-semibold">Lumen</span>
      </div>
      <div className="p-4"><Text size="sm" className="text-[var(--color-muted)]">Tap the menu to slide the navigation in from the left.</Text></div>
    </div>
  )
}

import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, Button } from "@glinui/ui"


export function Demo() {
  return (
    <Sheet>
      <SheetTrigger asChild><Button>Bottom Sheet</Button></SheetTrigger>
      <SheetContent side="bottom">
        <SheetHeader><SheetTitle>Quick Actions</SheetTitle></SheetHeader>
      </SheetContent>
    </Sheet>
  )
}

import { Button, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "@glinui/ui"


const variants = ["glinr", "plain", "solid", "soft", "outline", "ghost", "gradient", "glass"] as const


export function Demo() {
  return (
    <div className="flex flex-wrap gap-2">
      {variants.map((variant) => (
        <Sheet key={variant}>
          <SheetTrigger asChild><Button size="sm" variant="outline">{variant}</Button></SheetTrigger>
          <SheetContent variant={variant} size="sm">
            <SheetHeader>
              <SheetTitle>{variant} sheet</SheetTitle>
              <SheetDescription>Same content, different surface.</SheetDescription>
            </SheetHeader>
            <SheetFooter>
              <SheetClose asChild><Button variant="ghost">Close</Button></SheetClose>
            </SheetFooter>
          </SheetContent>
        </Sheet>
      ))}
    </div>
  )
}

import { Button, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "@glinui/ui"


export function Demo() {
  return (
    <Sheet>
      <SheetTrigger asChild><Button variant="outline">Open glass sheet</Button></SheetTrigger>
      <SheetContent variant="glass">
        <SheetHeader>
          <SheetTitle>Filters</SheetTitle>
          <SheetDescription>The page behind stays visible through the panel.</SheetDescription>
        </SheetHeader>
        <SheetFooter>
          <SheetClose asChild><Button variant="ghost">Close</Button></SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}