From fc017782ddcc9b0f48e86af3289e8b8e40626324 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Mon, 27 Oct 2025 07:28:02 -0500
Subject: [PATCH] add blurred icon button component

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

diff --git a/web/src/components/button/BlurredIconButton.tsx b/web/src/components/button/BlurredIconButton.tsx
new file mode 100644
index 000000000..8fe17f869
--- /dev/null
+++ b/web/src/components/button/BlurredIconButton.tsx
@@ -0,0 +1,28 @@
+import React, { forwardRef } from "react";
+import { cn } from "@/lib/utils";
+
+type BlurredIconButtonProps = React.HTMLAttributes<HTMLDivElement>;
+
+const BlurredIconButton = forwardRef<HTMLDivElement, BlurredIconButtonProps>(
+  ({ className = "", children, ...rest }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "group relative inline-flex items-center justify-center",
+          className,
+        )}
+        {...rest}
+      >
+        <div className="pointer-events-none absolute inset-0 m-auto size-5 scale-95 rounded-full bg-black opacity-0 blur-sm transition-all duration-200 group-hover:scale-100 group-hover:opacity-100 group-hover:blur-xl" />
+        <div className="relative z-10 cursor-pointer text-white/85 hover:text-white">
+          {children}
+        </div>
+      </div>
+    );
+  },
+);
+
+BlurredIconButton.displayName = "BlurredIconButton";
+
+export default BlurredIconButton;