soufiane
510eab7794
Add animated tea icons background with 35 falling icons, update styling to match theme, and streamline branding across header and footer. Changes: - Add 35 animated tea icons with falling animation (no rotation) - Create fallDown animation with gentle horizontal oscillation - Add new homepage components (CountdownTimer, GamePeriod, GrandPrize, AboutContest) - Include tea icon images (teapot-green, tea-cup, gift-box, tea-leaves, teapot-pink) - Remove "Thé Tip Top" text branding from header and footer (keep logo only) - Add Pinterest social media icon to footer - Update button color scheme to match golden/beige theme (#d4a574, #c4956a) - Increase icon opacity to 50% for better visibility 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
91 lines
2.5 KiB
TypeScript
91 lines
2.5 KiB
TypeScript
import { ButtonHTMLAttributes, forwardRef } from "react";
|
|
import { cn } from "@/utils/helpers";
|
|
|
|
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
variant?: "primary" | "secondary" | "outline" | "danger" | "success";
|
|
size?: "sm" | "md" | "lg";
|
|
isLoading?: boolean;
|
|
fullWidth?: boolean;
|
|
}
|
|
|
|
const Button = forwardRef<HTMLButtonElement, ButtonProps>(
|
|
(
|
|
{
|
|
children,
|
|
className,
|
|
variant = "primary",
|
|
size = "md",
|
|
isLoading = false,
|
|
fullWidth = false,
|
|
disabled,
|
|
...props
|
|
},
|
|
ref
|
|
) => {
|
|
const baseStyles =
|
|
"inline-flex items-center justify-center font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed";
|
|
|
|
const variants = {
|
|
primary:
|
|
"bg-[#d4a574] text-white hover:bg-[#c4956a] focus:ring-[#d4a574] shadow-md hover:shadow-lg",
|
|
secondary:
|
|
"bg-white text-[#5a5a4e] hover:bg-[#d4a574] hover:text-white focus:ring-[#d4a574] border border-[#e5e4dc] shadow-sm",
|
|
outline:
|
|
"border-2 border-[#d4a574] text-[#d4a574] hover:bg-[#d4a574] hover:text-white focus:ring-[#d4a574] shadow-sm",
|
|
danger:
|
|
"bg-red-600 text-white hover:bg-red-700 focus:ring-red-500 shadow-md",
|
|
success:
|
|
"bg-[#1a4d2e] text-white hover:bg-[#2d5a3d] focus:ring-[#1a4d2e] shadow-md hover:shadow-lg",
|
|
};
|
|
|
|
const sizes = {
|
|
sm: "px-3 py-1.5 text-sm",
|
|
md: "px-4 py-2 text-base",
|
|
lg: "px-6 py-3 text-lg",
|
|
};
|
|
|
|
return (
|
|
<button
|
|
ref={ref}
|
|
disabled={disabled || isLoading}
|
|
className={cn(
|
|
baseStyles,
|
|
variants[variant],
|
|
sizes[size],
|
|
fullWidth && "w-full",
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
{isLoading && (
|
|
<svg
|
|
className="animate-spin -ml-1 mr-2 h-4 w-4"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<circle
|
|
className="opacity-25"
|
|
cx="12"
|
|
cy="12"
|
|
r="10"
|
|
stroke="currentColor"
|
|
strokeWidth="4"
|
|
/>
|
|
<path
|
|
className="opacity-75"
|
|
fill="currentColor"
|
|
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
|
/>
|
|
</svg>
|
|
)}
|
|
{children}
|
|
</button>
|
|
);
|
|
}
|
|
);
|
|
|
|
Button.displayName = "Button";
|
|
|
|
export default Button;
|