new-personal-site/components/lib/layout/List.tsx
2024-12-09 16:36:17 +01:00

55 lines
1.2 KiB
TypeScript

import {
AnchorHTMLAttributes,
DetailedHTMLProps,
HTMLAttributes,
OlHTMLAttributes,
} from "react";
import { twMerge } from "tailwind-merge";
/**
* # Ordered and unorder Lists
* @className twui-ol
* @className twui-ul
*/
export default function List({
ordered,
items,
...props
}: DetailedHTMLProps<HTMLAttributes<HTMLUListElement>, HTMLUListElement> &
DetailedHTMLProps<OlHTMLAttributes<HTMLOListElement>, HTMLOListElement> & {
items: {
content: React.ReactNode | string;
}[];
ordered?: boolean;
}) {
const listContent = (
<>
{items.map((item, index) => (
<li key={index}>{item.content}</li>
))}
</>
);
const className = "flex flex-col items-start gap-4";
if (ordered) {
return (
<ol
{...props}
className={twMerge(className, "twui-ol", props.className)}
>
{listContent}
</ol>
);
}
return (
<ul
{...props}
className={twMerge(className, "twui-ul", props.className)}
>
{listContent}
</ul>
);
}