Dividers

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

export default function Basic() {
  return (
    <>
      <div className="relative">
        <div
          aria-hidden="true"
          className="absolute inset-0 grid place-items-center"
        >
          <Separator />
        </div>
        <div className="relative flex justify-center">
          <span className="bg-background px-2 text-sm text-muted-foreground">
            Or
          </span>
        </div>
      </div>
      <div className="relative">
        <div
          aria-hidden="true"
          className="absolute inset-0 grid place-items-center"
        >
          <Separator />
        </div>
        <div className="relative flex justify-start">
          <span className="bg-background px-2 text-sm text-muted-foreground">
            Or
          </span>
        </div>
      </div>
      <div className="relative">
        <div
          aria-hidden="true"
          className="absolute inset-0 grid place-items-center"
        >
          <Separator />
        </div>
        <div className="relative flex justify-end">
          <span className="bg-background px-2 text-sm text-muted-foreground">
            Or
          </span>
        </div>
      </div>
    </>
  );
}

import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";

export default function WithButton() {
  return (
    <div className="relative">
      <div
        aria-hidden="true"
        className="absolute inset-0 grid place-items-center"
      >
        <Separator />
      </div>
      <div className="relative flex justify-center">
        <Button variant="outline" size="sm">
          Load More
        </Button>
      </div>
    </div>
  );
}

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

export default function Vertical() {
  return (
    <div className="flex flex-col items-center justify-center gap-2">
      <Separator orientation="vertical" className="h-10" />
      <div className="flex h-full items-center justify-center">
        <span className="px-2 text-sm text-muted-foreground">
          Or
        </span>
      </div>
      <Separator orientation="vertical" className="h-10" />
    </div>
  );
}

import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import {
  TypeBold,
  TypeItalic,
  TypeText,
  TypeUnderline,
} from "@mynaui/icons-react";

export default function MultipleButtons() {
  return (
    <div className="relative">
      <div
        aria-hidden="true"
        className="absolute inset-0 grid place-items-center"
      >
        <Separator />
      </div>
      <div className="relative flex justify-center">
        <span className="isolate inline-flex -space-x-px *:rounded-none">
          <Button
            variant="outline"
            size="icon"
            className="first:rounded-l-md last:rounded-r-md focus:z-10"
          >
            <TypeBold className="size-4" stroke={2} />
          </Button>
          <Button
            variant="outline"
            size="icon"
            className="first:rounded-l-md last:rounded-r-md focus:z-10"
          >
            <TypeItalic className="size-4" stroke={2} />
          </Button>
          <Button
            variant="outline"
            size="icon"
            className="first:rounded-l-md last:rounded-r-md focus:z-10"
          >
            <TypeText className="size-4" stroke={2} />
          </Button>
          <Button
            variant="outline"
            size="icon"
            className="first:rounded-l-md last:rounded-r-md focus:z-10"
          >
            <TypeUnderline className="size-4" stroke={2} />
          </Button>
        </span>
      </div>
    </div>
  );
}

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

export default function Colors() {
  return (
    <>
      <div className="relative">
        <div
          aria-hidden="true"
          className="absolute inset-0 grid place-items-center"
        >
          <Separator className="bg-red-200 dark:bg-red-800" />
        </div>
        <div className="relative flex justify-center">
          <span className="bg-background px-2 text-sm text-red-600">Red</span>
        </div>
      </div>
      <div className="relative">
        <div
          aria-hidden="true"
          className="absolute inset-0 grid place-items-center"
        >
          <Separator className="bg-emerald-200 dark:bg-emerald-800" />
        </div>
        <div className="relative flex justify-center">
          <span className="bg-background px-2 text-sm text-emerald-600">
            Emerald
          </span>
        </div>
      </div>
      <div className="relative">
        <div
          aria-hidden="true"
          className="absolute inset-0 grid place-items-center"
        >
          <Separator className="bg-amber-200 dark:bg-amber-800" />
        </div>
        <div className="relative flex justify-center">
          <span className="bg-background px-2 text-sm text-amber-600">
            Amber
          </span>
        </div>
      </div>
    </>
  );
}