Sheet

import { PanelRight } from "lucide-react"
import { Button } from "@/components/ui/button"
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"
import { Switch } from "@/components/ui/switch"

export default function SheetDemo() {
  return (
    <Sheet>
      <SheetTrigger render={<Button variant="outline" />}>
        <PanelRight /> Settings
      </SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Scene</SheetTitle>
          <SheetDescription>What the night is doing.</SheetDescription>
        </SheetHeader>
        <div className="grid gap-3 text-sm">
          <label className="flex items-center justify-between">
            Rain <Switch defaultChecked />
          </label>
          <label className="flex items-center justify-between">
            Fireflies <Switch />
          </label>
        </div>
      </SheetContent>
    </Sheet>
  )
}