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

31 lines
860 B
TypeScript

import { DetailedHTMLProps, HTMLAttributes } from "react";
import { twMerge } from "tailwind-merge";
/**
* # Vertical and Horizontal Divider
* @className twui-divider
* @className twui-divider-horizontal
* @className twui-divider-vertical
*/
export default function Divider({
vertical,
...props
}: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
vertical?: boolean;
}) {
return (
<div
{...props}
className={twMerge(
"border-slate-200 dark:border-white/10",
vertical
? "border-0 border-l h-full min-h-5"
: "border-0 border-t w-full",
"twui-divider",
vertical ? "twui-divider-vertical" : "twui-divider-horizontal",
props.className
)}
/>
);
}