74 lines
2.0 KiB
TypeScript
74 lines
2.0 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}`;
|
|
|
|
const titleStyles: React.CSSProperties & {
|
|
WebkitBackgroundClip?: string;
|
|
WebkitTextFillColor?: string;
|
|
} = {};
|
|
if (variant === "gradient") {
|
|
titleClasses += " bg-clip-text text-transparent";
|
|
titleStyles.background = `linear-gradient(to right, var(--accent-color), var(--accent), var(--accent-color))`;
|
|
titleStyles.WebkitBackgroundClip = "text";
|
|
titleStyles.WebkitTextFillColor = "transparent";
|
|
} else if (variant === "gold") {
|
|
titleStyles.color = "var(--accent-color)";
|
|
} else {
|
|
titleStyles.color = "var(--foreground)";
|
|
}
|
|
|
|
return (
|
|
<div className="text-center">
|
|
<h1 className={titleClasses} style={titleStyles} {...props}>
|
|
{variant === "gradient" ? (
|
|
<span
|
|
style={{
|
|
textShadow: `0 0 30px color-mix(in srgb, var(--accent-color) 50%, transparent)`,
|
|
}}
|
|
>
|
|
{children}
|
|
</span>
|
|
) : (
|
|
children
|
|
)}
|
|
</h1>
|
|
{subtitle && (
|
|
<div
|
|
className="text-lg md:text-xl font-gaming-subtitle font-semibold flex items-center justify-center gap-2 tracking-wide"
|
|
style={{ color: "var(--accent-color)" }}
|
|
>
|
|
<span>✦</span>
|
|
<span>{subtitle}</span>
|
|
<span>✦</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|