Popover

"use client";

import { useState } from "react";
import { Chip } from "@/registry/ds/badge";
import { Button } from "@/registry/ds/button";
import { Popover, PopoverClose } from "@/registry/ds/popover";

/** Confirmación liviana, al lado de la acción. Para lo reversible o de poco costo; lo irreversible va a un Modal */
export default function PopoverConfirm() {
  const [inscripta, setInscripta] = useState(true);

  return (
    <div className="flex items-center gap-4 rounded-xl border border-border bg-bg-elevated px-4 py-3">
      <div className="min-w-0 flex-1">
        <p className="text-sm font-medium text-fg">Física I · Comisión 2</p>
        <p className="text-xs text-fg-muted">Martes 14:00 · Lab 2</p>
      </div>
      {inscripta ? (
        <Popover side="bottom" align="end" title="¿Darte de baja de Física I?" description="Liberás tu lugar. Podés volver a inscribirte mientras haya cupo." trigger={<Button size="sm" variant="stroke">Darme de baja</Button>}>
          <div className="flex justify-end gap-2">
            <PopoverClose>
              <Button size="sm" variant="text">
                Cancelar
              </Button>
            </PopoverClose>
            <PopoverClose>
              <Button size="sm" onClick={() => setInscripta(false)}>
                Darme de baja
              </Button>
            </PopoverClose>
          </div>
        </Popover>
      ) : (
        <div className="flex items-center gap-3">
          <Chip size="sm" status="warning">
            Sin inscripción
          </Chip>
          <Button size="sm" variant="tonal" onClick={() => setInscripta(true)}>
            Inscribirme
          </Button>
        </div>
      )}
    </div>
  );
}

import { Button } from "@/registry/ds/button";
import { HelpCircle } from "@/registry/ds/icons";
import { Input } from "@/registry/ds/input";
import { Link } from "@/registry/ds/link";
import { Popover } from "@/registry/ds/popover";

/** Ayuda contextual: más que un Tooltip (texto largo, un link) y menos que una página. Se abre con clic o Enter, no con hover */
export default function PopoverHelp() {
  return (
    <div className="w-80">
      <Input
        label={
          <span className="inline-flex items-center gap-1.5">
            CBU o alias
            <Popover
              size="lg"
              side="right"
              title="Dónde lo encontrás"
              description="Son 22 dígitos, o el alias que elegiste en tu banco."
              trigger={<Button variant="text" size="sm" iconOnly={<HelpCircle />} aria-label="Ayuda sobre CBU o alias" className="-my-2 size-7" />}
            >
              <ol className="list-decimal space-y-1 pl-4 text-sm text-fg-muted">
                <li>Abrí la app de tu banco.</li>
                <li>Entrá a la cuenta y tocá «Datos» o «Compartir».</li>
                <li>Copiá el CBU completo o el alias.</li>
              </ol>
              <p className="pt-2 text-sm">
                <Link href="#" external>
                  Qué es un CBU
                </Link>
              </p>
            </Popover>
          </span>
        }
        placeholder="0000003100012345678901"
        inputMode="numeric"
      />
    </div>
  );
}

"use client";

import { useState } from "react";
import { Button } from "@/registry/ds/button";
import { ArrowUpRight } from "@/registry/ds/icons";
import { Input } from "@/registry/ds/input";
import { Popover } from "@/registry/ds/popover";
import { Switch } from "@/registry/ds/switch";

/** Controlado: `open` lo maneja el padre, así el estado interno (copiado) se reinicia al cerrar */
export default function PopoverShare() {
  const [open, setOpen] = useState(false);
  const [copied, setCopied] = useState(false);
  const link = "campus.edu/m/MAT201";

  return (
    <Popover
      open={open}
      onOpenChange={(o) => {
        setOpen(o);
        if (!o) setCopied(false);
      }}
      side="bottom"
      align="start"
      size="lg"
      title="Compartir materia"
      closable
      trigger={
        <Button variant="stroke" iconLeft={<ArrowUpRight />}>
          Compartir
        </Button>
      }
    >
      <div className="flex flex-col gap-4">
        <Input
          size="sm"
          aria-label="Enlace"
          readOnly
          value={link}
          action={
            <Button
              size="sm"
              variant="tonal"
              onClick={() => {
                navigator.clipboard?.writeText(link).catch(() => {});
                setCopied(true);
              }}
            >
              {copied ? "Copiado" : "Copiar"}
            </Button>
          }
        />
        <Switch size="sm" label="Cualquiera con el enlace puede ver" supporting="Si lo apagás, solo alumnos inscriptos." defaultChecked />
        <p className="sr-only" aria-live="polite">
          {copied ? "Enlace copiado" : ""}
        </p>
      </div>
    </Popover>
  );
}