Badge y Chip

import { Badge } from "@/registry/ds/badge";
import { ArrowUpRight, Close } from "@/registry/ds/icons";

export default function BadgeSizes() {
  return (
    <div className="flex flex-col items-center gap-4">
      <div className="flex flex-wrap items-center gap-3">
        <Badge size="sm">Small</Badge>
        <Badge size="md">Medium</Badge>
        <Badge size="lg">Large</Badge>
      </div>
      <div className="flex flex-wrap items-center gap-3">
        <Badge radius="semi">Semi</Badge>
        <Badge radius="semi" iconRight={<ArrowUpRight />}>Con icono</Badge>
        <Badge radius="semi" iconOnly={<Close />} aria-label="Rechazado" />
        <Badge iconOnly={<Close />} aria-label="Rechazado" />
      </div>
    </div>
  );
}

import { Chip } from "@/registry/ds/badge";
import { ArrowUpRight } from "@/registry/ds/icons";

export default function ChipBasic() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Chip href="#" iconRight={<ArrowUpRight />}>Ingeniería</Chip>
      <Chip href="#" iconRight={<ArrowUpRight />}>Diseño</Chip>
      <Chip href="#" radius="semi">Ver todas</Chip>
    </div>
  );
}

import { Chip } from "@/registry/ds/badge";

export default function ChipStatus() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Chip status="success">Activo</Chip>
      <Chip status="warning">Pendiente</Chip>
      <Chip status="danger">Rechazado</Chip>
    </div>
  );
}

import { BadgeGroup } from "@/registry/ds/badge";
import { ArrowUpRight } from "@/registry/ds/icons";

export default function BadgeGroupExample() {
  return (
    <div className="flex flex-col items-center gap-4">
      <BadgeGroup badge="Nuevo" href="#" iconRight={<ArrowUpRight />}>Inscripciones abiertas para 2027</BadgeGroup>
      <BadgeGroup badge="Beta" variant="stroke" position="right" size="sm" radius="semi">Campus virtual renovado</BadgeGroup>
    </div>
  );
}