Separator

import { Separator } from '@acronis-platform/shadcn-uikit/react';

export function SeparatorHorizontal() {
  return (
    <div className="space-y-4">
      <div>
        <h4 className="text-sm font-medium">Section 1</h4>
        <p className="text-sm text-muted-foreground">
          This is the first section of content.
        </p>
      </div>
      <Separator />
      <div>
        <h4 className="text-sm font-medium">Section 2</h4>
        <p className="text-sm text-muted-foreground">
          This is the second section of content.
        </p>
      </div>
    </div>
  );
}

import { Separator } from '@acronis-platform/shadcn-uikit/react';

export function SeparatorVertical() {
  return (
    <div className="flex h-20 items-center space-x-4">
      <div className="text-sm">Item 1</div>
      <Separator orientation="vertical" />
      <div className="text-sm">Item 2</div>
      <Separator orientation="vertical" />
      <div className="text-sm">Item 3</div>
    </div>
  );
}

import { Separator } from '@acronis-platform/shadcn-uikit/react';

export function SeparatorWithText() {
  return (
    <div className="space-y-4">
      <p className="text-sm">Content above separator</p>
      <div className="flex items-center">
        <Separator className="flex-1" />
        <span className="px-4 text-sm text-muted-foreground">OR</span>
        <Separator className="flex-1" />
      </div>
      <p className="text-sm">Content below separator</p>
    </div>
  );
}

import { Separator } from '@acronis-platform/shadcn-uikit/react';

export function SeparatorInNavigation() {
  return (
    <div className="flex items-center space-x-4 text-sm">
      <a href="#" className="hover:underline">
        Home
      </a>
      <Separator orientation="vertical" className="h-4" />
      <a href="#" className="hover:underline">
        About
      </a>
      <Separator orientation="vertical" className="h-4" />
      <a href="#" className="hover:underline">
        Services
      </a>
      <Separator orientation="vertical" className="h-4" />
      <a href="#" className="hover:underline">
        Contact
      </a>
    </div>
  );
}

import { Separator } from '@acronis-platform/shadcn-uikit/react';

export function SeparatorInLists() {
  return (
    <div className="space-y-1">
      <div className="p-2">
        <h4 className="text-sm font-medium">List Item 1</h4>
        <p className="text-sm text-muted-foreground">Description for item 1</p>
      </div>
      <Separator />
      <div className="p-2">
        <h4 className="text-sm font-medium">List Item 2</h4>
        <p className="text-sm text-muted-foreground">Description for item 2</p>
      </div>
      <Separator />
      <div className="p-2">
        <h4 className="text-sm font-medium">List Item 3</h4>
        <p className="text-sm text-muted-foreground">Description for item 3</p>
      </div>
    </div>
  );
}

import { Separator } from '@acronis-platform/shadcn-uikit/react';

export function SeparatorInCards() {
  return (
    <div className="max-w-md rounded-lg border p-6">
      <div className="space-y-4">
        <div>
          <h4 className="font-semibold">Card Header</h4>
          <p className="text-sm text-muted-foreground">
            This is the header section
          </p>
        </div>
        <Separator />
        <div>
          <h4 className="font-semibold">Card Content</h4>
          <p className="text-sm text-muted-foreground">
            This is the main content area
          </p>
        </div>
        <Separator />
        <div>
          <h4 className="font-semibold">Card Footer</h4>
          <p className="text-sm text-muted-foreground">
            This is the footer section
          </p>
        </div>
      </div>
    </div>
  );
}

import { Separator } from '@acronis-platform/shadcn-uikit/react';

export function SeparatorInForms() {
  return (
    <div className="max-w-md space-y-6 rounded-lg border p-6">
      <div className="space-y-2">
        <h4 className="font-semibold">Personal Information</h4>
        <p className="text-sm text-muted-foreground">
          Enter your personal details
        </p>
      </div>
      <Separator />
      <div className="space-y-2">
        <h4 className="font-semibold">Contact Information</h4>
        <p className="text-sm text-muted-foreground">How can we reach you?</p>
      </div>
      <Separator />
      <div className="space-y-2">
        <h4 className="font-semibold">Preferences</h4>
        <p className="text-sm text-muted-foreground">
          Customize your experience
        </p>
      </div>
    </div>
  );
}

import { Separator } from '@acronis-platform/shadcn-uikit/react';

export function SeparatorInToolbar() {
  return (
    <div className="flex items-center space-x-2 rounded-lg border p-2">
      <button className="rounded p-2 hover:bg-accent">Bold</button>
      <button className="rounded p-2 hover:bg-accent">Italic</button>
      <button className="rounded p-2 hover:bg-accent">Underline</button>
      <Separator orientation="vertical" className="h-6" />
      <button className="rounded p-2 hover:bg-accent">Left</button>
      <button className="rounded p-2 hover:bg-accent">Center</button>
      <button className="rounded p-2 hover:bg-accent">Right</button>
      <Separator orientation="vertical" className="h-6" />
      <button className="rounded p-2 hover:bg-accent">Link</button>
      <button className="rounded p-2 hover:bg-accent">Image</button>
    </div>
  );
}