55 lines
1.2 KiB
TypeScript
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>
|
||
|
|
);
|
||
|
|
}
|