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,57 @@
+import clsx from "clsx";
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  children: React.ReactNode;
+  variant?: "critical" | "tertiary" | "secondary" | "primary" | "cta" | "menu";
+  className?: string;
+  size?: "small" | "medium" | "large";
+  ref?: React.RefObject<HTMLButtonElement | null>;
+}
+
+function Button({
+  children,
+  variant = "primary",
+  className,
+  size = "medium",
+  ref,
+  type,
+  onClick,
+  ...props
+}: ButtonProps) {
+  return (
+    <button
+      ref={ref}
+      {...props}
+      onClick={(e) => {
+        if (type !== "submit" && variant !== "menu") e.preventDefault();
+        onClick?.(e);
+      }}
+      className={clsx(
+        "transition-all cursor-pointer disabled:!cursor-default flex outline-none gap-2 items-center justify-center font-medium disabled:bg-[#F6F6F6] disabled:!text-[#D6D6D6]",
+        variant === "menu" &&
+          "text-[#7D7D7D] hover:bg-[#F3F3F3] active:bg-[#F3F1FD] active:text-[#7B60F3]",
+        variant === "cta" &&
+          "bg-[#7B60F3] text-white hover:bg-[#9184F6] active:bg-[#B3AAF9]",
+        variant === "primary" &&
+          "bg-[#F3F1FD] text-[#7B60F3] hover:bg-[#E1DEFC] active:bg-[#F3F1FD]",
+        variant === "secondary" &&
+          "bg-[#FFFFFF] hover:bg-[#F0F0F0] active:text-[#7B60F3] active:bg-[#F3F1FD]",
+        variant === "tertiary" &&
+          "bg-[#FFFFFF] hover:bg-[#F0F0F0] text-[#7D7D7D] active:text-[#141414] active:bg-[#F3F3F3]",
+        variant === "critical" &&
+          "text-[#FF4517] bg-[#FEF3F2] hover:bg-[#FEE4E2]",
+        size === "large" &&
+          "2xl:p-[1.111vw] p-4 button-m 2xl:rounded-[1.111vw] rounded-2xl",
+        size === "medium" &&
+          "2xl:p-[0.833vw] p-3 button-s 2xl:rounded-[0.833vw] rounded-xl",
+        size === "small" &&
+          "2xl:p-[0.556vw] p-2 button-s 2xl:rounded-[0.556vw] rounded-lg",
+        className
+      )}
+    >
+      {children}
+    </button>
+  );
+}
+
+export default Button;
@@ -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;
@@ -0,0 +1,33 @@
+import clsx from "clsx";
+
+interface FloatingActionButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  children: React.ReactNode;
+  variant: "default" | "critical";
+}
+
+function FloatingActionButton({
+  children,
+  variant = "default",
+  className,
+  onClick,
+  ...props
+}: FloatingActionButtonProps) {
+  return (
+    <button
+      onClick={onClick}
+      className={clsx(
+        "2xl:p-[0.833vw] p-3 rounded-full transition-all cursor-pointer disabled:!cursor-default outline-none backdrop-blur-[10px]",
+        variant === "default" &&
+          "2xl:border-[0.069vw] border border-[#FFFFFF]/15 bg-[#000000]/15 hover:bg-[#000000]/25 hover:border-[#FFFFFF]/25 active:bg-[#7B60F3] active:border-[#FFFFFF]/25",
+        variant === "critical" && "bg-[#FF4517] hover:bg-[#FF4517]/85",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}
+
+export default FloatingActionButton;
@@ -0,0 +1,51 @@
+import clsx from "clsx";
+import LoaderIcon from "../icons/LoaderIcon";
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  isLoading?: boolean;
+  errorMessage?: string;
+  isError?: boolean;
+  mask?: string;
+}
+
+function Input({
+  isError,
+  placeholder,
+  errorMessage,
+  isLoading,
+  children,
+  ...props
+}: InputProps) {
+  return (
+    <div className="relative">
+      <input
+        placeholder=""
+        className={clsx(
+          isError
+            ? "hover:ring-[#FF4517] focus:ring-[#FF4517]"
+            : "hover:ring-[#7B60F3] focus:ring-[#7B60F3]",
+          "peer bg-[#F6F6F6] rounded-[0.833vw] px-[1.111vw] pt-[19px] pb-[11px] outline-none ring-1 ring-transparent transition-all inline-block w-full h-[3.889vw] text-m"
+        )}
+        {...props}
+      />
+      {children}
+      {placeholder && (
+        <span className="absolute caption-m font-medium text-[#7D7D7D] left-[1.111vw] top-1/2 -translate-y-1/2 pointer-events-none transition-all duration-300 peer-focus:caption-xs peer-focus:top-[0.556vw] peer-focus:translate-y-0 peer-[:not(:placeholder-shown)]:caption-xs peer-[:not(:placeholder-shown)]:top-[0.556vw] peer-[:not(:placeholder-shown)]:translate-y-0">
+          {placeholder + (props.required ? "*" : "")}
+        </span>
+      )}
+      {isError && (
+        <div className="text-red-500 font-medium caption-s 2xl:mt-[0.556vw] mt-2">
+          {errorMessage}
+        </div>
+      )}
+      {isLoading && (
+        <div className="size-[1.389vw] text-[#7B60F3] animate-spin z-1 absolute right-[1.111vw] top-1/2 -translate-y-1/2">
+          <LoaderIcon />
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default Input;