Link

import { Link } from "@/registry/ds/link";

/** Los tres estilos en su lugar: inline dentro del texto, standalone en una lista de recursos, neutral en metadatos */
export default function LinkVariants() {
  return (
    <div className="flex w-full max-w-md flex-col gap-6 text-sm">
      <p className="text-fg-muted">
        La correlativa es <Link href="#">Cálculo I</Link>. Si la cursaste en otra universidad, pedí la{" "}
        <Link href="#" external>
          equivalencia
        </Link>{" "}
        antes del 30 de octubre.
      </p>

      <div>
        <p className="mb-2 text-xs font-medium uppercase tracking-wide text-fg-subtle">Recursos</p>
        <ul className="flex flex-col gap-2">
          <li>
            <Link href="#" variant="standalone">
              Programa de la materia (PDF)
            </Link>
          </li>
          <li>
            <Link href="#" variant="standalone">
              Guía de trabajos prácticos
            </Link>
          </li>
          <li>
            <Link href="#" variant="standalone" external>
              Aula virtual
            </Link>
          </li>
        </ul>
      </div>

      <p className="text-xs text-fg-subtle">
        Actualizado el 12 de octubre · <Link href="#" variant="neutral">Historial de cambios</Link> · <Link href="#" variant="neutral">Reportar un error</Link>
      </p>
    </div>
  );
}