components
This commit is contained in:
@@ -1,130 +1 @@
|
||||
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' | 'accent' | 'outline' | 'ghost' | 'white';
|
||||
size?: 'sm' | 'md' | 'lg' | 'xl';
|
||||
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-full font-semibold transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none active:scale-95';
|
||||
|
||||
const variants = {
|
||||
primary: 'bg-primary text-white hover:bg-primary-dark shadow-md hover:shadow-lg',
|
||||
secondary: 'bg-secondary text-white hover:bg-secondary-light shadow-md hover:shadow-lg',
|
||||
accent: 'bg-accent text-primary-dark hover:bg-accent-dark shadow-md hover:shadow-lg',
|
||||
outline: 'border-2 border-primary bg-transparent hover:bg-primary hover:text-white text-primary',
|
||||
ghost: 'hover:bg-primary-light text-primary',
|
||||
white: 'bg-white text-primary hover:bg-neutral-light shadow-md hover:shadow-lg',
|
||||
};
|
||||
|
||||
const sizes = {
|
||||
sm: 'h-9 px-4 text-sm',
|
||||
md: 'h-11 px-6 text-base',
|
||||
lg: 'h-14 px-8 text-lg',
|
||||
xl: 'h-16 px-10 text-xl',
|
||||
};
|
||||
|
||||
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-16 md:py-28 lg:py-36 overflow-hidden content-visibility-auto', className)} {...props}>
|
||||
{children}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export function Container({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
|
||||
return (
|
||||
<div className={cn('container mx-auto px-4 md:px-12 lg:px-16 max-w-7xl', className)} {...props}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Heading({
|
||||
level = 2,
|
||||
children,
|
||||
className,
|
||||
subtitle,
|
||||
align = 'left'
|
||||
}: {
|
||||
level?: 1 | 2 | 3 | 4;
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
subtitle?: string;
|
||||
align?: 'left' | 'center' | 'right';
|
||||
}) {
|
||||
const Tag = `h${level}` as any;
|
||||
|
||||
const sizes = {
|
||||
1: 'text-4xl md:text-6xl lg:text-7xl xl:text-8xl font-extrabold leading-[1.1]',
|
||||
2: 'text-3xl md:text-5xl lg:text-6xl font-bold leading-tight',
|
||||
3: 'text-2xl md:text-3xl lg:text-4xl font-bold',
|
||||
4: 'text-xl md:text-2xl font-bold',
|
||||
};
|
||||
|
||||
const alignments = {
|
||||
left: 'text-left',
|
||||
center: 'text-center mx-auto',
|
||||
right: 'text-right',
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={cn('mb-8 md:mb-16', alignments[align], className)}>
|
||||
{subtitle && (
|
||||
<span className="inline-block text-accent font-bold tracking-widest uppercase text-xs md:text-sm mb-3 md:mb-4 animate-fade-in">
|
||||
{subtitle}
|
||||
</span>
|
||||
)}
|
||||
<Tag className={cn(sizes[level as keyof typeof sizes], 'text-primary')}>
|
||||
{children}
|
||||
</Tag>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Card({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
|
||||
return (
|
||||
<div className={cn('premium-card overflow-hidden', className)} {...props}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Badge({ children, className, variant = 'primary' }: { children: React.ReactNode, className?: string, variant?: 'primary' | 'accent' | 'neutral' }) {
|
||||
const variants = {
|
||||
primary: 'bg-primary-light text-primary',
|
||||
accent: 'bg-accent-light text-accent-dark',
|
||||
neutral: 'bg-neutral-medium text-text-secondary',
|
||||
};
|
||||
|
||||
return (
|
||||
<span className={cn('inline-flex items-center px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider', variants[variant], className)}>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
export * from './ui/index';
|
||||
|
||||
Reference in New Issue
Block a user