c0bd6d7e3d
Sets up the foundational structure for the CAR Auto Center application using Vite and React. Includes project dependencies, basic HTML structure, TypeScript configuration, and initial README content. This commit establishes the project's build tool, core libraries, and essential configuration files.
75 lines
2.1 KiB
TypeScript
75 lines
2.1 KiB
TypeScript
import React from 'react';
|
|
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' | 'outline' | 'white' | 'ghost';
|
|
size?: 'sm' | 'md' | 'lg';
|
|
}
|
|
|
|
export const Button: React.FC<ButtonProps> = ({
|
|
children,
|
|
className,
|
|
variant = 'primary',
|
|
size = 'md',
|
|
...props
|
|
}) => {
|
|
const variants = {
|
|
primary: 'bg-primary text-white hover:brightness-110 border border-transparent',
|
|
outline: 'bg-transparent border-2 border-primary text-primary hover:bg-primary hover:text-white',
|
|
white: 'bg-white text-black hover:bg-gray-200 border border-transparent',
|
|
ghost: 'bg-transparent text-white hover:bg-white/10'
|
|
};
|
|
|
|
const sizes = {
|
|
sm: 'px-4 py-2 text-sm',
|
|
md: 'px-6 py-3 text-base',
|
|
lg: 'px-8 py-4 text-lg font-semibold'
|
|
};
|
|
|
|
return (
|
|
<button
|
|
className={cn(
|
|
'rounded-md transition-all duration-300 flex items-center justify-center gap-2',
|
|
variants[variant],
|
|
sizes[size],
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</button>
|
|
);
|
|
};
|
|
|
|
export const SectionTitle: React.FC<{ subtitle: string; title: string; center?: boolean; light?: boolean }> = ({
|
|
subtitle,
|
|
title,
|
|
center = true,
|
|
light = true
|
|
}) => {
|
|
return (
|
|
<div className={cn('mb-12', center ? 'text-center' : 'text-left')}>
|
|
<span className="text-primary font-bold uppercase tracking-widest text-sm mb-2 block">
|
|
{subtitle}
|
|
</span>
|
|
<h2 className={cn('text-3xl md:text-4xl font-bold', light ? 'text-white' : 'text-gray-900')}>
|
|
{title}
|
|
</h2>
|
|
<div className={cn(
|
|
'h-1 w-20 bg-primary mt-4 rounded-full',
|
|
center ? 'mx-auto' : ''
|
|
)} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const Container: React.FC<{ children: React.ReactNode; className?: string }> = ({ children, className }) => (
|
|
<div className={cn('max-w-7xl mx-auto px-4 sm:px-6 lg:px-8', className)}>
|
|
{children}
|
|
</div>
|
|
); |