import { FileTextIcon, UsersThreeIcon, CheckSquareIcon } from "@phosphor-icons/react/dist/ssr";
import { Separator } from "@/components/ui/separator";

export default function SeparatorDemo() {
  return (
    <div className="w-full max-w-sm rounded-xl bg-surface p-6 shadow-clay">
      <h4 className="font-extrabold tracking-tight">Parlemen UI</h4>
      <p className="text-sm font-medium text-on-surface-muted">Soft clay components for civic apps.</p>
      <Separator className="my-4" />
      <div className="flex h-5 items-center gap-4 text-sm font-bold">
        <span className="flex items-center gap-1.5"><FileTextIcon weight="bold" className="size-4" /> Bills</span>
        <Separator orientation="vertical" />
        <span className="flex items-center gap-1.5"><CheckSquareIcon weight="bold" className="size-4" /> Votes</span>
        <Separator orientation="vertical" />
        <span className="flex items-center gap-1.5"><UsersThreeIcon weight="bold" className="size-4" /> Members</span>
      </div>
    </div>
  );
}
Parlemen UI

Installation

Parlemen UI
