Toolbar with Select

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
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.ComboboxProvider
        selectedValue={value}
        setSelectedValue={setValue}
      >
        <Ariakit.ComboboxSelect
          aria-label="Text alignment"
          className="button secondary"
          render={<Ariakit.ToolbarItem />}
        >
          {selectedIcon} {value} <Ariakit.ComboboxSelectArrow />
        </Ariakit.ComboboxSelect>
        <Ariakit.ComboboxPopover gutter={4} className="popover">
          {options.map((option) => (
            <Ariakit.ComboboxItem
              key={option.value}
              value={option.value}
              className="select-item"
            >
              {option.icon} {option.value}
            </Ariakit.ComboboxItem>
          ))}
        </Ariakit.ComboboxPopover>
      </Ariakit.ComboboxProvider>
    </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.ComboboxProvider
        selectedValue={value}
        setSelectedValue={setValue}
      >
        <Ariakit.ComboboxSelect
          aria-label="Text alignment"
          className="button secondary"
          render={<Ariakit.ToolbarItem />}
        >
          {selectedIcon} {value} <Ariakit.ComboboxSelectArrow />
        </Ariakit.ComboboxSelect>
        <Ariakit.ComboboxPopover gutter={4} className="popover">
          {options.map((option) => (
            <Ariakit.ComboboxItem
              key={option.value}
              value={option.value}
              className="select-item"
            >
              {option.icon} {option.value}
            </Ariakit.ComboboxItem>
          ))}
        </Ariakit.ComboboxPopover>
      </Ariakit.ComboboxProvider>
    </Ariakit.Toolbar>
  );
}