design with image
This commit is contained in:
hamid zarghami
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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">
|
||||
{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>
|
||||
))}
|
||||
{backgroundType === "pattern" && (
|
||||
<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 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>
|
||||
|
||||
@@ -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;
|
||||
Reference in New Issue
Block a user