65 lines
1.6 KiB
TypeScript
65 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { HTMLAttributes, ReactNode } from "react";
|
|
|
|
interface SectionTitleProps extends HTMLAttributes<HTMLHeadingElement> {
|
|
children: ReactNode;
|
|
variant?: "default" | "gradient" | "gold";
|
|
size?: "sm" | "md" | "lg" | "xl";
|
|
subtitle?: ReactNode;
|
|
}
|
|
|
|
const sizeClasses = {
|
|
sm: "text-2xl sm:text-3xl",
|
|
md: "text-3xl sm:text-4xl md:text-5xl",
|
|
lg: "text-4xl sm:text-5xl md:text-6xl lg:text-7xl",
|
|
xl: "text-5xl md:text-7xl",
|
|
};
|
|
|
|
export default function SectionTitle({
|
|
children,
|
|
variant = "default",
|
|
size = "md",
|
|
subtitle,
|
|
className = "",
|
|
...props
|
|
}: SectionTitleProps) {
|
|
const baseClasses = "font-gaming font-black tracking-tight mb-4";
|
|
|
|
let titleClasses = `${baseClasses} ${sizeClasses[size]} ${className}`;
|
|
|
|
if (variant === "gradient") {
|
|
titleClasses += " bg-gradient-to-r from-pixel-gold via-orange-400 to-pixel-gold bg-clip-text text-transparent";
|
|
} else if (variant === "gold") {
|
|
titleClasses += " text-pixel-gold";
|
|
} else {
|
|
titleClasses += " text-white";
|
|
}
|
|
|
|
return (
|
|
<div className="text-center">
|
|
<h1 className={titleClasses} {...props}>
|
|
{variant === "gradient" ? (
|
|
<span
|
|
style={{
|
|
textShadow: "0 0 30px rgba(218, 165, 32, 0.5)",
|
|
}}
|
|
>
|
|
{children}
|
|
</span>
|
|
) : (
|
|
children
|
|
)}
|
|
</h1>
|
|
{subtitle && (
|
|
<div className="text-pixel-gold text-lg md:text-xl font-gaming-subtitle font-semibold flex items-center justify-center gap-2 tracking-wide">
|
|
<span>✦</span>
|
|
<span>{subtitle}</span>
|
|
<span>✦</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|