Seed: resume template (10 files)
This commit is contained in:
@@ -0,0 +1,53 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
const variantClasses: Record<string, string> = {
|
||||||
|
default: "bg-indigo-600 text-white hover:bg-indigo-700",
|
||||||
|
secondary: "bg-slate-100 text-slate-900 hover:bg-slate-200",
|
||||||
|
outline: "border border-slate-300 bg-transparent hover:bg-slate-50 text-slate-900",
|
||||||
|
ghost: "bg-transparent hover:bg-slate-100 text-slate-900",
|
||||||
|
destructive: "bg-red-600 text-white hover:bg-red-700",
|
||||||
|
link: "bg-transparent underline-offset-4 hover:underline text-indigo-600",
|
||||||
|
};
|
||||||
|
|
||||||
|
const sizeClasses: Record<string, string> = {
|
||||||
|
default: "h-10 px-4 py-2 text-sm",
|
||||||
|
sm: "h-8 px-3 text-xs",
|
||||||
|
lg: "h-12 px-6 text-base",
|
||||||
|
icon: "h-10 w-10 p-0",
|
||||||
|
};
|
||||||
|
|
||||||
|
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
||||||
|
variant?: keyof typeof variantClasses;
|
||||||
|
size?: keyof typeof sizeClasses;
|
||||||
|
asChild?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||||
|
({ className, variant = "default", size = "default", asChild, children, ...props }, ref) => {
|
||||||
|
const classes = cn(
|
||||||
|
"inline-flex items-center justify-center gap-2 rounded-md font-medium transition-colors disabled:opacity-50 disabled:pointer-events-none",
|
||||||
|
variantClasses[variant] || variantClasses.default,
|
||||||
|
sizeClasses[size] || sizeClasses.default,
|
||||||
|
className
|
||||||
|
);
|
||||||
|
if (asChild && React.isValidElement(children)) {
|
||||||
|
return React.cloneElement(children as React.ReactElement, {
|
||||||
|
className: cn(classes, (children as React.ReactElement).props?.className),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return <button ref={ref} className={classes} {...props}>{children}</button>;
|
||||||
|
}
|
||||||
|
);
|
||||||
|
Button.displayName = "Button";
|
||||||
|
|
||||||
|
export function buttonVariants(opts?: { variant?: string; size?: string; className?: string }) {
|
||||||
|
return cn(
|
||||||
|
"inline-flex items-center justify-center gap-2 rounded-md font-medium transition-colors",
|
||||||
|
variantClasses[opts?.variant || "default"],
|
||||||
|
sizeClasses[opts?.size || "default"],
|
||||||
|
opts?.className
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Button;
|
||||||
Reference in New Issue
Block a user