Sheet

"use client";

import {
  Sheet,
  SheetTrigger,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetDescription,
  SheetFooter,
  SheetClose,
} from "@dashboardpack/core/components/ui/sheet";
import { Button } from "@dashboardpack/core/components/ui/button";
import { Input } from "@dashboardpack/core/components/ui/input";
import { Label } from "@dashboardpack/core/components/ui/label";
import { useState } from "react";

export default function SheetExample() {
  const [side, setSide] = useState<"left" | "right" | "top" | "bottom">(
    "right",
  );
  return (
    <div className="space-y-4">
      <div className="flex flex-wrap gap-2">
        {(["left", "right", "top", "bottom"] as const).map((edge) => (
          <Button
            key={edge}
            size="sm"
            variant={side === edge ? "secondary" : "ghost"}
            onClick={() => setSide(edge)}
          >
            {edge}
          </Button>
        ))}
      </div>
      <Sheet>
        <SheetTrigger asChild>
          <Button variant="outline">Edit profile</Button>
        </SheetTrigger>
        <SheetContent side={side}>
          <SheetHeader>
            <SheetTitle>Edit profile</SheetTitle>
            <SheetDescription>
              Try editing your name. This example does not persist changes.
            </SheetDescription>
          </SheetHeader>
          <div className="space-y-2 p-4">
            <Label htmlFor="sheet-name">Display name</Label>
            <Input id="sheet-name" defaultValue="Alex Morgan" />
          </div>
          <SheetFooter>
            <SheetClose asChild>
              <Button>Done</Button>
            </SheetClose>
          </SheetFooter>
        </SheetContent>
      </Sheet>
    </div>
  );
}