Move to TanStack Start from Next.js (#184)

web/shared/minimal-tiptap/components/toolbar-button.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+import type { TooltipContentProps } from "@radix-ui/react-tooltip"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { Toggle } from "@/components/ui/toggle"
+import { cn } from "@/lib/utils"
+
+interface ToolbarButtonProps
+  extends React.ComponentPropsWithoutRef<typeof Toggle> {
+  isActive?: boolean
+  tooltip?: string
+  tooltipOptions?: TooltipContentProps
+}
+
+export const ToolbarButton = React.forwardRef<
+  HTMLButtonElement,
+  ToolbarButtonProps
+>(
+  (
+    { isActive, children, tooltip, className, tooltipOptions, ...props },
+    ref,
+  ) => {
+    const toggleButton = (
+      <Toggle
+        size="sm"
+        ref={ref}
+        className={cn("size-8 p-0", { "bg-accent": isActive }, className)}
+        {...props}
+      >
+        {children}
+      </Toggle>
+    )
+
+    if (!tooltip) {
+      return toggleButton
+    }
+
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>{toggleButton}</TooltipTrigger>
+        <TooltipContent {...tooltipOptions}>
+          <div className="flex flex-col items-center text-center">
+            {tooltip}
+          </div>
+        </TooltipContent>
+      </Tooltip>
+    )
+  },
+)
+
+ToolbarButton.displayName = "ToolbarButton"
+
+export default ToolbarButton