43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
|
|
type AdaptiveWordTextProps = {
|
|
text: string;
|
|
variant: "hero" | "option";
|
|
};
|
|
|
|
export function AdaptiveWordText({ text, variant }: AdaptiveWordTextProps) {
|
|
const displayText = text.trim().replace(/\s+/g, "\n");
|
|
const compactLength = text.replace(/\s+/g, "").length;
|
|
const isVeryLongSingleWord = compactLength > 16 && !/\s/.test(text.trim());
|
|
const size = compactLength <= 6 ? "large" : compactLength <= 10 ? "medium" : "small";
|
|
|
|
const sizeClass = {
|
|
hero: {
|
|
large: "text-[clamp(52px,7vw,82px)]",
|
|
medium: "text-[clamp(42px,5.6vw,64px)]",
|
|
small: "text-[clamp(28px,4.2vw,46px)]",
|
|
},
|
|
option: {
|
|
large: "text-[clamp(30px,4vw,48px)]",
|
|
medium: "text-[clamp(25px,3.2vw,38px)]",
|
|
small: "text-[clamp(20px,2.6vw,30px)]",
|
|
},
|
|
}[variant][size];
|
|
|
|
return (
|
|
<span
|
|
className={cn(
|
|
"mx-auto block max-w-full whitespace-pre-line text-center font-black leading-[1.05] tracking-normal",
|
|
"pk-word-text",
|
|
variant === "hero" && "pk-word-text-hero mt-4 text-blue-500 [text-shadow:3px_3px_0_#dbeafe]",
|
|
variant === "option" && "pk-word-text-option mt-3 text-slate-900",
|
|
`pk-word-size-${size}`,
|
|
sizeClass,
|
|
isVeryLongSingleWord && "max-w-[min(100%,14ch)] [overflow-wrap:anywhere]",
|
|
)}
|
|
>
|
|
{displayText}
|
|
</span>
|
|
);
|
|
}
|