116 lines
3.3 KiB
TypeScript
116 lines
3.3 KiB
TypeScript
/** THEME */
|
|
import Section from "$/uwil/Section";
|
|
import TripleCol, { TripleColType } from "$/uwil/TripleCol";
|
|
import { ButtonProps } from "@/components/ui/button";
|
|
import {
|
|
BgColorName,
|
|
bgColors,
|
|
ImageShapeName,
|
|
imageShapes,
|
|
} from "@/front/lib/constants";
|
|
import { cn } from "@/lib/utils";
|
|
import { CustomButtonVariant, TextProps } from "@/types/front";
|
|
|
|
type TripleColSectionProps = {
|
|
title?: TextProps;
|
|
description?: TextProps;
|
|
cols: TripleColType[];
|
|
button?: {
|
|
label: string;
|
|
href: string;
|
|
variant?: ButtonProps["variant"] | CustomButtonVariant;
|
|
};
|
|
variant?: BgColorName;
|
|
className?: string;
|
|
shape?: ImageShapeName;
|
|
};
|
|
|
|
/**
|
|
* TripleColSection
|
|
*
|
|
* A section component designed to display:
|
|
* - a centered title
|
|
* - a three-column layout (`TripleCol`)
|
|
* - an optional call-to-action button
|
|
*
|
|
* This component is a wrapper around the `Section` layout component,
|
|
* and injects a `TripleCol` grid as its content.
|
|
*
|
|
* Behavior:
|
|
* - The title is required and always displayed.
|
|
* - The button is optional; when provided:
|
|
* - a default right chevron icon is automatically added
|
|
* - the button is positioned at the bottom of the section
|
|
* - The background variant defaults to `BACKGROUND` if not specified.
|
|
*
|
|
* @param {TripleColSectionProps} props
|
|
*
|
|
* @property {TextProps} title - Optional Main title displayed at the top (required)
|
|
* @property {TextProps} description - Optional description
|
|
* @property {TripleColType[]} cols - Array of 3 column items rendered inside `TripleCol`
|
|
* @property {Object} button - Optional CTA button
|
|
* @property {string} button.label - Button text
|
|
* @property {string} button.href - Link target
|
|
* @property {ImageShapeName} shape - Optional, shape of the image
|
|
* @property {string} button.variant - Button style variant
|
|
* @property {BgColorName} variant - Section background theme (default: BACKGROUND)
|
|
*
|
|
* @example
|
|
* <TripleColSection
|
|
* title={{ text: "Our services" }}
|
|
* cols={[
|
|
* { title: "A", description: "..." },
|
|
* { title: "B", description: "..." },
|
|
* { title: "C", description: "..." }
|
|
* ]}
|
|
* button={{ label: "Learn more", href: "/services" }}
|
|
* />
|
|
*/
|
|
export default function TripleColSection(props: TripleColSectionProps) {
|
|
const {
|
|
title,
|
|
description,
|
|
cols,
|
|
button,
|
|
variant = bgColors.BACKGROUND,
|
|
className,
|
|
shape = imageShapes.ROUNDED,
|
|
} = props;
|
|
|
|
return (
|
|
<Section
|
|
className={cn("text-center", className)}
|
|
variant={variant}
|
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
{...(title && {
|
|
title: {
|
|
text: title.text,
|
|
font: title.font,
|
|
weight: title.weight,
|
|
},
|
|
})}
|
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
{...(description && {
|
|
description: {
|
|
text: description.text,
|
|
font: description.font,
|
|
weight: description.weight,
|
|
},
|
|
})}
|
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
{...(button && {
|
|
button: {
|
|
icon: {
|
|
icon: "chevron-right",
|
|
placement: "right",
|
|
},
|
|
placement: "bottom",
|
|
href: button.href,
|
|
label: button.label,
|
|
},
|
|
})}
|
|
>
|
|
<TripleCol shape={shape} cols={cols} variant={variant} />
|
|
</Section>
|
|
);
|
|
}
|