buttons, icons, input

2025-10-07 17:05:09 +05:00
parent 9e4bc7b0f8
commit 77fa8ca184
76 changed files with 1314 additions and 6 deletions
@@ -0,0 +1,47 @@
+import clsx from "clsx";
+
+interface ControlButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  size: "small" | "large";
+  icon: React.ReactNode;
+  enabled: boolean;
+}
+
+function ControlButton({
+  size,
+  enabled,
+  icon,
+  className,
+  onClick,
+  ...props
+}: ControlButtonProps) {
+  return (
+    <button
+      onClick={onClick}
+      {...props}
+      className={clsx(
+        "backdrop-blur-[10px] rounded-full transition-all cursor-pointer disabled:!cursor-default outline-none",
+        size === "large" ? "2xl:p-[0.833vw] p-3" : "2xl:p-[0.417vw] p-[6px]",
+        !enabled
+          ? "bg-[#FF4517] hover:bg-[#FF4517]/85"
+          : size === "large"
+          ? "bg-[#FFFFFF]/15 hover:bg-[#FFFFFF]/25"
+          : "bg-[#141414]/15 hover:bg-[#141414]/25",
+        className
+      )}
+    >
+      <div
+        className={clsx(
+          "text-white",
+          size === "large"
+            ? "2xl:size-[1.111vw] size-4"
+            : "2xl:size-[0.833vw] size-3"
+        )}
+      >
+        {icon}
+      </div>
+    </button>
+  );
+}
+
+export default ControlButton;