"use client";

import {
  Toggle,
  Toolbar,
  ToolbarButton,
  ToolbarGroup,
  ToolbarLink,
  ToolbarSeparator,
} from "@countryclub/ui-react";
import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react";

export default function ToolbarDemo() {
  return (
    <Toolbar className="w-fit">
      <ToolbarGroup>
        <ToolbarButton render={<Toggle aria-label="Toggle bold" />}>
          <BoldIcon />
        </ToolbarButton>
        <ToolbarButton render={<Toggle aria-label="Toggle italic" />}>
          <ItalicIcon />
        </ToolbarButton>
        <ToolbarButton render={<Toggle aria-label="Toggle underline" />}>
          <UnderlineIcon />
        </ToolbarButton>
      </ToolbarGroup>
      <ToolbarSeparator />
      <ToolbarLink
        className="flex items-center px-2 text-muted-foreground text-sm hover:text-foreground"
        href="#"
      >
        Edited by the pro shop
      </ToolbarLink>
    </Toolbar>
  );
}
Toolbar

Import

Default
