From 6ca7b9885c3a47d4b67e01aa8c8551c5fcaf7d37 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Fri, 18 Oct 2024 10:05:39 -0500
Subject: [PATCH] add ToggleButton component

---
 web/src/components/ui/toggle-button.tsx | 29 +++++++++++++++++++++++++
 1 file changed, 29 insertions(+)
 create mode 100644 web/src/components/ui/toggle-button.tsx

diff --git a/web/src/components/ui/toggle-button.tsx b/web/src/components/ui/toggle-button.tsx
new file mode 100644
index 000000000..bd1f91f26
--- /dev/null
+++ b/web/src/components/ui/toggle-button.tsx
@@ -0,0 +1,29 @@
+import { cn } from "@/lib/utils";
+
+export default function ToggleButton({
+  active,
+  onClick,
+  children,
+  disabled,
+}: {
+  active: boolean;
+  onClick: () => void;
+  children: React.ReactNode;
+  disabled: boolean;
+}) {
+  return (
+    <button
+      className={cn(
+        "rounded-md px-3 py-1 text-sm font-medium transition-colors",
+        active && !disabled
+          ? "bg-selected text-white"
+          : "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        disabled && "cursor-not-allowed opacity-50",
+      )}
+      onClick={onClick}
+      disabled={disabled}
+    >
+      {children}
+    </button>
+  );
+}