wehub-resource-sync
e4dcfc49aa
Tests / Import Check (Python 3.13) (push) Has been cancelled
Tests / Import Check (Python 3.14) (push) Has been cancelled
Tests / Python Tests (Python 3.11) (push) Has been cancelled
Tests / Python Tests (Python 3.12) (push) Has been cancelled
Tests / Python Tests (Python 3.14) (push) Has been cancelled
Tests / Test Summary (push) Has been cancelled
Tests / Lint and Format (push) Has been cancelled
Tests / Web Node Tests (push) Has been cancelled
Tests / Import Check (Python 3.11) (push) Has been cancelled
Tests / Import Check (Python 3.12) (push) Has been cancelled
Tests / Python Tests (Python 3.13) (push) Has been cancelled
62 lines
1.6 KiB
TypeScript
62 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { Loader2 } from "lucide-react";
|
|
|
|
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
variant?: "primary" | "secondary" | "danger" | "ghost";
|
|
size?: "sm" | "md" | "lg";
|
|
loading?: boolean;
|
|
icon?: React.ReactNode;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
const variantStyles = {
|
|
primary:
|
|
"bg-[var(--primary)] text-[var(--primary-foreground)] hover:opacity-90 shadow-md shadow-[var(--primary)]/15",
|
|
secondary:
|
|
"bg-[var(--secondary)] text-[var(--secondary-foreground)] hover:bg-[var(--muted)]",
|
|
danger:
|
|
"bg-[var(--destructive)] text-[var(--destructive-foreground)] hover:opacity-90 shadow-md shadow-[var(--destructive)]/15",
|
|
ghost:
|
|
"text-[var(--muted-foreground)] hover:bg-[var(--muted)] hover:text-[var(--foreground)]",
|
|
};
|
|
|
|
const sizeStyles = {
|
|
sm: "px-3 py-1.5 text-xs",
|
|
md: "px-4 py-2 text-sm",
|
|
lg: "px-6 py-3 text-base",
|
|
};
|
|
|
|
export default function Button({
|
|
variant = "primary",
|
|
size = "md",
|
|
loading = false,
|
|
icon,
|
|
children,
|
|
className = "",
|
|
disabled,
|
|
...props
|
|
}: ButtonProps) {
|
|
return (
|
|
<button
|
|
className={`
|
|
inline-flex items-center justify-center gap-2 font-medium rounded-lg transition-all
|
|
disabled:opacity-50 disabled:cursor-not-allowed
|
|
${variantStyles[variant]}
|
|
${sizeStyles[size]}
|
|
${className}
|
|
`}
|
|
disabled={disabled || loading}
|
|
{...props}
|
|
>
|
|
{loading ? (
|
|
<Loader2 className="w-4 h-4 animate-spin" />
|
|
) : icon ? (
|
|
icon
|
|
) : null}
|
|
{children}
|
|
</button>
|
|
);
|
|
}
|