import type { FC, ReactNode } from "react";

import { cn } from "@/lib/utils";
import { cva, type VariantProps } from "class-variance-authority";

type Props = {
  children?: ReactNode;
  disabled?: boolean;
  className?: string;
} & React.ComponentProps<"a"> &
  VariantProps<typeof linkVariants>;

const linkVariants = cva(
  "inline-flex items-center gap-2 text-foreground transition-colors [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
        default: "hover:text-foreground/70 aria-disabled:text-foreground/70",
        menu: "rounded-md px-3 py-1 hover:bg-secondary aria-disabled:text-foreground/70",
        underline:
          "text-foreground underline hover:text-foreground/70 aria-disabled:text-foreground/70",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
);

export const LinkItem: FC<Props> = ({
  disabled = false,
  variant,
  className,
  ...props
}) => {
  return (
    <a
      className={cn(linkVariants({ variant, className }))}
      aria-disabled={disabled}
      {...props}
    />
  );
};

下線付きリンク

同じ「リンク」カテゴリーのUIパーツ

下線付きリンク（アイコン付き）

テキストリンク

テキストリンク（アイコン付き）

Other Shadcn UI UI parts

アコーディオン

アラート

リンク