Sheet

import { Button } from '@immit/ui/button'
import { Input } from '@immit/ui/input'
import { Label } from '@immit/ui/label'
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger
} from '@immit/ui/sheet'
 
export function SheetDemo() {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button variant="outline">Open</Button>
      </SheetTrigger>
      <SheetContent side="right">
        <SheetHeader>
          <SheetTitle>Edit profile</SheetTitle>
          <SheetDescription>
            This information will be visible to others. Click save when you are
            done.
          </SheetDescription>
        </SheetHeader>
        <div className="grid gap-4 py-4">
          <div className="grid grid-cols-2 items-center gap-2 lg:grid-cols-4 lg:gap-4">
            <Label
              htmlFor="name"
              className="col-span-2 lg:col-span-1 lg:text-right"
            >
              Name
            </Label>
            <Input
              id="name"
              defaultValue="Pedro Duarte"
              className="col-span-2 lg:col-span-3"
            />
          </div>
          <div className="grid grid-cols-2 items-center gap-2 lg:grid-cols-4 lg:gap-4">
            <Label
              htmlFor="username"
              className="col-span-2 lg:col-span-1 lg:text-right"
            >
              Username
            </Label>
            <Input
              id="username"
              defaultValue="@peduarte"
              className="col-span-2 lg:col-span-3"
            />
          </div>
        </div>
        <SheetFooter>
          <SheetClose asChild>
            <Button type="submit">Save changes</Button>
          </SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}

import { useState } from 'react'
import { Button } from '@immit/ui/button'
import { Input } from '@immit/ui/input'
import { Label } from '@immit/ui/label'
import { RadioGroup, RadioGroupItem } from '@immit/ui/radio-group'
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger
} from '@immit/ui/sheet'
 
const SHEET_SIDES = ['top', 'right', 'bottom', 'left'] as const
 
type SheetSide = (typeof SHEET_SIDES)[number]
 
export function SheetSides() {
  const [side, setSide] = useState<SheetSide>('right')
 
  return (
    <div className="flex flex-col space-y-8">
      <RadioGroup
        defaultValue={side}
        onValueChange={(value) => setSide(value as SheetSide)}
      >
        <div className="grid grid-cols-2 gap-2">
          {SHEET_SIDES.map((side, index) => (
            <div
              key={`${side}-${index}`}
              className="flex items-center space-x-2"
            >
              <RadioGroupItem value={side} id={side} />
              <Label htmlFor={side}>{side}</Label>
            </div>
          ))}
        </div>
      </RadioGroup>
      <Sheet>
        <SheetTrigger asChild>
          <Button>Open {side} sheet</Button>
        </SheetTrigger>
        <SheetContent side={side}>
          <SheetHeader>
            <SheetTitle>Edit profile</SheetTitle>
            <SheetDescription>
              This information will be visible to others. Click save when you
              are done.
            </SheetDescription>
          </SheetHeader>
          <div className="grid gap-4 py-4">
            <div className="grid grid-cols-2 items-center gap-2 lg:grid-cols-4 lg:gap-4">
              <Label
                htmlFor="name"
                className="col-span-2 lg:col-span-1 lg:text-right"
              >
                Name
              </Label>
              <Input
                id="name"
                value="Pedro Duarte"
                className="col-span-2 lg:col-span-3"
              />
            </div>
            <div className="grid grid-cols-2 items-center gap-2 lg:grid-cols-4 lg:gap-4">
              <Label
                htmlFor="username"
                className="col-span-2 lg:col-span-1 lg:text-right"
              >
                Username
              </Label>
              <Input
                id="username"
                value="@peduarte"
                className="col-span-2 lg:col-span-3"
              />
            </div>
          </div>
 
          <SheetFooter>
            <SheetClose asChild>
              <Button type="submit">Save changes</Button>
            </SheetClose>
          </SheetFooter>
        </SheetContent>
      </Sheet>
    </div>
  )
}