Toolbar

Copyimport { Toolbar } from "@/registry/preskok/ui/preskok-ui/toolbar"
 
export function ToolbarDemo() {
  return (
    <Toolbar aria-label="Toolbars">
      <ToolbarGroup aria-label="Text Formatting Options">
        <ToolbarItem defaultSelected aria-label="Bold" size="sq-sm">
          {({ isSelected }) => (
            <>{isSelected ? <BoltSolid /> : <BoltOutline />}</>
          )}
        </ToolbarItem>
        <ToolbarItem aria-label="Italic" size="sq-sm">
          {({ isSelected }) => (
            <>{isSelected ? <PencilSolid /> : <PencilOutline />}</>
          )}
        </ToolbarItem>
        <ToolbarItem aria-label="Underline" size="sq-sm">
          {({ isSelected }) => (
            <>
              {isSelected ? (
                <CursorArrowRaysSolid />
              ) : (
                <CursorArrowRaysOutline />
              )}
            </>
          )}
        </ToolbarItem>
        <ToolbarItem aria-label="Strikethrough" size="sq-sm">
          {({ isSelected }) => (
            <>{isSelected ? <NoSymbolSolid /> : <NoSymbolOutline />}</>
          )}
        </ToolbarItem>
      </ToolbarGroup>
      <ToolbarSeparator />
      <ToolbarGroup aria-label="Alignment">
        <ToolbarItem aria-label="Align Left" size="sq-sm">
          {({ isSelected }) => (
            <>
              {isSelected ? <Bars3BottomLeftSolid /> : <Bars3BottomLeftIcon />}
            </>
          )}
        </ToolbarItem>
        <ToolbarItem size="sq-sm" aria-label="Align Center">
          {({ isSelected }) => (
            <>
              {isSelected ? (
                <AdjustmentsHorizontalSolid />
              ) : (
                <AdjustmentsHorizontalOutline />
              )}
            </>
          )}
        </ToolbarItem>
        <ToolbarItem size="sq-sm" aria-label="Align Right">
          {({ isSelected }) => (
            <>
              {isSelected ? (
                <Bars3BottomRightSolid />
              ) : (
                <Bars3BottomRightIcon />
              )}
            </>
          )}
        </ToolbarItem>
        <ToolbarItem size="sq-sm" aria-label="Align Justify">
          {({ isSelected }) => (
            <>{isSelected ? <Bars3Solid /> : <Bars3Icon />}</>
          )}
        </ToolbarItem>
      </ToolbarGroup>
      <ToolbarSeparator />
      <Checkbox>Spell Check</Checkbox>
      <ToolbarGroup className="ml-auto">
        <Menu>
          <Button aria-label="Other options" size="sm" intent="outline">
            Options...
            <ChevronDownIcon />
          </Button>
          <MenuContent placement="bottom right">
            <MenuItem>
              <ArrowUturnLeftIcon />
              Undo
            </MenuItem>
            <MenuItem>
              <ArrowUturnRightIcon />
              Redo
            </MenuItem>
            <MenuItem>
              <LinkIcon />
              Insert Link
            </MenuItem>
            <MenuItem>
              <PhotoIcon />
              Insert Image
            </MenuItem>
            <MenuItem>
              <Squares2X2Icon />
              Insert Grid
            </MenuItem>
          </MenuContent>
        </Menu>
      </ToolbarGroup>
    </Toolbar>
  )
}