8-bit Separator

1"use client";
2 
3import type * as React from "react";
4 
5import * as SeparatorPrimitive from "@radix-ui/react-separator";
6 
7import { cn } from "@/lib/utils";
8 
9function Separator({
10  className,
11  orientation = "horizontal",
12  decorative = true,
13  ...props
14}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
15  return (
16    <SeparatorPrimitive.Root
17      data-slot="separator-root"
18      decorative={decorative}
19      orientation={orientation}
20      className={cn(
21        "data-[orientation=horizontal]:bg-[length:16px_8px] data-[orientation=horizontal]:bg-[linear-gradient(90deg,var(--foreground)_75%,transparent_75%)] dark:data-[orientation=horizontal]:bg-[linear-gradient(90deg,var(--ring)_75%,transparent_75%)] shrink-0 data-[orientation=horizontal]:h-0.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-0.5 data-[orientation=vertical]:bg-[length:2px_16px] data-[orientation=vertical]:bg-[linear-gradient(0deg,var(--foreground)_75%,transparent_75%)] dark:data-[orientation=vertical]:bg-[linear-gradient(0deg,var(--ring)_75%,transparent_75%)]",
22        className
23      )}
24      {...props}
25    />
26  );
27}
28 
29export { Separator };