62 lines
1.9 KiB
TypeScript
62 lines
1.9 KiB
TypeScript
import { ComponentProps, ReactNode } from "react";
|
|
import Stack from "../layout/Stack copy";
|
|
import Row from "../layout/Row";
|
|
import { Check, CheckCircle, CheckCircle2 } from "lucide-react";
|
|
import Span from "../layout/Span";
|
|
import { twMerge } from "tailwind-merge";
|
|
|
|
type BulletPoint = {
|
|
title: string;
|
|
icon?: ReactNode;
|
|
};
|
|
|
|
export type TWUI_CHECK_BULLET_POINTS_PROPS = ComponentProps<typeof Stack> & {
|
|
bulletPoints: BulletPoint[];
|
|
bulletWrapperProps?: ComponentProps<typeof Row>;
|
|
iconProps?: ComponentProps<typeof CheckCircle2>;
|
|
titleProps?: ComponentProps<typeof Span>;
|
|
};
|
|
|
|
/**
|
|
* # Check Bullet Points Component
|
|
* @className_wrapper twui-check-bullet-points-wrapper
|
|
*/
|
|
export default function CheckBulletPoints({
|
|
bulletPoints,
|
|
bulletWrapperProps,
|
|
iconProps,
|
|
titleProps,
|
|
...props
|
|
}: TWUI_CHECK_BULLET_POINTS_PROPS) {
|
|
return (
|
|
<Stack {...props} className={twMerge("gap-3", props.className)}>
|
|
{bulletPoints.map((bulletPoint, index) => {
|
|
return (
|
|
<Row
|
|
key={index}
|
|
{...bulletWrapperProps}
|
|
className={twMerge(
|
|
"gap-2 xl:flex-nowrap",
|
|
bulletWrapperProps?.className
|
|
)}
|
|
>
|
|
{bulletPoint.icon || (
|
|
<CheckCircle2
|
|
className="text-success min-w-[20px]"
|
|
size={20}
|
|
{...iconProps}
|
|
/>
|
|
)}
|
|
<Span
|
|
{...titleProps}
|
|
className={twMerge("", titleProps?.className)}
|
|
>
|
|
{bulletPoint.title}
|
|
</Span>
|
|
</Row>
|
|
);
|
|
})}
|
|
</Stack>
|
|
);
|
|
}
|