Separator

---
type Props = {
  label?: string;
  class?: string;
};

const { label, class: className } = Astro.props;
---

{
  label ? (
    <div role="separator" class:list={["flex items-center gap-2", className]}>
      <span class="font-mono text-[11px] leading-none tracking-wide uppercase">{label}</span>
      <span class="h-px flex-1 bg-foreground" />
    </div>
  ) : (
    <div role="separator" class:list={["h-px w-full bg-border", className]} />
  )
}

import { cn } from "./cn";

type SeparatorProps = {
  label?: string;
  className?: string;
};

export function Separator({ label, className }: SeparatorProps) {
  return label ? (
    <div role="separator" className={cn("flex items-center gap-2", className)}>
      <span className="font-mono text-[11px] leading-none tracking-wide uppercase">{label}</span>
      <span className="h-px flex-1 bg-foreground" />
    </div>
  ) : (
    <div role="separator" className={cn("h-px w-full bg-border", className)} />
  );
}

export const cn = (...parts: (string | false | null | undefined)[]) => parts.filter(Boolean).join(" ");