Init

2026-04-09 10:01:23 +08:00
commit efe801b8bf
707 changed files with 110595 additions and 0 deletions
@@ -0,0 +1,63 @@
+"use client"
+
+import type { LucideIcon } from "lucide-react"
+
+import { Separator } from "@/components/ui/separator"
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/components/ui/toggle-group"
+
+type EditorToolbarButtonAction = {
+  key: string
+  label: string
+  icon: LucideIcon
+  onClick: () => void
+  disabled?: boolean
+  pressed?: boolean
+}
+
+type EditorToolbarSeparatorAction = {
+  key: string
+  type: "separator"
+}
+
+export type EditorToolbarAction = EditorToolbarButtonAction | EditorToolbarSeparatorAction
+
+type EditorToolbarProps = {
+  actions: ReadonlyArray<EditorToolbarAction>
+}
+
+function isSeparatorAction(
+  action: EditorToolbarAction
+): action is EditorToolbarSeparatorAction {
+  return "type" in action && action.type === "separator"
+}
+
+export function EditorToolbar({ actions }: EditorToolbarProps) {
+  return (
+    <div className="flex items-center gap-1 border-b p-2">
+      <ToggleGroup className="flex-wrap gap-1">
+        {actions.map((action) => {
+          if (isSeparatorAction(action)) {
+            return <Separator key={action.key} orientation="vertical" className="mx-1 h-6" />
+          }
+          const Icon = action.icon
+          return (
+            <ToggleGroupItem
+              key={action.key}
+              value={action.key}
+              aria-label={action.label}
+              disabled={action.disabled}
+              pressed={action.pressed}
+              onClick={action.onClick}
+            >
+              <Icon className="size-4" />
+            </ToggleGroupItem>
+          )
+        })}
+      </ToggleGroup>
+    </div>
+  )
+}
+