first commit

src/components/Switch/Switch.tsx

@@ -0,0 +1,98 @@
+import React from "react";
+import clsx from "clsx";
+import { bgPrimaryColor, textColor } from "../../data/getColorBasedOnMode";
+import { inputWidths } from "../../data/getItemsWidth";
+
+export type SwitchSize = "small" | "medium" | "large";
+
+interface SwitchProps {
+  checked: boolean;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  disabled?: boolean;
+  isError?: boolean;
+  size?: SwitchSize;
+  label?: string;
+  name?: string;
+  className?: string;
+}
+
+const sizeMap: Record<
+  SwitchSize,
+  { track: string; thumb: string; thumbTranslate: string }
+> = {
+  small: {
+    track: "w-9 h-5",
+    thumb: "w-4 h-4",
+    thumbTranslate: "translate-x-4",
+  },
+  medium: {
+    track: "w-11 h-6",
+    thumb: "w-5 h-5",
+    thumbTranslate: "translate-x-5",
+  },
+  large: {
+    track: "w-14 h-8",
+    thumb: "w-6 h-6",
+    thumbTranslate: "translate-x-6",
+  },
+};
+
+export const Switch: React.FC<SwitchProps> = ({
+  checked,
+  onChange,
+  disabled = false,
+  isError = false,
+  size = "medium",
+  label,
+  name,
+  className,
+}) => {
+  const sizeStyles = sizeMap[size];
+
+  return (
+    <label
+      className={clsx(
+        "inline-flex items-center gap-2 cursor-pointer",
+        disabled && "opacity-60 cursor-not-allowed",
+        inputWidths,
+        className
+      )}
+    >
+      <div className="relative">
+        <input
+          type="checkbox"
+          role="switch"
+          name={name}
+          checked={checked}
+          onChange={onChange}
+          disabled={disabled}
+          className="sr-only"
+        />
+        <div
+          className={clsx(
+            "rounded-full transition-colors duration-300",
+            sizeStyles.track,
+            isError
+              ? checked
+                ? "bg-prima-500"
+                : "bg-red-300"
+              : checked
+              ? bgPrimaryColor
+              : "bg-dark-300"
+          )}
+        >
+          <div
+            className={clsx(
+              "absolute top-0.5 left-0.5 rounded-full bg-white shadow transform transition-transform duration-300",
+              sizeStyles.thumb,
+              checked && sizeStyles.thumbTranslate
+            )}
+          />
+        </div>
+      </div>
+      {label && (
+        <span className={`text-sm select-none ${textColor}`}>{label}</span>
+      )}
+    </label>
+  );
+};