Drawer

import { Button } from "sebs7n-ui/button"
import { DatePicker } from "sebs7n-ui/date-picker"
import { Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from "sebs7n-ui/drawer"
import { Input } from "sebs7n-ui/input"
import { Label } from "sebs7n-ui/label"

function FiltrosEnMobile() {
  return (
    <Drawer>
      <DrawerTrigger render={<Button variant="secondary" />}>Filtros</DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Filtrar facturas</DrawerTitle>
          <DrawerDescription>Se aplican al listado sin recargar la página.</DrawerDescription>
        </DrawerHeader>
        <DrawerBody className="flex flex-col gap-4 pb-5">
          <div className="flex flex-col gap-2">
            <Label htmlFor="drawer-cliente">Cliente</Label>
            <Input id="drawer-cliente" placeholder="Acme S.A." />
          </div>
          <div className="flex flex-col gap-2">
            <Label htmlFor="drawer-desde">Desde</Label>
            <DatePicker id="drawer-desde" />
          </div>
        </DrawerBody>
        <DrawerFooter>
          <DrawerClose render={<Button />}>Aplicar</DrawerClose>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  )
}

import { Badge } from "sebs7n-ui/badge"
import { Button } from "sebs7n-ui/button"
import { Drawer, DrawerBody, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from "sebs7n-ui/drawer"

function DetalleAMediaHoja() {
  return (
    <Drawer defaultSnapPoint={0.45} snapPoints={[0.45, 1]}>
      <DrawerTrigger render={<Button variant="secondary" />}>Ver la factura 0012</DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Factura 0012</DrawerTitle>
          <DrawerDescription>Acme S.A., emitida el 14 de marzo.</DrawerDescription>
        </DrawerHeader>
        <DrawerBody className="flex flex-col gap-4 pb-5">
          <div className="flex items-center gap-2">
            <Badge color="green">Pagada</Badge>
            <Badge color="gray">3 ítems</Badge>
          </div>
          <dl className="flex flex-col gap-3 text-callout">
            <div className="flex justify-between">
              <dt className="text-label-secondary">Vencimiento</dt>
              <dd className="tabular-nums">13/04</dd>
            </div>
            <div className="flex justify-between">
              <dt className="text-label-secondary">Importe</dt>
              <dd className="tabular-nums">$ 128.400</dd>
            </div>
            <div className="flex justify-between">
              <dt className="text-label-secondary">Condición</dt>
              <dd>A 30 días</dd>
            </div>
          </dl>
        </DrawerBody>
        <DrawerFooter>
          <Button>Descargar el PDF</Button>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  )
}

import { Button } from "sebs7n-ui/button"
import { Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle, DrawerTrigger } from "sebs7n-ui/drawer"
import { useState } from "react"

function ElegirDeUnaListaLarga() {
  const [chofer, setChofer] = useState<string | null>(null)

  return (
    <div className="flex flex-col items-start gap-3">
      <Drawer>
        <DrawerTrigger render={<Button variant="secondary" />}>{chofer ?? "Asignar chofer"}</DrawerTrigger>
        <DrawerContent className="data-[swipe-direction=down]:max-h-[70%]">
          <DrawerHeader>
            <DrawerTitle>Asignar chofer</DrawerTitle>
            <DrawerDescription>Doce disponibles para el 14 de marzo.</DrawerDescription>
          </DrawerHeader>
          <DrawerBody className="pb-6">
            <ul className="flex flex-col">
              {CHOFERES.map((nombre) => (
                <li key={nombre}>
                  <DrawerClose
                    className="flex h-11 w-full items-center rounded-control px-2 text-left text-callout outline-none hover:bg-fill-2 focus-visible:focus-ring"
                    onClick={() => setChofer(nombre)}
                  >
                    {nombre}
                  </DrawerClose>
                </li>
              ))}
            </ul>
          </DrawerBody>
        </DrawerContent>
      </Drawer>
      {chofer && <p className="text-footnote text-label-secondary">Asignado: {chofer}</p>}
    </div>
  )
}