Separator

"use client"

import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
import { cn } from "cn"

function Separator({
  className,
  orientation = "horizontal",
  ...props
}: SeparatorPrimitive.Props) {
  return (
    <SeparatorPrimitive
      data-slot="separator"
      orientation={orientation}
      className={cn(
        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
        className
      )}
      {...props}
    />
  )
}

export { Separator }

import { Fragment } from "react"

import { Separator } from "@/components/ui/separator"

// The copy: change text here, not in the markup.
const COPY = {
  name: "Orbcore Studio",
  tagline: "Components, issued like art.",
} as const

const WORDS = ["Blocks", "Scenes", "Orbs"] as const

/** Separator, horizontal between two blocks of text and vertical between three words. */
export default function SeparatorDemo() {
  return (
    <div className="w-full max-w-sm">
      <p className="text-sm/6 font-medium text-foreground">{COPY.name}</p>
      <p className="text-sm/6 text-muted-foreground">{COPY.tagline}</p>
      <Separator className="my-4" />
      <div className="flex items-center gap-4 text-sm/6 text-muted-foreground">
        {WORDS.map((word, index) => (
          <Fragment key={word}>
            {index > 0 && <Separator orientation="vertical" className="h-4" />}
            <span>{word}</span>
          </Fragment>
        ))}
      </div>
    </div>
  )
}