72 lines
2.2 KiB
TypeScript
72 lines
2.2 KiB
TypeScript
import React from 'react';
|
|
import Link from 'next/link';
|
|
import { clsx, type ClassValue } from 'clsx';
|
|
import { twMerge } from 'tailwind-merge';
|
|
|
|
export function cn(...inputs: ClassValue[]) {
|
|
return twMerge(clsx(inputs));
|
|
}
|
|
|
|
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
|
|
size?: 'sm' | 'md' | 'lg';
|
|
href?: string;
|
|
className?: string;
|
|
children?: React.ReactNode;
|
|
}
|
|
|
|
export function Button({ className, variant = 'primary', size = 'md', href, ...props }: ButtonProps) {
|
|
const baseStyles = 'inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none';
|
|
|
|
const variants = {
|
|
primary: 'bg-primary text-white hover:bg-primary-dark',
|
|
secondary: 'bg-secondary text-white hover:bg-secondary-light',
|
|
outline: 'border border-neutral-dark bg-transparent hover:bg-neutral-light text-text-primary',
|
|
ghost: 'hover:bg-neutral-light text-text-primary',
|
|
};
|
|
|
|
const sizes = {
|
|
sm: 'h-9 px-3 text-sm',
|
|
md: 'h-10 px-4 py-2',
|
|
lg: 'h-11 px-8 text-lg',
|
|
};
|
|
|
|
const styles = cn(baseStyles, variants[variant], sizes[size], className);
|
|
|
|
if (href) {
|
|
return (
|
|
<Link href={href} className={styles}>
|
|
{props.children}
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<button className={styles} {...props} />
|
|
);
|
|
}
|
|
|
|
export function Section({ className, children, ...props }: React.HTMLAttributes<HTMLElement>) {
|
|
return (
|
|
<section className={cn('py-12 md:py-16 lg:py-24', className)} {...props}>
|
|
{children}
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export function Container({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
|
|
return (
|
|
<div className={cn('container mx-auto px-4 md:px-6', className)} {...props}>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function Card({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
|
|
return (
|
|
<div className={cn('bg-white rounded-lg border border-neutral-dark shadow-sm overflow-hidden', className)} {...props}>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|