89 lines
3.6 KiB
TypeScript
89 lines
3.6 KiB
TypeScript
"use client";
|
|
|
|
import { memo, useMemo } from "react";
|
|
import TextBox from "@/components/Textbox";
|
|
import { cls } from "@/lib/utils";
|
|
import type { TextBoxProps } from "./types";
|
|
|
|
const CardStackTextBox = ({
|
|
title,
|
|
titleSegments,
|
|
description,
|
|
tag,
|
|
tagIcon,
|
|
buttons,
|
|
textboxLayout,
|
|
useInvertedBackground,
|
|
textBoxClassName = "",
|
|
titleClassName = "",
|
|
titleImageWrapperClassName = "",
|
|
titleImageClassName = "",
|
|
descriptionClassName = "",
|
|
tagClassName = "",
|
|
buttonContainerClassName = "",
|
|
buttonClassName = "",
|
|
buttonTextClassName = "",
|
|
}: TextBoxProps) => {
|
|
const styles = useMemo(() => {
|
|
if (textboxLayout === "default") {
|
|
return {
|
|
className: cls("flex flex-col gap-3 md:gap-1", textBoxClassName),
|
|
titleClassName: cls("text-6xl font-medium text-center", titleClassName),
|
|
descriptionClassName: cls("text-lg leading-[1.2] text-center md:max-w-6/10", descriptionClassName),
|
|
tagClassName: cls("w-fit px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-1 md:mb-3 mx-auto", tagClassName),
|
|
buttonContainerClassName: cls("flex gap-4 mt-1 md:mt-3 justify-center", buttonContainerClassName),
|
|
center: true,
|
|
};
|
|
}
|
|
|
|
if (textboxLayout === "inline-image") {
|
|
return {
|
|
className: cls("flex flex-col gap-3 md:gap-1", textBoxClassName),
|
|
titleClassName: cls("text-4xl md:text-5xl font-medium text-center", titleClassName),
|
|
descriptionClassName: cls("text-lg leading-[1.2] text-center", descriptionClassName),
|
|
tagClassName: cls("w-fit px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-1 md:mb-3 mx-auto", tagClassName),
|
|
buttonContainerClassName: cls("flex gap-4 mt-1 md:mt-3 justify-center", buttonContainerClassName),
|
|
center: true,
|
|
};
|
|
}
|
|
|
|
return {
|
|
className: textBoxClassName,
|
|
titleClassName: cls("text-6xl font-medium", titleClassName),
|
|
descriptionClassName: cls("text-lg leading-[1.2]", descriptionClassName),
|
|
tagClassName: cls("px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2", tagClassName),
|
|
buttonContainerClassName: cls("flex gap-4", buttonContainerClassName),
|
|
center: false,
|
|
};
|
|
}, [textboxLayout, textBoxClassName, titleClassName, descriptionClassName, tagClassName, buttonContainerClassName]);
|
|
|
|
if (!title && !titleSegments && !description) return null;
|
|
|
|
return (
|
|
<TextBox
|
|
title={title!}
|
|
titleSegments={titleSegments}
|
|
description={description!}
|
|
tag={tag}
|
|
tagIcon={tagIcon}
|
|
buttons={buttons}
|
|
textboxLayout={textboxLayout}
|
|
useInvertedBackground={useInvertedBackground}
|
|
className={styles.className}
|
|
titleClassName={styles.titleClassName}
|
|
titleImageWrapperClassName={titleImageWrapperClassName}
|
|
titleImageClassName={titleImageClassName}
|
|
descriptionClassName={styles.descriptionClassName}
|
|
tagClassName={styles.tagClassName}
|
|
buttonContainerClassName={styles.buttonContainerClassName}
|
|
buttonClassName={buttonClassName}
|
|
buttonTextClassName={buttonTextClassName}
|
|
center={styles.center}
|
|
/>
|
|
);
|
|
};
|
|
|
|
CardStackTextBox.displayName = "CardStackTextBox";
|
|
|
|
export default memo(CardStackTextBox);
|