full-width-divider

1import { cn } from "@/lib/utils";
2 
3type FullWidthDividerProps = React.ComponentProps<"div"> & {
4	contained?: boolean;
5	position?: "top" | "bottom";
6};
7 
8export function FullWidthDivider({
9	className,
10	contained = false,
11	position,
12	...props
13}: FullWidthDividerProps) {
14	return (
15		<div
16			aria-hidden="true"
17			className={cn(
18				"pointer-events-none absolute h-px bg-border",
19				// full-bleed (default)
20				"data-[contained=false]:left-1/2 data-[contained=false]:w-screen data-[contained=false]:-translate-x-1/2",
21				// contained
22				"data-[contained=true]:inset-x-0 data-[contained=true]:w-full",
23				// position
24				position &&
25					"data-[position=top]:-top-px data-[position=bottom]:-bottom-px",
26				className
27			)}
28			data-contained={contained}
29			data-position={position}
30			{...props}
31		/>
32	);
33}