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

const contentPortButtonVariants = cva(
  [
    "border inline-flex relative w-fit rounded-[8px] items-center justify-center gap-1.5 bg-clip-padding text-base cursor-pointer",
    "[transition:0.2s_ease-out] [transition-property:transform,box-shadow] active:translate-y-0.5 active:shadow-none",
  ],
  {
    variants: {
      variant: {
        default: [
          "bg-white dark:bg-[#0f0f0f] hover:bg-[#e5e5e5]/10 dark:hover:bg-[#272727]/10 text-stone-800 dark:text-white border-b border-[#e5e5e5] dark:border-[#272727] shadow-[0_3px_0_#e5e5e5] dark:shadow-[0_3px_0_#272727]",
        ],
        primary: [
          "bg-indigo-600 hover:bg-indigo-600/95 text-white border-b border-indigo-600 shadow-[0_3px_0_var(--color-indigo-700)]",
        ],
        warning: [
          "bg-yellow-500 hover:bg-yellow-500/95 text-zinc-800 border-b border-yellow-500 shadow-[0_3px_0_var(--color-yellow-600)]",
        ],
        danger: [
          "bg-red-500 hover:bg-red-500/95 text-white border-b border-red-500 shadow-[0_3px_0_var(--color-red-600)]",
        ],
        success: [
          "bg-green-500 hover:bg-green-500/95 text-white border-b border-green-500 shadow-[0_3px_0_var(--color-green-600)]",
        ],
      },
      size: {
        sm: "h-9 px-4 py-2 [&>svg]:size-4 text-sm",
        default: "h-11 px-6 py-3 [&>svg]:size-5 text-base",
        lg: "h-13 px-8 py-4 [&>svg]:size-6 text-base",
        icon: "size-10 [&>svg]:size-5",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
);

interface ContentPortButtonProps
  extends React.ComponentProps<"button">,
    VariantProps<typeof contentPortButtonVariants> {}

export function ContentPortButton({
  className,
  children,
  variant,
  size,
  ...props
}: ContentPortButtonProps) {
  return (
    <button
      className={cn(contentPortButtonVariants({ variant, size }), className)}
      {...props}
    >
      {children}
    </button>
  );
}
Contentport Button

Installation

Usage

Variants

Sizes

Installation

Usage

Variants

Sizes
