design setting part pattern

2026-06-08 16:06:32 +03:30
parent c404ac14be
commit ad06b0c8fe
12 changed files with 1369 additions and 52 deletions
@@ -0,0 +1,54 @@
+import ColorPicker from "@/components/ColorPicker";
+import Radio from "@/components/Radio";
+import { clx } from "@/helpers/utils";
+import { PATTERN_BACKGROUND_OPACITY, usePatterns } from "@/pages/settings/hooks/usePatterns";
+import { useEffect, useState, type FC } from "react";
+
+const COLOR_APPLY_DELAY_MS = 500;
+
+const DesignSettings: FC = () => {
+  const [menuColor, setMenuColor] = useState("#000000");
+  const [appliedColor, setAppliedColor] = useState("#000000");
+  const [selectedPatternId, setSelectedPatternId] = useState(1);
+  const patterns = usePatterns(appliedColor);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setAppliedColor(menuColor), COLOR_APPLY_DELAY_MS);
+    return () => clearTimeout(timer);
+  }, [menuColor]);
+
+  return (
+    <div className="bg-white rounded-4xl p-8">
+      <div className="text-lg font-light">تنظیمات طراحی</div>
+
+      <div className="flex mt-5">
+        <div className="max-w-[506px] w-full">
+          <ColorPicker label="رنگ منو" value={menuColor} onChange={setMenuColor} />
+
+          <div className="mt-7">
+            <div className="flex gap-2 items-center">
+              <Radio isActive={true} value="light" onChange={() => {}} />
+              <div className="text-sm">انتخاب پس زمینه</div>
+            </div>
+
+            <div className="mt-2 flex gap-3 flex-wrap">
+              {patterns.map((pattern) => (
+                <button
+                  key={pattern.id}
+                  type="button"
+                  onClick={() => setSelectedPatternId(pattern.id)}
+                  className={clx("relative w-16 h-[139px] rounded-lg bg-white border overflow-hidden", selectedPatternId === pattern.id ? "border-black" : "border-border")}
+                >
+                  <div className="absolute inset-0" style={{ backgroundColor: appliedColor, opacity: PATTERN_BACKGROUND_OPACITY }} />
+                  <img src={pattern.image} alt={pattern.name} className="relative scale-200 w-full h-full object-cover" />
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DesignSettings;