Toolbar

import { LinkButton } from '@immit/ui/link-button'
import {
  Toolbar,
  ToolbarButton,
  ToolbarSeparator,
  ToolbarToggleGroup,
  ToolbarToggleItem
} from '@immit/ui/toolbar'
import * as RadixToolbar from '@radix-ui/react-toolbar'
import {
  AlignCenter,
  AlignLeft,
  AlignRight,
  Bold,
  Italic,
  Strikethrough
} from 'lucide-react'
 
export function ToolbarDemo() {
  return (
    <Toolbar
      aria-label="Formatting options"
      className="bg-muted gap-2 rounded-md border p-2"
    >
      <ToolbarToggleGroup
        type="multiple"
        aria-label="Text formatting"
        className="space-x-1"
      >
        <ToolbarToggleItem value="bold" aria-label="Bold">
          <Bold size={16} />
        </ToolbarToggleItem>
        <ToolbarToggleItem value="italic" aria-label="Italic">
          <Italic size={16} />
        </ToolbarToggleItem>
        <ToolbarToggleItem value="strikethrough" aria-label="Strike through">
          <Strikethrough size={16} />
        </ToolbarToggleItem>
      </ToolbarToggleGroup>
      <ToolbarSeparator orientation="vertical" />
      <ToolbarToggleGroup
        type="single"
        defaultValue="center"
        aria-label="Text alignment"
        className="space-x-1"
      >
        <ToolbarToggleItem value="left" aria-label="Left aligned">
          <AlignLeft size={16} />
        </ToolbarToggleItem>
        <ToolbarToggleItem value="center" aria-label="Center aligned">
          <AlignCenter size={16} />
        </ToolbarToggleItem>
        <ToolbarToggleItem value="right" aria-label="Right aligned">
          <AlignRight size={16} />
        </ToolbarToggleItem>
      </ToolbarToggleGroup>
      <ToolbarSeparator orientation="vertical" />
      <RadixToolbar.Link asChild>
        <LinkButton href="#" size="sm" variant="ghost">
          Edited 2 hours ago
        </LinkButton>
      </RadixToolbar.Link>
      <ToolbarButton className="ml-auto" size="sm" variant="ghost">
        Share
      </ToolbarButton>
    </Toolbar>
  )
}