Drawer

import { Button } from "@/registry/ds/button";
import { Checkbox } from "@/registry/ds/checkbox";
import { Drawer, DrawerBody, DrawerClose, DrawerFooter, DrawerHeader } from "@/registry/ds/drawer";
import { Plus } from "@/registry/ds/icons";
import { Input, Textarea } from "@/registry/ds/input";
import { Select } from "@/registry/ds/select";

const comisiones = ["Comisión 1 · Lunes 8:00", "Comisión 2 · Martes 14:00", "Comisión 3 · Jueves 19:00"].map((c) => ({ label: c, value: c }));

/** Un formulario corto sin salir de la página: el cuerpo scrollea, el footer con las acciones queda fijo */
export default function DrawerForm() {
  return (
    <Drawer size="md" trigger={<Button iconLeft={<Plus />}>Nueva consulta</Button>}>
      <DrawerHeader title="Consulta al docente" description="Te responde en el campus en 48 h hábiles." />
      <DrawerBody className="space-y-5 py-4">
        <Select label="Comisión" options={comisiones} defaultValue={comisiones[0].value} />
        <Input label="Asunto" placeholder="Duda sobre el TP 2" required />
        <Textarea label="Consulta" placeholder="Contá qué parte no te cierra, y qué probaste." hint="Hasta 1000 caracteres." required />
        <Checkbox size="sm" label="Avisarme por correo cuando respondan" defaultChecked />
      </DrawerBody>
      <DrawerFooter>
        <DrawerClose>
          <Button variant="stroke">Cancelar</Button>
        </DrawerClose>
        <DrawerClose>
          <Button>Enviar consulta</Button>
        </DrawerClose>
      </DrawerFooter>
    </Drawer>
  );
}

"use client";

import { useState } from "react";
import { Button } from "@/registry/ds/button";
import { Drawer, DrawerBody, DrawerHeader } from "@/registry/ds/drawer";
import { Radio, RadioGroup } from "@/registry/ds/radio";

const opciones = [
  { value: "nombre", label: "Nombre", supporting: "A → Z" },
  { value: "cupo", label: "Cupo", supporting: "Primero las que tienen más lugares" },
  { value: "horario", label: "Horario", supporting: "Más temprano primero" },
];

/** Bottom sheet: desde abajo, para elegir una opción en móvil. Se cierra al elegir y el botón muestra el valor */
export default function DrawerBottomSheet() {
  const [open, setOpen] = useState(false);
  const [orden, setOrden] = useState("nombre");
  const actual = opciones.find((o) => o.value === orden)!;

  return (
    <Drawer side="bottom" open={open} onOpenChange={setOpen} trigger={<Button variant="stroke">Ordenar por: {actual.label}</Button>}>
      <DrawerHeader title="Ordenar por" closable={false} />
      <DrawerBody className="pb-6">
        <RadioGroup
          aria-label="Ordenar por"
          value={orden}
          onValueChange={(v) => {
            setOrden(String(v));
            setOpen(false);
          }}
        >
          {opciones.map((o) => (
            <Radio key={o.value} value={o.value} label={o.label} supporting={o.supporting} />
          ))}
        </RadioGroup>
      </DrawerBody>
    </Drawer>
  );
}

import { Button } from "@/registry/ds/button";
import { Drawer, DrawerBody, DrawerClose, DrawerFooter, DrawerHeader } from "@/registry/ds/drawer";

const sizes = [
  { size: "sm" as const, title: "Detalle rápido", text: "Una ficha: nombre, estado, dos datos. Lo que entra sin scrollear." },
  { size: "md" as const, title: "Formulario", text: "Campos en una columna, con espacio para hints y errores." },
  { size: "lg" as const, title: "Contenido largo", text: "Tablas, previsualizaciones o un documento. Casi una página." },
];

/** sm (320), md (400) y lg (560): elegí el ancho por el contenido, no por el gusto. Del lado izquierdo, para navegación */
export default function DrawerSizes() {
  return (
    <div className="flex flex-wrap gap-3">
      {sizes.map((s) => (
        <Drawer key={s.size} size={s.size} trigger={<Button variant="stroke">{s.size}</Button>}>
          <DrawerHeader title={s.title} description={`size="${s.size}"`} />
          <DrawerBody>
            <p>{s.text}</p>
          </DrawerBody>
          <DrawerFooter>
            <DrawerClose>
              <Button variant="stroke">Cerrar</Button>
            </DrawerClose>
          </DrawerFooter>
        </Drawer>
      ))}
      <Drawer side="left" size="sm" trigger={<Button variant="tonal">Desde la izquierda</Button>}>
        <DrawerHeader title="Navegación" />
        <DrawerBody>
          <ul className="flex flex-col gap-1 text-sm">
            {["Inicio", "Materias", "Calendario", "Notas"].map((item) => (
              <li key={item}>
                <a href="#" className="block rounded-md px-3 py-2 font-medium text-fg hover:bg-bg-subtle">
                  {item}
                </a>
              </li>
            ))}
          </ul>
        </DrawerBody>
      </Drawer>
    </div>
  );
}