"use client";

import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover/base";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select/base";
import { Toggle } from "@/components/ui/toggle/base";
import {
  ToggleGroup,
  ToggleGroupItem,
} from "@/components/ui/toggle-group/base";
import {
  Toolbar,
  ToolbarButton,
  ToolbarSeparator,
} from "@/components/ui/toolbar/base";
import {
  AlignCenter,
  AlignLeft,
  AlignRight,
  Bold,
  Download,
  Italic,
  Redo,
  Settings,
  Share,
  Underline,
  Undo,
} from "lucide-react";

const fontSizes = [
  { label: "Small", value: "12px" },
  { label: "Medium", value: "14px" },
  { label: "Large", value: "16px" },
  { label: "Extra Large", value: "18px" },
];

export default function ToolbarDemo() {
  return (
    <div className="w-full max-w-4xl mx-auto p-6 space-y-6">
      {/* Main Toolbar */}
      <Toolbar>
        {/* Text Formatting */}
        <ToggleGroup multiple={true}>
          <ToolbarButton
            size="icon"
            render={
              <ToggleGroupItem value="bold" aria-label="Bold">
                <Bold className="h-4 w-4" />
              </ToggleGroupItem>
            }
          />
          <ToolbarButton
            size="icon"
            render={
              <ToggleGroupItem value="italic" aria-label="Italic">
                <Italic className="h-4 w-4" />
              </ToggleGroupItem>
            }
          />
          <ToolbarButton
            size="icon"
            render={
              <ToggleGroupItem value="underline" aria-label="Underline">
                <Underline className="h-4 w-4" />
              </ToggleGroupItem>
            }
          />
        </ToggleGroup>

        <ToolbarSeparator />

        {/* Text Alignment */}
        <ToggleGroup multiple={false}>
          <ToolbarButton
            size="icon"
            render={
              <ToggleGroupItem value="left" aria-label="Align left">
                <AlignLeft className="h-4 w-4" />
              </ToggleGroupItem>
            }
          />
          <ToolbarButton
            size="icon"
            render={
              <ToggleGroupItem value="center" aria-label="Align center">
                <AlignCenter className="h-4 w-4" />
              </ToggleGroupItem>
            }
          />
          <ToolbarButton
            size="icon"
            render={
              <ToggleGroupItem value="right" aria-label="Align right">
                <AlignRight className="h-4 w-4" />
              </ToggleGroupItem>
            }
          />
        </ToggleGroup>

        <ToolbarSeparator />

        {/* Font Size */}
        <Select>
          <SelectTrigger className="w-24">
            <SelectValue placeholder="Size" />
          </SelectTrigger>
          <SelectContent>
            {fontSizes.map((size) => (
              <SelectItem key={size.value} value={size.value}>
                {size.label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>

        <ToolbarSeparator />

        {/* Undo/Redo */}
        <ToolbarButton size="icon" aria-label="Undo">
          <Undo className="h-4 w-4" />
        </ToolbarButton>
        <ToolbarButton size="icon" aria-label="Redo">
          <Redo className="h-4 w-4" />
        </ToolbarButton>

        <ToolbarSeparator />

        {/* Actions */}
        <ToolbarButton size="icon" variant="outline" aria-label="Download">
          <Download className="h-4 w-4" />
        </ToolbarButton>
        <ToolbarButton size="icon" variant="outline" aria-label="Share">
          <Share className="h-4 w-4" />
        </ToolbarButton>

        {/* Settings */}
        <Popover>
          <ToolbarButton
            size="icon"
            variant="outline"
            render={<PopoverTrigger />}
            aria-label="Settings"
          >
            <Settings className="h-4 w-4" />
          </ToolbarButton>
          <PopoverContent className="w-64">
            <h3>Editor Settings</h3>
            <div className="space-y-3 mt-3">
              <div className="flex items-center justify-between">
                <label className="text-sm font-medium">Auto-save</label>
                <Toggle aria-label="Toggle auto-save" />
              </div>
              <div className="flex items-center justify-between">
                <label className="text-sm font-medium">Spell check</label>
                <Toggle aria-label="Toggle spell check" />
              </div>
              <div className="flex items-center justify-between">
                <label className="text-sm font-medium">Dark mode</label>
                <Toggle aria-label="Toggle dark mode" />
              </div>
            </div>
          </PopoverContent>
        </Popover>
      </Toolbar>
    </div>
  );
}
Toolbar

Installation

API Reference

We use cookies
