design with image

src/index.css

@@ -102,3 +102,36 @@ tbody tr:nth-child(odd) {
 
   backdrop-filter: blur(44px);
 }
+
+.design-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: black;
+  cursor: pointer;
+  margin-top: -5px;
+}
+
+.design-slider::-moz-range-thumb {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: black;
+  border: none;
+  cursor: pointer;
+}
+
+.design-slider::-webkit-slider-runnable-track {
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+  height: 1px;
+}
+
+.design-slider::-moz-range-track {
+  background: transparent;
+  height: 1px;
+  border: none;
+}

src/pages/settings/components/DesignSettings.tsx

@@ -1,15 +1,27 @@
 import ColorPicker from "@/components/ColorPicker";
 import Radio from "@/components/Radio";
 import { clx } from "@/helpers/utils";
+import DesignSlider from "@/pages/settings/components/DesignSlider";
 import { PATTERN_BACKGROUND_OPACITY, usePatterns } from "@/pages/settings/hooks/usePatterns";
-import { useEffect, useState, type FC } from "react";
+import { DocumentUpload, Gallery, Trash } from "iconsax-react";
+import { useCallback, useEffect, useState, type FC } from "react";
+import { useDropzone } from "react-dropzone";
 
 const COLOR_APPLY_DELAY_MS = 500;
+type BackgroundType = "pattern" | "custom";
+
+const UPLOAD_BOX_CLASS = "w-[200px] h-[362px] rounded-2xl border border-dashed border-description";
 
 const DesignSettings: FC = () => {
   const [menuColor, setMenuColor] = useState("#000000");
   const [appliedColor, setAppliedColor] = useState("#000000");
   const [selectedPatternId, setSelectedPatternId] = useState(1);
+  const [backgroundType, setBackgroundType] = useState<BackgroundType>("pattern");
+  const [customImage, setCustomImage] = useState<File | null>(null);
+  const [customImagePreview, setCustomImagePreview] = useState<string | null>(null);
+  const [imageOpacity, setImageOpacity] = useState(100);
+  const [imageBlur, setImageBlur] = useState(0);
+  const [overlayDarkness, setOverlayDarkness] = useState(0);
   const patterns = usePatterns(appliedColor);
 
   useEffect(() => {
@@ -17,6 +29,37 @@ const DesignSettings: FC = () => {
     return () => clearTimeout(timer);
   }, [menuColor]);
 
+  useEffect(() => {
+    if (!customImage) {
+      setCustomImagePreview(null);
+      return;
+    }
+
+    const previewUrl = URL.createObjectURL(customImage);
+    setCustomImagePreview(previewUrl);
+
+    return () => URL.revokeObjectURL(previewUrl);
+  }, [customImage]);
+
+  const onDrop = useCallback((acceptedFiles: File[]) => {
+    if (acceptedFiles[0]) {
+      setCustomImage(acceptedFiles[0]);
+    }
+  }, []);
+
+  const { getRootProps, getInputProps } = useDropzone({
+    onDrop,
+    accept: { "image/*": [] },
+    multiple: false,
+  });
+
+  const handleRemoveImage = () => {
+    setCustomImage(null);
+    setImageOpacity(100);
+    setImageBlur(0);
+    setOverlayDarkness(0);
+  };
+
   return (
     <div className="bg-white rounded-4xl p-8">
       <div className="text-lg font-light">تنظیمات طراحی</div>
@@ -27,23 +70,104 @@ const DesignSettings: FC = () => {
 
           <div className="mt-7">
             <div className="flex gap-2 items-center">
-              <Radio isActive={true} value="light" onChange={() => {}} />
+              <Radio
+                isActive={backgroundType === "pattern"}
+                value="pattern"
+                onChange={(value) => setBackgroundType(value as BackgroundType)}
+              />
               <div className="text-sm">انتخاب پس زمینه</div>
             </div>
 
-            <div className="mt-2 flex gap-3 flex-wrap">
+            {backgroundType === "pattern" && (
-              {patterns.map((pattern) => (
+              <div className="mt-2 flex gap-3 flex-wrap">
-                <button
+                {patterns.map((pattern) => (
-                  key={pattern.id}
+                  <button
-                  type="button"
+                    key={pattern.id}
-                  onClick={() => setSelectedPatternId(pattern.id)}
+                    type="button"
-                  className={clx("relative w-16 h-[139px] rounded-lg bg-white border overflow-hidden", selectedPatternId === pattern.id ? "border-black" : "border-border")}
+                    onClick={() => setSelectedPatternId(pattern.id)}
-                >
+                    className={clx(
-                  <div className="absolute inset-0" style={{ backgroundColor: appliedColor, opacity: PATTERN_BACKGROUND_OPACITY }} />
+                      "relative w-16 h-[139px] rounded-lg bg-white border overflow-hidden",
-                  <img src={pattern.image} alt={pattern.name} className="relative scale-200 w-full h-full object-cover" />
+                      selectedPatternId === pattern.id ? "border-black" : "border-border",
-                </button>
+                    )}
-              ))}
+                  >
+                    <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 className="mt-7">
+            <div className="flex gap-2 items-center">
+              <Radio
+                isActive={backgroundType === "custom"}
+                value="custom"
+                onChange={(value) => setBackgroundType(value as BackgroundType)}
+              />
+              <div className="text-sm">تصویر پس زمینه دلخواه</div>
             </div>
+
+            {backgroundType === "custom" && (
+              <div className="mt-2">
+                {!customImagePreview ? (
+                  <div
+                    {...getRootProps()}
+                    className={clx(
+                      UPLOAD_BOX_CLASS,
+                      "flex flex-col items-center justify-center gap-3 cursor-pointer bg-white",
+                    )}
+                  >
+                    <input {...getInputProps()} />
+                    <Gallery className="size-8" color="#8C90A3" />
+                    <div className="text-description text-xs text-center leading-5 px-4">
+                      تصویر مورد نظر را آپلود کنید
+                    </div>
+                    <div className="flex items-center gap-1">
+                      <DocumentUpload className="size-4" color="black" />
+                      <div className="text-xs">آپلود</div>
+                    </div>
+                  </div>
+                ) : (
+                  <div className="flex gap-8 items-start">
+                    <div className={clx(UPLOAD_BOX_CLASS, "relative shrink-0 overflow-hidden")}>
+                      <img
+                        src={customImagePreview}
+                        alt="پس‌زمینه دلخواه"
+                        className="w-full h-full object-cover"
+                        style={{
+                          opacity: imageOpacity / 100,
+                          filter: `blur(${imageBlur * 0.2}px)`,
+                        }}
+                      />
+                      {overlayDarkness > 0 && (
+                        <div
+                          className="absolute inset-0 bg-black pointer-events-none"
+                          style={{ opacity: overlayDarkness / 100 }}
+                        />
+                      )}
+                      <button
+                        type="button"
+                        onClick={handleRemoveImage}
+                        className="absolute top-1.5 right-1.5 size-5 rounded-full bg-white shadow-sm flex items-center justify-center cursor-pointer z-10"
+                      >
+                        <Trash size={12} color="#EF4444" variant="Bold" />
+                      </button>
+                    </div>
+
+                    <div className="flex-1 min-w-0">
+                      <div className="text-sm font-normal mb-4">تنظیمات</div>
+                      <DesignSlider label="شفافیت تصویر" value={imageOpacity} onChange={setImageOpacity} />
+                      <DesignSlider label="محوشدگی تصویر" value={imageBlur} onChange={setImageBlur} />
+                      <DesignSlider label="تیرگی روکش پس زمینه" value={overlayDarkness} onChange={setOverlayDarkness} />
+                    </div>
+                  </div>
+                )}
+              </div>
+            )}
           </div>
         </div>
       </div>

src/pages/settings/components/DesignSlider.tsx

@@ -0,0 +1,41 @@
+import { type FC } from "react";
+
+type Props = {
+  label: string;
+  value: number;
+  onChange: (value: number) => void;
+};
+
+const DesignSlider: FC<Props> = ({ label, value, onChange }) => {
+  return (
+    <div className="mb-5 last:mb-0">
+      <div className="text-sm mb-3">{label}</div>
+      <div className="relative pt-1 pb-5">
+        <div className="relative h-1">
+          <div className="absolute inset-0 top-1/2 -translate-y-1/2 h-px bg-border" />
+          <div
+            className="absolute top-1/2 -translate-y-1/2 right-0 bg-black"
+            style={{
+              width: `${value}%`,
+              height: value > 0 ? 2 : 1,
+            }}
+          />
+          <input
+            type="range"
+            min={0}
+            max={100}
+            value={value}
+            onChange={(e) => onChange(Number(e.target.value))}
+            dir="rtl"
+            className="design-slider absolute inset-0 w-full h-full appearance-none bg-transparent cursor-pointer"
+          />
+        </div>
+        <span className="absolute text-xs -bottom-2 -translate-x-1/2" style={{ right: `calc(${value}% - 10px)` }}>
+          {value.toLocaleString("fa-IR")}%
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default DesignSlider;