Toolbar with Select

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
import * as Ariakit from "@ariakit/react";
import { useState } from "react";
import * as icons from "./icons.tsx";
import "./style.css";

const options = [
  { value: "Align Left", icon: icons.alignLeft },
  { value: "Align Center", icon: icons.alignCenter },
  { value: "Align Right", icon: icons.alignRight },
];

export default function Example() {
  const [value, setValue] = useState("Align Left");
  const selectedIcon = options.find((option) => option.value === value)?.icon;
  return (
    <Ariakit.Toolbar className="toolbar">
      <Ariakit.ToolbarItem className="button secondary">
        {icons.bold} Bold
      </Ariakit.ToolbarItem>
      <Ariakit.ToolbarItem className="button secondary">
        {icons.italic} Italic
      </Ariakit.ToolbarItem>
      <Ariakit.ToolbarItem className="button secondary">
        {icons.underline} Underline
      </Ariakit.ToolbarItem>
      <Ariakit.ToolbarSeparator className="separator" />
      <Ariakit.SelectProvider value={value} setValue={setValue}>
        <Ariakit.Select
          aria-label="Text alignment"
          className="button secondary"
          render={<Ariakit.ToolbarItem />}
        >
          {selectedIcon} {value} <Ariakit.SelectArrow />
        </Ariakit.Select>
        <Ariakit.SelectPopover gutter={4} className="popover">
          {options.map((option) => (
            <Ariakit.SelectItem
              key={option.value}
              value={option.value}
              className="select-item"
            >
              {option.icon} {option.value}
            </Ariakit.SelectItem>
          ))}
        </Ariakit.SelectPopover>
      </Ariakit.SelectProvider>
    </Ariakit.Toolbar>
  );
}

import * as Ariakit from "@ariakit/react";
import { useState } from "react";
import * as icons from "./icons.tsx";
import "./style.css";

const options = [
  { value: "Align Left", icon: icons.alignLeft },
  { value: "Align Center", icon: icons.alignCenter },
  { value: "Align Right", icon: icons.alignRight },
];

export default function Example() {
  const [value, setValue] = useState("Align Left");
  const selectedIcon = options.find((option) => option.value === value)?.icon;
  return (
    <Ariakit.Toolbar className="toolbar">
      <Ariakit.ToolbarItem className="button secondary">
        {icons.bold} Bold
      </Ariakit.ToolbarItem>
      <Ariakit.ToolbarItem className="button secondary">
        {icons.italic} Italic
      </Ariakit.ToolbarItem>
      <Ariakit.ToolbarItem className="button secondary">
        {icons.underline} Underline
      </Ariakit.ToolbarItem>
      <Ariakit.ToolbarSeparator className="separator" />
      <Ariakit.SelectProvider value={value} setValue={setValue}>
        <Ariakit.Select
          aria-label="Text alignment"
          className="button secondary"
          render={<Ariakit.ToolbarItem />}
        >
          {selectedIcon} {value} <Ariakit.SelectArrow />
        </Ariakit.Select>
        <Ariakit.SelectPopover gutter={4} className="popover">
          {options.map((option) => (
            <Ariakit.SelectItem
              key={option.value}
              value={option.value}
              className="select-item"
            >
              {option.icon} {option.value}
            </Ariakit.SelectItem>
          ))}
        </Ariakit.SelectPopover>
      </Ariakit.SelectProvider>
    </Ariakit.Toolbar>
  );
}