WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

first commit

Browse Source
This commit is contained in:
Olu Amey
2023-01-16 13:09:45 -05:00
commit a6ebce376c
271 changed files with 39454 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/UploadProduct/DropFileWidget.jsx
+151
View File
@@ -0,0 +1,151 @@
import React, { useEffect, useRef, useState } from "react";
export default function DropFileWidget() {
const fileSelect = useRef(null);
const fileRef = useRef(null);
const [selectedFile, setSelectedFile] = useState("");
const [img, setImg] = useState(null);
const changeFile = (e, file) => {
if (e) {
const imgRead = new FileReader();
imgRead.onload = (event) => {
setImg(event.target.result);
};
// most importend
imgRead.readAsDataURL(e.target.files[0]);
}
if (file) {
if (file[0].name) {
setSelectedFile(file[0].name);
const imgRead = new FileReader();
imgRead.onload = (event) => {
setImg(event.target.result);
};
// most importend
imgRead.readAsDataURL(file[0]);
}
}
};
// drop event
function handleDrop(e) {
const dt = e.dataTransfer;
const { files } = dt;
changeFile(false, files);
}
// for stopPropagation and preventDefault
function preventDefaults(e) {
e.preventDefault();
e.stopPropagation();
}
function highlight() {
fileSelect.current.classList.add("highlight");
}
function unhighlight() {
fileSelect.current.classList.remove("highlight");
}
const browseImg = () => {
fileRef.current.click();
};
useEffect(() => {
// drop event
fileSelect.current.addEventListener("drop", handleDrop, false);
// for stopPropagation and preventDefault
["dragenter", "dragover", "dragleave", "drop"].forEach((eventName) => {
fileSelect.current.addEventListener(eventName, preventDefaults, false);
});
// for highlight
["dragenter", "dragover"].forEach((eventName) => {
fileSelect.current.addEventListener(eventName, highlight, false);
});
["dragleave", "drop"].forEach((eventName) => {
fileSelect.current.addEventListener(eventName, unhighlight, false);
});
});
return (
<>
<div
ref={fileSelect}
className="drop-product-upload w-full rounded-md h-[360px] overflow-hidden relative"
>
{img ? (
<div className="w-full h-full">
<img src={img} alt="" className="w-full h-full object-cover" />
<input
type="file"
id="fileElem"
name="file"
className="hidden"
accept="image/*"
ref={fileRef}
value={selectedFile.name}
onChange={(e) => changeFile(e)}
/>
<button
type="button"
className="absolute w-10 h-10 rounded primary-gradient flex justify-center items-center right-2 top-2 text-white"
onClick={() => browseImg()}
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth="2"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
/>
</svg>
</button>
</div>
) : (
<div
className="w-full h-full flex justify-center items-center"
onClick={() => browseImg()}
>
<form action="#">
<div>
<div className="flex justify-center mb-8">
<svg
width="71"
height="52"
viewBox="0 0 71 52"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M45.9204 11.6862C49.8242 8.24423 55.4809 9.23082 58.1485 11.6525C59.8979 13.2402 61.0985 15.1033 61.4235 17.4743C61.7414 19.7992 61.3241 21.9748 60.0409 23.9684C60.6758 24.1762 61.2708 24.3476 61.8498 24.5643C67.7214 26.7604 71.4049 32.7243 70.9644 38.9662C70.5009 45.5314 65.0866 50.9075 59.3082 51.7706C58.4913 51.8923 57.6601 51.9784 56.836 51.9793C43.3851 51.9917 29.9334 51.9775 16.4825 51.9917C7.58007 52.0033 1.7582 45.1113 0.437713 39.3934C-1.30459 31.8487 2.26349 24.0963 9.19983 20.673C9.50264 20.5238 9.55415 20.3533 9.53283 20.0567C8.76292 9.5363 16.5313 2.47741 23.1089 0.709362C33.1169 -1.98134 42.2849 3.28995 45.7517 11.331C45.8032 11.4491 45.8618 11.5645 45.9204 11.6862ZM28.3971 28.3641C28.3971 28.5853 28.3971 28.7584 28.3971 28.9316C28.3971 32.9863 28.3962 37.041 28.398 41.0957C28.398 42.0885 28.8358 42.521 29.8357 42.521C32.0255 42.5219 34.2154 42.5219 36.4062 42.521C37.4558 42.521 37.8705 42.0992 37.8714 41.0353C37.8714 36.9957 37.8714 32.9561 37.8714 28.9156C37.8714 28.7433 37.8714 28.5719 37.8714 28.3641C38.1041 28.3641 38.279 28.3641 38.453 28.3641C40.9537 28.3641 43.4544 28.3597 45.9551 28.3668C46.5447 28.3686 47.0136 28.1697 47.2347 27.6058C47.4443 27.0703 47.2826 26.6112 46.8706 26.2009C42.6143 21.9606 38.366 17.7132 34.1133 13.4693C33.4775 12.8344 32.7972 12.8291 32.1694 13.4551C27.9273 17.6883 23.6861 21.9233 19.4476 26.1592C18.9494 26.6565 18.8171 27.1733 19.0471 27.6821C19.3064 28.2567 19.8019 28.3686 20.3711 28.3668C22.8567 28.3606 25.3432 28.3641 27.8296 28.3641C28.0019 28.3641 28.1751 28.3641 28.3971 28.3641Z"
fill="#374557"
fillOpacity="0.6"
/>
</svg>
</div>
<p className="text-xl font-bold text-center w-[203px] tracking-wide text-dark-gray dark:text-white ">
Drop files to upload or
<span className="text-purple ml-1">Browse</span>
</p>
<input
type="file"
id="fileElem"
name="file"
className="hidden"
accept="image/*"
ref={fileRef}
value={selectedFile.name}
onChange={(e) => changeFile(e)}
/>
</div>
</form>
</div>
)}
</div>
</>
);
}
src/components/UploadProduct/GradientIcons.jsx
+391
View File
@@ -0,0 +1,391 @@
import React from "react";
export default function GradientIcons({ name }) {
return (
<>
{name === "gradient-doller" ? (
<svg
width="26"
height="38"
viewBox="0 0 26 38"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M22.6099 12.2789C22.6099 12.438 22.6194 12.5947 22.6099 12.7537C22.4817 14.7076 22.8663 16.398 23.975 18.1762C27.3462 23.582 25.8458 30.6949 20.7961 34.6667C15.8484 38.5579 8.61214 38.2208 4.05385 33.8857C-0.646876 29.4176 -1.35673 22.281 2.43471 17.0438C2.95939 16.3197 3.17781 15.6312 3.15407 14.7622C3.10896 13.0244 3.11846 11.2842 3.14457 9.54396C3.23004 4.22358 7.59127 -0.0165701 12.9378 4.86842e-05C18.2012 0.0166674 22.5173 4.27344 22.6075 9.5487C22.6217 10.4604 22.6075 11.3696 22.6099 12.2789ZM11.2688 31.2409C11.2688 31.73 11.2593 32.1597 11.2711 32.5894C11.302 33.7765 11.8172 34.3629 12.8404 34.389C13.9135 34.4175 14.5427 33.7978 14.4857 32.5704C14.4429 31.6303 14.6875 31.1507 15.6419 30.7685C18.251 29.7215 19.8488 27.0435 19.7206 24.2682C19.59 21.424 17.7145 18.9478 15.0104 18.0575C12.3062 17.1672 9.31962 18.0385 7.54142 20.2725C4.4717 24.1281 6.25465 29.7832 11.2688 31.2409ZM20.0197 13.7366C20.0197 12.2362 20.0363 10.9376 20.0173 9.63655C19.9627 6.06826 17.2847 3.05078 13.8304 2.6448C10.1458 2.21034 6.75321 4.40402 5.9935 7.99129C5.61127 9.79324 5.74422 11.7044 5.63264 13.8079C10.5375 10.9471 15.1908 10.9684 20.0197 13.7366Z"
fill="url(#paint0_linear_0_1)"
/>
<path
d="M13.3603 30.334C13.0161 30.334 12.6718 30.334 12.2564 30.334C12.197 29.9518 12.1377 29.5767 12.0759 29.1849C11.3661 28.9808 10.6657 28.779 9.8799 28.5534C10.0152 27.9955 10.1221 27.5539 10.2336 27.0815C11.0029 27.2382 11.689 27.4946 12.368 27.4756C12.838 27.4637 13.301 27.072 13.7663 26.8512C13.4529 26.4595 13.2036 25.9728 12.8072 25.7021C12.2967 25.3531 11.6296 25.2415 11.0978 24.9139C9.50716 23.9334 9.59738 21.9154 11.1975 20.9563C11.7056 20.6524 12.0902 20.1443 12.5318 19.7289C12.4582 19.6197 12.387 19.5081 12.3134 19.3989C12.6837 19.3989 13.0541 19.3989 13.4767 19.3989C13.5313 19.7716 13.5811 20.1111 13.6286 20.4269C14.2696 20.612 14.8631 20.7806 15.5184 20.9705C15.3783 21.4833 15.2667 21.8893 15.148 22.3214C14.3978 22.2288 13.7093 22.0745 13.0208 22.0887C12.7003 22.0958 12.387 22.433 12.0712 22.6205C12.2682 22.922 12.3988 23.3351 12.6766 23.5013C13.2464 23.8432 13.904 24.0307 14.507 24.3228C15.4021 24.7572 15.8983 25.4884 15.884 26.4903C15.8698 27.4851 15.3285 28.1498 14.4975 28.6816C13.999 28.9997 13.6262 29.5149 13.1965 29.9399C13.2511 30.0728 13.3057 30.2034 13.3603 30.334Z"
fill="url(#paint1_linear_0_1)"
/>
<defs>
<linearGradient
id="paint0_linear_0_1"
x1="0"
y1="0"
x2="36.6228"
y2="24.727"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#F539F8" />
<stop offset="0.416763" stopColor="#C342F9" />
<stop offset="1" stopColor="#5356FB" />
</linearGradient>
<linearGradient
id="paint1_linear_0_1"
x1="9.8799"
y1="19.3989"
x2="19.514"
y2="24.5763"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#F539F8" />
<stop offset="0.416763" stopColor="#C342F9" />
<stop offset="1" stopColor="#5356FB" />
</linearGradient>
</defs>
</svg>
) : name === "doller" ? (
<svg
width="26"
height="38"
viewBox="0 0 26 41"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M22.6099 13.5065C22.6099 13.6791 22.6194 13.8492 22.6099 14.0217C22.4817 16.1418 22.8663 17.976 23.975 19.9055C27.3462 25.7712 25.8458 33.489 20.7961 37.7988C15.8484 42.0209 8.61214 41.6551 4.05385 36.9513C-0.646876 32.1031 -1.35673 24.3595 2.43471 18.6767C2.95939 17.891 3.17781 17.1439 3.15407 16.2011C3.10896 14.3154 3.11846 12.4272 3.14457 10.5389C3.23004 4.76597 7.59127 0.165126 12.9378 0.183158C18.2012 0.201191 22.5173 4.82007 22.6075 10.5441C22.6217 11.5333 22.6075 12.5199 22.6099 13.5065ZM11.2688 34.0815C11.2688 34.6122 11.2593 35.0785 11.2711 35.5447C11.302 36.8328 11.8172 37.469 12.8404 37.4974C13.9135 37.5283 14.5427 36.8559 14.4857 35.5241C14.4429 34.504 14.6875 33.9836 15.6419 33.5689C18.251 32.4328 19.8488 29.5271 19.7206 26.5156C19.59 23.4295 17.7145 20.7427 15.0104 19.7767C12.3062 18.8106 9.31962 19.7561 7.54142 22.1801C4.4717 26.3636 6.25465 32.4998 11.2688 34.0815ZM20.0197 15.0882C20.0197 13.4602 20.0363 12.0511 20.0173 10.6394C19.9627 6.76757 17.2847 3.49339 13.8304 3.05289C10.1458 2.58147 6.75321 4.96175 5.9935 8.85417C5.61127 10.8094 5.74422 12.8831 5.63264 15.1655C10.5375 12.0614 15.1908 12.0846 20.0197 15.0882Z"
fill="white"
/>
<path
d="M13.3603 33.0975C13.0161 33.0975 12.6718 33.0975 12.2564 33.0975C12.197 32.6828 12.1377 32.2757 12.0759 31.8507C11.3661 31.6292 10.6657 31.4102 9.87988 31.1655C10.0152 30.5601 10.122 30.0809 10.2336 29.5683C11.0028 29.7383 11.689 30.0165 12.3679 29.9959C12.838 29.9831 13.301 29.558 13.7663 29.3184C13.4529 28.8934 13.2036 28.3653 12.8072 28.0716C12.2967 27.6929 11.6296 27.5719 11.0978 27.2164C9.50715 26.1525 9.59736 23.9628 11.1975 22.9221C11.7056 22.5923 12.0902 22.0411 12.5318 21.5902C12.4582 21.4718 12.3869 21.3507 12.3133 21.2322C12.6837 21.2322 13.0541 21.2322 13.4767 21.2322C13.5313 21.6366 13.5811 22.005 13.6286 22.3476C14.2696 22.5485 14.8631 22.7314 15.5184 22.9375C15.3783 23.494 15.2667 23.9345 15.148 24.4033C14.3978 24.3028 13.7093 24.1354 13.0208 24.1509C12.7003 24.1586 12.3869 24.5244 12.0712 24.7279C12.2682 25.055 12.3988 25.5033 12.6766 25.6836C13.2464 26.0546 13.904 26.2581 14.507 26.5749C15.4021 27.0463 15.8982 27.8398 15.884 28.9269C15.8698 30.0062 15.3285 30.7275 14.4975 31.3046C13.999 31.6498 13.6262 32.2088 13.1965 32.6699C13.2511 32.8141 13.3057 32.9558 13.3603 33.0975Z"
fill="white"
/>
</svg>
) : name === "gradient-hammer" ? (
<svg
width="31"
height="31"
viewBox="0 0 31 31"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M30.4474 27.215C29.9672 28.2468 29.3095 29.0141 28.0359 28.9897C27.3174 28.9758 26.8232 28.6035 26.3535 28.132C22.4666 24.2399 18.5745 20.3512 14.6911 16.4574C14.5032 16.2678 14.3657 16.0294 14.1222 15.7041C13.3166 16.5392 12.6363 17.2456 12.0134 17.8911C9.48889 15.4031 6.96955 12.9185 4.49023 10.4757C7.00087 7.97206 9.50455 5.47534 11.9438 3.04474C14.3971 5.49796 16.8973 7.99816 19.4758 10.5732C18.8146 11.1647 18.096 11.8085 17.3427 12.4835C17.595 12.7619 17.7463 12.9411 17.9116 13.1082C21.628 16.8524 25.3565 20.5861 29.052 24.353C29.6001 24.9115 29.9881 25.63 30.4491 26.2738C30.4474 26.5852 30.4474 26.9001 30.4474 27.215Z"
fill="url(#paint0_linear_0_1)"
/>
<path
d="M0 28.158C0.351454 27.2724 1.00043 26.9018 1.94692 26.987C2.36449 27.0253 2.78728 26.994 3.3336 26.994C3.19615 26.8357 3.15265 26.7643 3.09175 26.7208C2.42538 26.2389 2.234 25.5829 2.4567 24.8244C2.64635 24.1806 3.26922 23.8413 4.19831 23.8379C7.38228 23.8309 10.5662 23.8309 13.7485 23.8361C14.6723 23.8379 15.1578 24.1684 15.4048 24.9131C15.6415 25.6282 15.4187 26.1501 14.6341 26.7173C14.5697 26.7626 14.5123 26.8165 14.4792 27.0079C14.9594 27.0079 15.4396 27.0114 15.9216 27.0079C17.0142 26.9975 17.6197 27.3663 17.7867 28.1527C17.9642 28.9827 17.5692 29.5951 16.5705 30.044C11.4518 30.044 6.3314 30.044 1.21269 30.044C0.809041 29.6403 0.40365 29.2349 0 28.8313C0 28.6068 0 28.3824 0 28.158Z"
fill="url(#paint1_linear_0_1)"
/>
<path
d="M15.6268 -6.10352e-05C16.0183 0.320075 16.4394 0.612374 16.7978 0.967308C18.3932 2.54015 19.9713 4.1304 21.5511 5.71716C22.5741 6.74368 22.5498 7.51097 21.4728 8.50269C21.2449 8.71322 21.0065 8.9133 20.8638 9.03858C18.3028 6.48444 15.7782 3.96337 13.1719 1.364C13.7304 0.93599 14.3411 0.467965 14.9518 -6.10352e-05C15.1779 -6.10352e-05 15.4024 -6.10352e-05 15.6268 -6.10352e-05Z"
fill="url(#paint2_linear_0_1)"
/>
<path
d="M10.6615 19.363C10.3031 19.6988 9.94117 20.0659 9.55144 20.3982C8.96162 20.9028 8.16302 20.9115 7.60104 20.3564C5.70284 18.4826 3.8203 16.5896 1.95167 14.6845C1.43319 14.1573 1.42971 13.3639 1.89948 12.7863C2.23701 12.3704 2.62152 11.9911 2.9434 11.6414C5.50971 14.2095 8.0534 16.7549 10.6615 19.363Z"
fill="url(#paint3_linear_0_1)"
/>
<defs>
<linearGradient
id="paint0_linear_0_1"
x1="4.49023"
y1="3.04474"
x2="31.8937"
y2="29.8789"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#F539F8" />
<stop offset="0.416763" stopColor="#C342F9" />
<stop offset="1" stopColor="#5356FB" />
</linearGradient>
<linearGradient
id="paint1_linear_0_1"
x1="0"
y1="23.8324"
x2="4.14661"
y2="35.4804"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#F539F8" />
<stop offset="0.416763" stopColor="#C342F9" />
<stop offset="1" stopColor="#5356FB" />
</linearGradient>
<linearGradient
id="paint2_linear_0_1"
x1="13.1719"
y1="-6.10352e-05"
x2="22.7199"
y2="9.43722"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#F539F8" />
<stop offset="0.416763" stopColor="#C342F9" />
<stop offset="1" stopColor="#5356FB" />
</linearGradient>
<linearGradient
id="paint3_linear_0_1"
x1="1.55469"
y1="11.6414"
x2="11.2005"
y2="21.0545"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#F539F8" />
<stop offset="0.416763" stopColor="#C342F9" />
<stop offset="1" stopColor="#5356FB" />
</linearGradient>
</defs>
</svg>
) : name === "hammer" ? (
<svg
width="31"
height="31"
viewBox="0 0 31 31"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M30.4474 27.215C29.9672 28.2468 29.3095 29.0141 28.0359 28.9897C27.3174 28.9758 26.8232 28.6035 26.3535 28.132C22.4666 24.2399 18.5745 20.3512 14.6911 16.4574C14.5032 16.2678 14.3657 16.0294 14.1222 15.7041C13.3166 16.5392 12.6363 17.2456 12.0134 17.8911C9.48889 15.4031 6.96955 12.9185 4.49023 10.4757C7.00087 7.97206 9.50455 5.47534 11.9438 3.04474C14.3971 5.49796 16.8973 7.99816 19.4758 10.5732C18.8146 11.1647 18.096 11.8085 17.3427 12.4835C17.595 12.7619 17.7463 12.9411 17.9116 13.1082C21.628 16.8524 25.3565 20.5861 29.052 24.353C29.6001 24.9115 29.9881 25.63 30.4491 26.2738C30.4474 26.5852 30.4474 26.9001 30.4474 27.215Z"
fill="white"
/>
<path
d="M0 28.158C0.351454 27.2724 1.00043 26.9018 1.94692 26.987C2.36449 27.0253 2.78728 26.994 3.3336 26.994C3.19615 26.8357 3.15265 26.7643 3.09175 26.7208C2.42538 26.2389 2.234 25.5829 2.4567 24.8244C2.64635 24.1806 3.26922 23.8413 4.19831 23.8379C7.38228 23.8309 10.5662 23.8309 13.7485 23.8361C14.6723 23.8379 15.1578 24.1684 15.4048 24.9131C15.6415 25.6282 15.4187 26.1501 14.6341 26.7173C14.5697 26.7626 14.5123 26.8165 14.4792 27.0079C14.9594 27.0079 15.4396 27.0114 15.9216 27.0079C17.0142 26.9975 17.6197 27.3663 17.7867 28.1527C17.9642 28.9827 17.5692 29.5951 16.5705 30.044C11.4518 30.044 6.3314 30.044 1.21269 30.044C0.809041 29.6403 0.40365 29.2349 0 28.8313C0 28.6068 0 28.3824 0 28.158Z"
fill="white"
/>
<path
d="M15.6268 -6.10352e-05C16.0183 0.320075 16.4394 0.612374 16.7978 0.967308C18.3932 2.54015 19.9713 4.1304 21.5511 5.71716C22.5741 6.74368 22.5498 7.51097 21.4728 8.50269C21.2449 8.71322 21.0065 8.9133 20.8638 9.03858C18.3028 6.48444 15.7782 3.96337 13.1719 1.364C13.7304 0.93599 14.3411 0.467965 14.9518 -6.10352e-05C15.1779 -6.10352e-05 15.4024 -6.10352e-05 15.6268 -6.10352e-05Z"
fill="white"
/>
<path
d="M10.6615 19.363C10.3031 19.6988 9.94117 20.0659 9.55144 20.3982C8.96162 20.9028 8.16302 20.9115 7.60104 20.3564C5.70284 18.4826 3.8203 16.5896 1.95167 14.6845C1.43319 14.1573 1.42971 13.3639 1.89948 12.7863C2.23701 12.3704 2.62152 11.9911 2.9434 11.6414C5.50971 14.2095 8.0534 16.7549 10.6615 19.363Z"
fill="white"
/>
</svg>
) : name === "gradient-timeout" ? (
<svg
width="21"
height="32"
viewBox="0 0 21 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18.9031 2.59374C18.9031 3.06158 18.8957 3.48721 18.905 3.91102C18.944 5.67045 18.6394 7.34916 17.7202 8.8866C17.1482 9.84245 16.4035 10.6515 15.577 11.3927C14.8918 12.0073 14.1935 12.6091 13.5175 13.2329C13.2779 13.453 13.0681 13.7099 12.8786 13.9741C12.1414 15.0107 12.1172 16.2215 12.9362 17.1939C13.5509 17.9223 14.2845 18.557 14.9976 19.1992C15.8278 19.9477 16.6542 20.6944 17.3097 21.6026C18.3646 23.0648 18.8567 24.705 18.8957 26.4864C18.9106 27.1451 18.8976 27.8055 18.8976 28.5192C19.1576 28.5192 19.3897 28.5155 19.6219 28.5192C20.4408 28.5357 21.011 29.0843 20.9998 29.8438C20.9906 30.5759 20.4018 31.1097 19.5921 31.1097C13.5193 31.1116 7.44842 31.1116 1.37563 31.1097C0.673637 31.1097 0.116499 30.6602 0.0162144 30.0218C-0.0840701 29.3943 0.289211 28.7797 0.903919 28.5889C1.06735 28.5376 1.24749 28.5302 1.4202 28.521C1.63377 28.51 1.8492 28.5192 2.10362 28.5192C2.10362 28.1284 2.11105 27.7652 2.10176 27.4019C2.07391 26.114 2.17976 24.8444 2.62362 23.6189C3.17704 22.0832 4.16688 20.854 5.36844 19.7734C6.06858 19.1441 6.78171 18.5295 7.47442 17.8911C7.70656 17.6782 7.91084 17.4306 8.09841 17.1774C8.85426 16.1592 8.89883 14.9391 8.0947 13.9594C7.51713 13.2549 6.817 12.6421 6.13543 12.0257C5.29973 11.2698 4.45474 10.5286 3.77689 9.62229C2.67747 8.1509 2.15748 6.48687 2.10919 4.6724C2.09062 3.99358 2.10548 3.31476 2.10548 2.59374C1.83805 2.59374 1.60406 2.59924 1.37006 2.5919C0.547353 2.56989 -0.0116381 2.01949 0.0032189 1.25444C0.0180759 0.537094 0.604923 0.00137599 1.39234 0.00137599C7.46513 -0.000458663 13.5361 -0.000458663 19.6089 0.00137599C20.3963 0.00137599 20.985 0.53526 20.998 1.25444C21.0128 2.01949 20.4501 2.57172 19.6311 2.5919C19.4064 2.59741 19.1799 2.59374 18.9031 2.59374ZM3.15847 28.5009C8.06498 28.5009 12.9381 28.5009 17.8464 28.5009C17.8464 27.7945 17.8669 27.1047 17.8427 26.4167C17.7814 24.5875 17.189 22.9492 15.9373 21.5787C15.4359 21.0302 14.875 20.533 14.3328 20.0174C13.6512 19.3698 12.9269 18.7607 12.2881 18.0764C11.5471 17.282 11.2072 16.3133 11.3038 15.218C11.3892 14.2511 11.8349 13.4439 12.5072 12.7742C13.1869 12.0972 13.9075 11.4569 14.6373 10.8313C16.4295 9.29572 17.6812 7.47208 17.813 5.05584C17.8557 4.2486 17.8204 3.43584 17.8204 2.61025C12.9381 2.61025 8.06498 2.61025 3.15661 2.61025C3.15661 3.30742 3.13804 3.98624 3.16033 4.66323C3.21604 6.41348 3.73975 8.00596 4.90973 9.34159C5.45387 9.9617 6.07415 10.5158 6.67029 11.09C7.36856 11.7633 8.10769 12.3981 8.77254 13.1045C9.33711 13.7044 9.63982 14.4529 9.70296 15.284C9.79768 16.5444 9.27768 17.5682 8.40855 18.4268C7.74741 19.0799 7.03799 19.6854 6.33786 20.3C5.00259 21.476 3.90131 22.7969 3.42961 24.5527C3.08604 25.8443 3.16218 27.1542 3.15847 28.5009Z"
fill="url(#paint0_linear_0_1)"
/>
<path
d="M3.88867 7C8.29172 7 12.6611 7 17.1109 7C16.9108 7.46528 16.7518 7.91401 16.5348 8.33331C15.9194 9.5195 14.9393 10.4004 13.9498 11.274C13.2428 11.8992 12.5376 12.5355 11.8905 13.2178C11.161 13.9866 10.785 14.9282 10.7439 15.9874C10.7364 16.164 10.7158 16.3277 10.4914 16.3332C10.2707 16.3387 10.222 16.1861 10.2164 16.004C10.1884 14.7387 9.62348 13.7033 8.73875 12.8353C8.00553 12.1162 7.21621 11.4542 6.44932 10.7682C5.41122 9.8395 4.51715 8.80779 4.04392 7.47999C3.98781 7.33287 3.94479 7.17839 3.88867 7Z"
fill="url(#paint1_linear_0_1)"
/>
<path
d="M3.88867 27.8941C4.00779 27.8086 4.09527 27.7357 4.19205 27.6771C6.11285 26.5415 8.03364 25.4075 9.95444 24.275C10.323 24.058 10.6431 24.0565 11.0116 24.2703C11.2331 24.3986 11.4527 24.5284 11.6724 24.6567C11.6835 24.5395 11.6593 24.416 11.7152 24.332C11.7729 24.2465 11.9032 24.161 12.0167 24.142C12.2568 24.1008 12.4113 24.2228 12.4559 24.4207C12.5025 24.6235 12.3238 24.7644 11.9404 24.8119C13.6751 25.8399 15.3799 26.8488 17.1109 27.8751C16.8112 28.0366 4.18647 28.0398 3.88867 27.8941Z"
fill="url(#paint2_linear_0_1)"
/>
<path
d="M10.5247 18.6667C10.7341 18.6978 10.87 18.8259 10.8884 19.0565C10.9031 19.2687 10.6937 19.4663 10.4788 19.4425C10.2474 19.4169 10.1151 19.276 10.1114 19.0418C10.1059 18.8406 10.3006 18.6631 10.5247 18.6667Z"
fill="url(#paint3_linear_0_1)"
/>
<path
d="M11.6664 22.9362C11.6374 23.1744 11.5141 23.3276 11.2837 23.3332C11.057 23.3387 10.9118 23.1984 10.8901 22.962C10.8701 22.7442 11.066 22.5466 11.2801 22.5559C11.5195 22.5651 11.6302 22.7146 11.6664 22.9362Z"
fill="url(#paint4_linear_0_1)"
/>
<path
d="M10.1118 23.6938C10.1043 23.951 9.96442 24.0833 9.73128 24.109C9.52051 24.1329 9.33213 23.9473 9.334 23.7306C9.33586 23.4899 9.46643 23.3429 9.70889 23.3337C9.95696 23.3245 10.0838 23.4715 10.1118 23.6938Z"
fill="url(#paint5_linear_0_1)"
/>
<path
d="M11.6662 19.8215C11.6735 20.0348 11.5037 20.2204 11.2901 20.2222C11.0472 20.2241 10.9121 20.0886 10.8902 19.8511C10.8701 19.6415 11.0545 19.4522 11.2627 19.4448C11.4708 19.4355 11.6589 19.6118 11.6662 19.8215Z"
fill="url(#paint6_linear_0_1)"
/>
<path
d="M10.489 21.7778C10.2734 21.7647 10.1345 21.636 10.1126 21.3973C10.0943 21.1828 10.2734 21 10.489 21C10.7339 20.9982 10.8618 21.1436 10.8873 21.3786C10.9093 21.5838 10.7247 21.7703 10.489 21.7778Z"
fill="url(#paint7_linear_0_1)"
/>
<path
d="M11.2856 18.6667C11.0513 18.6538 10.914 18.5245 10.8902 18.288C10.8701 18.0775 11.0513 17.8946 11.2654 17.889C11.4759 17.8835 11.6736 18.0571 11.6663 18.264C11.6571 18.5005 11.5308 18.6408 11.2856 18.6667Z"
fill="url(#paint8_linear_0_1)"
/>
<path
d="M10.8889 16.698C10.8963 16.9335 10.7281 17.1129 10.5076 17.1111C10.2628 17.1073 10.1151 16.9784 10.1114 16.7317C10.1077 16.4868 10.2478 16.3373 10.4908 16.3336C10.7319 16.3261 10.8683 16.4682 10.8889 16.698Z"
fill="url(#paint9_linear_0_1)"
/>
<defs>
<linearGradient
id="paint0_linear_0_1"
x1="0"
y1="0"
x2="30.2315"
y2="19.9721"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#F539F8" />
<stop offset="0.416763" stopColor="#C342F9" />
<stop offset="1" stopColor="#5356FB" />
</linearGradient>
<linearGradient
id="paint1_linear_0_1"
x1="3.88867"
y1="7"
x2="13.2446"
y2="19.9722"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#F539F8" />
<stop offset="0.416763" stopColor="#C342F9" />
<stop offset="1" stopColor="#5356FB" />
</linearGradient>
<linearGradient
id="paint2_linear_0_1"
x1="3.88867"
y1="24.1111"
x2="6.15335"
y2="31.6472"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#F539F8" />
<stop offset="0.416763" stopColor="#C342F9" />
<stop offset="1" stopColor="#5356FB" />
</linearGradient>
<linearGradient
id="paint3_linear_0_1"
x1="10.1113"
y1="18.6667"
x2="10.9328"
y2="19.4707"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#F539F8" />
<stop offset="0.416763" stopColor="#C342F9" />
<stop offset="1" stopColor="#5356FB" />
</linearGradient>
<linearGradient
id="paint4_linear_0_1"
x1="10.8887"
y1="22.5555"
x2="11.7101"
y2="23.3595"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#F539F8" />
<stop offset="0.416763" stopColor="#C342F9" />
<stop offset="1" stopColor="#5356FB" />
</linearGradient>
<linearGradient
id="paint5_linear_0_1"
x1="9.33398"
y1="23.3333"
x2="10.1555"
y2="24.1373"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#F539F8" />
<stop offset="0.416763" stopColor="#C342F9" />
<stop offset="1" stopColor="#5356FB" />
</linearGradient>
<linearGradient
id="paint6_linear_0_1"
x1="10.8887"
y1="19.4445"
x2="11.7101"
y2="20.2485"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#F539F8" />
<stop offset="0.416763" stopColor="#C342F9" />
<stop offset="1" stopColor="#5356FB" />
</linearGradient>
<linearGradient
id="paint7_linear_0_1"
x1="10.1113"
y1="21"
x2="10.9328"
y2="21.804"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#F539F8" />
<stop offset="0.416763" stopColor="#C342F9" />
<stop offset="1" stopColor="#5356FB" />
</linearGradient>
<linearGradient
id="paint8_linear_0_1"
x1="10.8887"
y1="17.8889"
x2="11.7101"
y2="18.6929"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#F539F8" />
<stop offset="0.416763" stopColor="#C342F9" />
<stop offset="1" stopColor="#5356FB" />
</linearGradient>
<linearGradient
id="paint9_linear_0_1"
x1="10.1113"
y1="16.3333"
x2="10.9328"
y2="17.1373"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#F539F8" />
<stop offset="0.416763" stopColor="#C342F9" />
<stop offset="1" stopColor="#5356FB" />
</linearGradient>
</defs>
</svg>
) : name === "timeout" ? (
<svg
width="21"
height="32"
viewBox="0 0 21 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18.9031 2.59374C18.9031 3.06158 18.8957 3.48721 18.905 3.91102C18.944 5.67045 18.6394 7.34916 17.7202 8.8866C17.1482 9.84245 16.4035 10.6515 15.577 11.3927C14.8918 12.0073 14.1935 12.6091 13.5175 13.2329C13.2779 13.453 13.0681 13.7099 12.8786 13.9741C12.1414 15.0107 12.1172 16.2215 12.9362 17.1939C13.5509 17.9223 14.2845 18.557 14.9976 19.1992C15.8278 19.9477 16.6542 20.6944 17.3097 21.6026C18.3646 23.0648 18.8567 24.705 18.8957 26.4864C18.9106 27.1451 18.8976 27.8055 18.8976 28.5192C19.1576 28.5192 19.3897 28.5155 19.6219 28.5192C20.4408 28.5357 21.011 29.0843 20.9998 29.8438C20.9906 30.5759 20.4018 31.1097 19.5921 31.1097C13.5193 31.1116 7.44842 31.1116 1.37563 31.1097C0.673637 31.1097 0.116499 30.6602 0.0162144 30.0218C-0.0840701 29.3943 0.289211 28.7797 0.903919 28.5889C1.06735 28.5376 1.24749 28.5302 1.4202 28.521C1.63377 28.51 1.8492 28.5192 2.10362 28.5192C2.10362 28.1284 2.11105 27.7652 2.10176 27.4019C2.07391 26.114 2.17976 24.8444 2.62362 23.6189C3.17704 22.0832 4.16688 20.854 5.36844 19.7734C6.06858 19.1441 6.78171 18.5295 7.47442 17.8911C7.70656 17.6782 7.91084 17.4306 8.09841 17.1774C8.85426 16.1592 8.89883 14.9391 8.0947 13.9594C7.51713 13.2549 6.817 12.6421 6.13543 12.0257C5.29973 11.2698 4.45474 10.5286 3.77689 9.62229C2.67747 8.1509 2.15748 6.48687 2.10919 4.6724C2.09062 3.99358 2.10548 3.31476 2.10548 2.59374C1.83805 2.59374 1.60406 2.59924 1.37006 2.5919C0.547353 2.56989 -0.0116381 2.01949 0.0032189 1.25444C0.0180759 0.537094 0.604923 0.00137599 1.39234 0.00137599C7.46513 -0.000458663 13.5361 -0.000458663 19.6089 0.00137599C20.3963 0.00137599 20.985 0.53526 20.998 1.25444C21.0128 2.01949 20.4501 2.57172 19.6311 2.5919C19.4064 2.59741 19.1799 2.59374 18.9031 2.59374ZM3.15847 28.5009C8.06498 28.5009 12.9381 28.5009 17.8464 28.5009C17.8464 27.7945 17.8669 27.1047 17.8427 26.4167C17.7814 24.5875 17.189 22.9492 15.9373 21.5787C15.4359 21.0302 14.875 20.533 14.3328 20.0174C13.6512 19.3698 12.9269 18.7607 12.2881 18.0764C11.5471 17.282 11.2072 16.3133 11.3038 15.218C11.3892 14.2511 11.8349 13.4439 12.5072 12.7742C13.1869 12.0972 13.9075 11.4569 14.6373 10.8313C16.4295 9.29572 17.6812 7.47208 17.813 5.05584C17.8557 4.2486 17.8204 3.43584 17.8204 2.61025C12.9381 2.61025 8.06498 2.61025 3.15661 2.61025C3.15661 3.30742 3.13804 3.98624 3.16033 4.66323C3.21604 6.41348 3.73975 8.00596 4.90973 9.34159C5.45387 9.9617 6.07415 10.5158 6.67029 11.09C7.36856 11.7633 8.10769 12.3981 8.77254 13.1045C9.33711 13.7044 9.63982 14.4529 9.70296 15.284C9.79768 16.5444 9.27768 17.5682 8.40855 18.4268C7.74741 19.0799 7.03799 19.6854 6.33786 20.3C5.00259 21.476 3.90131 22.7969 3.42961 24.5527C3.08604 25.8443 3.16218 27.1542 3.15847 28.5009Z"
fill="white"
/>
<path
d="M3.88867 7C8.29172 7 12.6611 7 17.1109 7C16.9108 7.46528 16.7518 7.91401 16.5348 8.33331C15.9194 9.5195 14.9393 10.4004 13.9498 11.274C13.2428 11.8992 12.5376 12.5355 11.8905 13.2178C11.161 13.9866 10.785 14.9282 10.7439 15.9874C10.7364 16.164 10.7158 16.3277 10.4914 16.3332C10.2707 16.3387 10.222 16.1861 10.2164 16.004C10.1884 14.7387 9.62348 13.7033 8.73875 12.8353C8.00553 12.1162 7.21621 11.4542 6.44932 10.7682C5.41122 9.8395 4.51715 8.80779 4.04392 7.47999C3.98781 7.33287 3.94479 7.17839 3.88867 7Z"
fill="white"
/>
<path
d="M3.88867 27.8941C4.00779 27.8086 4.09527 27.7357 4.19205 27.6771C6.11285 26.5415 8.03364 25.4075 9.95444 24.275C10.323 24.058 10.6431 24.0565 11.0116 24.2703C11.2331 24.3986 11.4527 24.5284 11.6724 24.6567C11.6835 24.5395 11.6593 24.416 11.7152 24.332C11.7729 24.2465 11.9032 24.161 12.0167 24.142C12.2568 24.1008 12.4113 24.2228 12.4559 24.4207C12.5025 24.6235 12.3238 24.7644 11.9404 24.8119C13.6751 25.8399 15.3799 26.8488 17.1109 27.8751C16.8112 28.0366 4.18647 28.0398 3.88867 27.8941Z"
fill="white"
/>
<path
d="M10.5247 18.6667C10.7341 18.6978 10.87 18.8259 10.8884 19.0565C10.9031 19.2687 10.6937 19.4663 10.4788 19.4425C10.2474 19.4169 10.1151 19.276 10.1114 19.0418C10.1059 18.8406 10.3006 18.6631 10.5247 18.6667Z"
fill="white"
/>
<path
d="M11.6664 22.9362C11.6374 23.1744 11.5141 23.3276 11.2837 23.3332C11.057 23.3387 10.9118 23.1984 10.8901 22.962C10.8701 22.7442 11.066 22.5466 11.2801 22.5559C11.5195 22.5651 11.6302 22.7146 11.6664 22.9362Z"
fill="white"
/>
<path
d="M10.1118 23.6938C10.1043 23.951 9.96442 24.0833 9.73128 24.109C9.52051 24.1329 9.33213 23.9473 9.334 23.7306C9.33586 23.4899 9.46643 23.3429 9.70889 23.3337C9.95696 23.3245 10.0838 23.4715 10.1118 23.6938Z"
fill="white"
/>
<path
d="M11.6662 19.8215C11.6735 20.0348 11.5037 20.2204 11.2901 20.2222C11.0472 20.2241 10.9121 20.0886 10.8902 19.8511C10.8701 19.6415 11.0545 19.4522 11.2627 19.4448C11.4708 19.4355 11.6589 19.6118 11.6662 19.8215Z"
fill="white"
/>
<path
d="M10.489 21.7778C10.2734 21.7647 10.1345 21.636 10.1126 21.3973C10.0943 21.1828 10.2734 21 10.489 21C10.7339 20.9982 10.8618 21.1436 10.8873 21.3786C10.9093 21.5838 10.7247 21.7703 10.489 21.7778Z"
fill="white"
/>
<path
d="M11.2856 18.6667C11.0513 18.6538 10.914 18.5245 10.8902 18.288C10.8701 18.0775 11.0513 17.8946 11.2654 17.889C11.4759 17.8835 11.6736 18.0571 11.6663 18.264C11.6571 18.5005 11.5308 18.6408 11.2856 18.6667Z"
fill="white"
/>
<path
d="M10.8889 16.698C10.8963 16.9335 10.7281 17.1129 10.5076 17.1111C10.2628 17.1073 10.1151 16.9784 10.1114 16.7317C10.1077 16.4868 10.2478 16.3373 10.4908 16.3336C10.7319 16.3261 10.8683 16.4682 10.8889 16.698Z"
fill="white"
/>
</svg>
) : (
""
)}
</>
);
}
src/components/UploadProduct/ProductUploadField.jsx
+401
View File
@@ -0,0 +1,401 @@
import React from "react";
import collection1 from "../../assets/images/choose-collection-1.png";
import collection2 from "../../assets/images/choose-collection-2.png";
import collection3 from "../../assets/images/choose-collection-3.png";
import InputCom from "../Helpers/Inputs/InputCom/index";
import SwitchCom from "../Helpers/SwitchCom";
import GradientIcons from "./GradientIcons";
export default function ProductUploadField({
datas = {},
cpt,
inh,
linkh,
dscrphn,
priceHndlr,
roltsHndlr,
keyHndlr,
valueHndlr,
unlckPrchesHndlr,
}) {
return (
<div className="w-full lg:pl-[41px]">
<div className="fields w-full">
<form onSubmit={(e) => e.preventDefault()}>
<div className="field w-full mb-6">
<h1 className="field-title">Put on marketplace</h1>
<p className="text-thin-light-gray text-base tracking-wide font-medium mb-3">
Enter price to allow users instantly purchase your NFT
</p>
<div className="items sm:flex sm:space-x-5">
<div
className="item sm:w-[120px] w-full h-[130px] relative mb-5 sm:mb-0"
onClick={() => cpt("fixed")}
>
<div
className={`w-full h-full bg-white dark:bg-dark-white rounded-md z-20 relative flex justify-center items-center ${
datas.priceType === "fixed"
? ""
: "border border-light-purple dark:border-[#5356fb29] "
}`}
>
<div className="flex flex-col justify-center items-center">
<div
className={`w-[68px] h-[68px] rounded-full flex justify-center items-center ${
datas.priceType === "fixed"
? "primary-gradient"
: "bg-[#F2E8FA]"
}`}
>
<GradientIcons
name={`${
datas.priceType === "fixed"
? "doller"
: "gradient-doller"
}`}
/>
</div>
<p className="text-center text-base tracking-wide mt-1 text-dark-gray dark:text-white">
Fixed price
</p>
</div>
</div>
{datas.priceType === "fixed" && (
<div
className="sm:w-[122px] w-full h-[132px] primary-gradient rounded-md absolute z-10"
style={{ top: "-1px", left: "-1px" }}
></div>
)}
</div>
<div
className="item sm:w-[120px] w-full h-[130px] relative mb-5 sm:mb-0"
onClick={() => cpt("bids")}
>
<div
className={`w-full h-full bg-white dark:bg-dark-white rounded-md z-20 relative flex justify-center items-center ${
datas.priceType === "bids"
? ""
: "border border-light-purple dark:border-[#5356fb29] "
}`}
>
<div className="flex flex-col justify-center items-center">
<div
className={`w-[68px] h-[68px] rounded-full flex justify-center items-center ${
datas.priceType === "bids"
? "primary-gradient"
: "bg-[#F2E8FA]"
}`}
>
<GradientIcons
name={`${
datas.priceType === "bids"
? "hammer"
: "gradient-hammer"
}`}
/>
</div>
<p className="text-center text-base tracking-wide mt-1 text-dark-gray dark:text-white">
Open for bids
</p>
</div>
</div>
{datas.priceType === "bids" && (
<div
className="sm:w-[122px] w-full h-[132px] primary-gradient rounded-md absolute z-10"
style={{ top: "-1px", left: "-1px" }}
></div>
)}
</div>
<div
className="item sm:w-[120px] w-full h-[130px] relative mb-5 sm:mb-0"
onClick={() => cpt("auction")}
>
<div
className={`w-full h-full bg-white dark:bg-dark-white rounded-md z-20 relative flex justify-center items-center ${
datas.priceType === "auction"
? ""
: "border border-light-purple dark:border-[#5356fb29] "
}`}
>
<div className="flex flex-col justify-center items-center">
<div
className={`w-[68px] h-[68px] rounded-full flex justify-center items-center ${
datas.priceType === "auction"
? "primary-gradient"
: "bg-[#F2E8FA]"
}`}
>
<GradientIcons
name={`${
datas.priceType === "auction"
? "timeout"
: "gradient-timeout"
}`}
/>
</div>
<p className="text-center text-base tracking-wide mt-1 text-dark-gray dark:text-white">
Timed auction
</p>
</div>
</div>
{datas.priceType === "auction" && (
<div
className="sm:w-[122px] w-full h-[132px] primary-gradient rounded-md absolute z-10"
style={{ top: "-1px", left: "-1px" }}
></div>
)}
</div>
</div>
</div>
<div className="field w-full mb-6">
<h1 className="field-title">Item Name </h1>
<div className="input-field mt-2">
<InputCom
type="text"
name="name"
placeholder="RaidParty Fighters"
inputHandler={inh}
value={datas.itemName}
/>
</div>
</div>
<div className="field w-full mb-6">
<h1 className="field-title">Exter link </h1>
<div className="input-field mt-2">
<InputCom
type="text"
name="link"
inputHandler={linkh}
value={datas.link}
placeholder="https:yoursite.lo/imte/item_name123"
/>
</div>
</div>
<div className="field w-full mb-6">
<h1 className="field-title">Description </h1>
<div className="input-field mt-2">
<div className="input-wrapper w-full ">
<textarea
value={datas.description}
onChange={(e) => dscrphn(e)}
placeholder="provide a detailed description of your item."
rows="7"
className="w-full h-full px-7 py-4 border border-light-purple dark:border-[#5356fb29] rounded-[20px] text-dark-gray dark:text-white bg-[#FAFAFA] dark:bg-[#11131F] focus:ring-0 focus:outline-none"
/>
</div>
</div>
</div>
<div className="field w-full mb-6">
<h1 className="field-title">Instant sale price </h1>
<div className="input-field my-2">
<div className="input-wrapper border border-light-purple dark:border-[#5356fb29] w-full rounded-[50px] h-[58px] flex items-center overflow-hidden">
<input
value={datas.price}
onChange={(e) => priceHndlr(e)}
placeholder="enter the price for which the item will be instantly sold"
className="input-field placeholder:text-base text-bese px-6 text-dark-gray dark:text-white w-10/12 h-full bg-[#FAFAFA] dark:bg-[#11131F] focus:ring-0 focus:outline-none"
type="number"
/>
<div className="w-[1px] h-[33px] bg-light-purple dark:bg-dark-light-purple "></div>
<div className="flex-1 flex h-full justify-center items-center bg-[#FAFAFA] dark:bg-[#11131F] ">
<div className="flex space-x-1 items-center">
<span className="text-dark-gray dark:text-white text-base">ETH</span>
<span>
<svg
width="13"
height="6"
viewBox="0 0 13 6"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
opacity="0.7"
d="M12.7488 0.247421C12.6691 0.169022 12.5744 0.106794 12.4699 0.0643287C12.3655 0.0218632 12.2535 0 12.1403 0C12.0272 0 11.9152 0.0218632 11.8107 0.0643287C11.7063 0.106794 11.6115 0.169022 11.5318 0.247421L7.60655 4.07837C7.52688 4.15677 7.43209 4.219 7.32765 4.26146C7.22321 4.30393 7.11119 4.32579 6.99805 4.32579C6.88491 4.32579 6.77289 4.30393 6.66845 4.26146C6.56401 4.219 6.46922 4.15677 6.38954 4.07837L2.46427 0.247421C2.3846 0.169022 2.28981 0.106794 2.18537 0.0643287C2.08093 0.0218632 1.96891 0 1.85577 0C1.74263 0 1.63061 0.0218632 1.52617 0.0643287C1.42173 0.106794 1.32694 0.169022 1.24727 0.247421C1.08764 0.404141 0.998047 0.616141 0.998047 0.837119C0.998047 1.0581 1.08764 1.2701 1.24727 1.42682L5.18111 5.26613C5.6632 5.73605 6.31669 6 6.99805 6C7.6794 6 8.33289 5.73605 8.81498 5.26613L12.7488 1.42682C12.9084 1.2701 12.998 1.0581 12.998 0.837119C12.998 0.616141 12.9084 0.404141 12.7488 0.247421Z"
fill="#374557"
/>
</svg>
</span>
</div>
</div>
</div>
</div>
<div className="text-base tracking-wide text-dark-gray dark:text-white">
<p>
<span className="text-thin-light-gray">Service fee :</span> 1.5%
</p>
<p>
<span className="text-thin-light-gray">You will Receive :</span>
.29 ETH $120.56
</p>
</div>
</div>
<div className="field w-full mb-6">
<h1 className="field-title">Royalties</h1>
<div className="input-field my-2">
<div className="mb-2">
<InputCom
type="text"
name="link"
inputHandler={roltsHndlr}
value={datas.royalties}
placeholder="0%"
/>
</div>
<p className="text-thin-light-gray text-sm tracking-wide">
Suggested: 10%, 20%, 30%
</p>
</div>
</div>
<div className="field w-full mb-6">
<h1 className="field-title">
Properties
<span className="text-thin-light-gray font-normal ml-2">
(Optional)
</span>
</h1>
<div className="input-field my-2">
<div className="mb-2">
<div className="sm:flex sm:space-x-8">
<div className="sm:w-1/2 w-full mb-2 sm:mb-0">
<InputCom
type="text"
name="link"
inputHandler={keyHndlr}
value={datas.propertiesKey}
placeholder="Enter key"
/>
</div>
<div className="flex-1">
<InputCom
type="text"
name="link"
inputHandler={valueHndlr}
value={datas.propertiesValue}
placeholder="Enter Value"
/>
</div>
</div>
</div>
</div>
</div>
<div className="field w-full mb-6">
<h1 className="field-title">Choose collection</h1>
<div className="input-field mt-2">
<div className="sm:flex sm:space-x-5">
{/* create collection */}
<div className="sm:w-[100px] h-[100px] w-full mb-2 sm:mb-0 rounded-[4px] bg-[#FAFAFA] dark:bg-[#11131F] border border-light-purple dark:border-[#5356fb29] flex justify-center items-center cursor-pointer">
<div>
<span className="mb-1 flex justify-center">
<svg
width="25"
height="25"
viewBox="0 0 25 25"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M25 12.5125C25.019 19.39 19.3853 24.9989 12.5054 25.0001C5.6017 25.0012 -0.0153836 19.3615 3.1653e-05 12.471C0.0154469 5.59949 5.63965 -0.0224583 12.5469 6.7456e-05C19.396 0.0225932 25.0297 5.61846 25 12.5125ZM14.3007 17.2097C14.3007 16.3324 14.3007 15.4551 14.3007 14.5778C14.3007 14.3525 14.3007 14.3525 14.5224 14.3525C16.2299 14.3525 17.9387 14.3525 19.6462 14.3513C19.7339 14.3513 19.8241 14.349 19.9106 14.3335C20.832 14.1711 21.4581 13.327 21.3798 12.356C21.3099 11.4775 20.4988 10.733 19.6011 10.7306C17.9031 10.7271 16.2062 10.7294 14.5082 10.7294C14.2995 10.7294 14.2995 10.7294 14.2995 10.5243C14.2995 8.7851 14.2995 7.04588 14.2983 5.30784C14.2983 5.22959 14.2983 5.15016 14.2805 5.07547C14.0588 4.16021 13.218 3.59588 12.3465 3.68599C11.3836 3.78676 10.697 4.55026 10.697 5.48212C10.697 7.14309 10.697 8.80288 10.697 10.4639C10.697 10.7555 10.7243 10.7294 10.4243 10.7294C8.79504 10.7294 7.16457 10.7401 5.5353 10.7259C4.40524 10.7152 3.60483 11.6293 3.63922 12.6216C3.67242 13.5451 4.45623 14.3513 5.37996 14.3513C7.08275 14.3513 8.78555 14.3513 10.4883 14.3513C10.697 14.3513 10.697 14.3525 10.697 14.5576C10.697 16.2387 10.697 17.9211 10.697 19.6022C10.697 19.6757 10.6935 19.7492 10.703 19.8215C10.8761 21.1256 12.2884 21.8358 13.4255 21.1719C13.9817 20.847 14.3066 20.3586 14.3018 19.684C14.2947 18.86 14.3007 18.0349 14.3007 17.2097Z"
fill="#374557"
fillOpacity="0.6"
/>
</svg>
</span>
<span className="text-thin-light-gray text-center">
Crteate
</span>
</div>
</div>
{/* saved collection list */}
<div className="sm:w-[100px] h-[100px] w-full mb-2 sm:mb-0 rounded-[4px] bg-[#FAFAFA] dark:bg-[#11131F] border-gradient flex justify-center items-center cursor-pointer">
<div>
<div className="mb-1 flex justify-center ">
<div className="w-[50px] h-[50px] rounded-full overflow-hidden">
<img
src={collection1}
alt=""
className="w-full h-full object-cover"
/>
</div>
</div>
<span className="text-thin-light-gray text-center">
Name 1
</span>
</div>
</div>
<div className="sm:w-[100px] h-[100px] w-full mb-2 sm:mb-0 rounded-[4px] bg-[#FAFAFA] dark:bg-[#11131F] border border-light-purple dark:border-[#5356fb29] flex justify-center items-center cursor-pointer">
<div>
<div className="mb-1 flex justify-center ">
<div className="w-[50px] h-[50px] rounded-full overflow-hidden">
<img
src={collection2}
alt=""
className="w-full h-full object-cover"
/>
</div>
</div>
<span className="text-thin-light-gray text-center">
Name 2
</span>
</div>
</div>
<div className="sm:w-[100px] h-[100px] w-full mb-2 sm:mb-0 rounded-[4px] bg-[#FAFAFA] dark:bg-[#11131F] border border-light-purple dark:border-[#5356fb29] flex justify-center items-center cursor-pointer">
<div>
<div className="mb-1 flex justify-center ">
<div className="w-[50px] h-[50px] rounded-full overflow-hidden">
<img
src={collection3}
alt=""
className="w-full h-full object-cover"
/>
</div>
</div>
<span className="text-thin-light-gray text-center">
Name 3
</span>
</div>
</div>
</div>
</div>
</div>
{/* unlock purchase */}
<div className="sm:flex justify-between items-center mb-5">
<div className="sm:flex sm:space-x-3 items-center mb-5 sm:mb-0">
<div className="w-[60px] h-[60px] rounded-full flex justify-center items-center bg-light-gray">
<svg
width="22"
height="28"
viewBox="0 0 22 28"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10.9703 27.9959C8.44944 27.9959 5.92858 28.0078 3.40773 27.9919C1.27205 27.9799 0.0338085 26.7656 0.0196917 24.6347C-0.00450854 21.2735 -0.00854192 17.9123 0.0196917 14.5511C0.0378419 12.4521 1.3265 11.2158 3.44806 11.2118C8.42121 11.2019 13.3964 11.2039 18.3695 11.2118C20.604 11.2158 21.8564 12.4641 21.8644 14.6909C21.8745 17.9862 21.8786 21.2815 21.8644 24.5767C21.8544 26.7616 20.6242 27.9819 18.43 27.9939C15.9434 28.0058 13.4569 27.9959 10.9703 27.9959ZM8.53213 17.9722C8.61078 18.1699 8.65918 18.789 8.99193 19.0466C9.89541 19.7476 9.75424 20.6544 9.75626 21.567C9.75626 21.9984 9.62719 22.5057 9.81071 22.8412C10.0467 23.2706 10.5367 23.8358 10.9219 23.8398C11.3131 23.8438 11.8496 23.3026 12.0613 22.8752C12.261 22.4698 12.1319 21.9006 12.1319 21.4053C12.1319 20.5525 12.0936 19.7716 12.868 19.0706C13.6041 18.4036 13.4871 17.1354 12.8841 16.3086C12.2811 15.4817 11.2002 15.1262 10.2019 15.4258C9.25208 15.7114 8.54826 16.6621 8.53213 17.9722Z"
fill="black"
/>
<path
d="M18.5315 10.2691C17.3356 10.2691 16.2466 10.2691 15.0345 10.2691C15.0345 9.40439 15.0446 8.58556 15.0325 7.76473C14.9982 5.32022 13.2397 3.47086 10.9467 3.45888C8.64969 3.4469 6.88509 5.28028 6.84476 7.73677C6.83064 8.55959 6.84274 9.38441 6.84274 10.2672C5.64483 10.2672 4.55582 10.2672 3.47286 10.2672C2.71257 5.3322 4.5054 1.66744 8.75456 0.347323C13.5603 -1.14654 18.3984 2.36244 18.5274 7.34932C18.5516 8.30396 18.5315 9.26059 18.5315 10.2691Z"
fill="black"
/>
</svg>
</div>
<div>
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">
Unlock once purchased
</h1>
<p className="text-base text-thin-light-gray tracking-wide">
Unlockable content, only revealed by the owner of the item.
</p>
</div>
</div>
<div>
<SwitchCom value={datas.purchase} handler={unlckPrchesHndlr} />
</div>
</div>
</form>
</div>
</div>
);
}
src/components/UploadProduct/index.jsx
+475
View File
@@ -0,0 +1,475 @@
import React, { useEffect, useRef, useState } from "react";
import { Link } from "react-router-dom";
import PreviewProductCardStyleOne from "../Cards/PreviewProductCardStyleOne";
import ModalCom from "../Helpers/ModalCom";
import Layout from "../Partials/Layout";
// import DropFileWidget from "./DropFileWidget";
import ProductUploadField from "./ProductUploadField";
export default function UploadProduct() {
// preview modal
const [previewProductModal, setPreviewProductModal] = useState(false);
// cancelUploadModal
const [cancelUploadModal, setCancelUploadModal] = useState(false);
const cancelUploadModalHandler = () => {
setCancelUploadModal(!cancelUploadModal);
};
// price type
const [priceType, setPriceType] = useState("fixed");
const changePriceTypeHandler = (value) => {
setPriceType(value);
};
// item name
const [itemName, setItemName] = useState("");
const changeItemNameHandler = (e) => {
setItemName(e.target.value);
};
// link
const [link, setLink] = useState("");
const linkHandler = (e) => {
setLink(e.target.value);
};
// price
const [price, setPrice] = useState("");
const pricehandler = (e) => {
setPrice(e.target.value);
};
// description
const [description, setDescription] = useState("");
const descriptionHandler = (e) => {
setDescription(e.target.value);
};
// royalties
const [royalties, setRoyalties] = useState("");
const royaltiesHandler = (e) => {
setRoyalties(e.target.value);
};
// propertiesKey
const [propertiesKey, setPropertiesKey] = useState("");
const propertiesKeyHandler = (e) => {
setPropertiesKey(e.target.value);
};
// propertiesValue
const [propertiesValue, setPropertiesValue] = useState("");
const propertiesValueHandler = (e) => {
setPropertiesValue(e.target.value);
};
// unlock purchase enable
const [purchase, setPurchase] = useState(false);
const purchaseValueHandler = () => {
setPurchase(!purchase);
};
const previewProductToggleHandler = () => {
setPreviewProductModal(!previewProductModal);
};
const previewUploadProduct = () => {
setPreviewProductModal(!previewProductModal);
};
const fileSelect = useRef(null);
const fileRef = useRef(null);
const [selectedFile, setSelectedFile] = useState("");
const [img, setImg] = useState(null);
const changeFile = (e, file) => {
if (e) {
const imgRead = new FileReader();
imgRead.onload = (event) => {
setImg(event.target.result);
};
// most importend
imgRead.readAsDataURL(e.target.files[0]);
}
if (file) {
if (file[0].name) {
setSelectedFile(file[0].name);
const imgRead = new FileReader();
imgRead.onload = (event) => {
setImg(event.target.result);
};
// most importend
imgRead.readAsDataURL(file[0]);
}
}
};
// drop event
function handleDrop(e) {
const dt = e.dataTransfer;
const { files } = dt;
changeFile(false, files);
}
// for stopPropagation and preventDefault
function preventDefaults(e) {
e.preventDefault();
e.stopPropagation();
}
function highlight() {
fileSelect.current.classList.add("highlight");
}
function unhighlight() {
fileSelect.current.classList.remove("highlight");
}
const browseImg = () => {
fileRef.current.click();
};
useEffect(() => {
// drop event
fileSelect.current.addEventListener("drop", handleDrop, false);
// for stopPropagation and preventDefault
["dragenter", "dragover", "dragleave", "drop"].forEach((eventName) => {
fileSelect.current.addEventListener(eventName, preventDefaults, false);
});
// for highlight
["dragenter", "dragover"].forEach((eventName) => {
fileSelect.current.addEventListener(eventName, highlight, false);
});
["dragleave", "drop"].forEach((eventName) => {
fileSelect.current.addEventListener(eventName, unhighlight, false);
});
});
// data sorted
const data = {
priceType,
itemName,
link,
description,
price,
royalties,
propertiesKey,
propertiesValue,
purchase,
username: "Bilout",
profile_img: "profile.png",
thumbnil: "tranding-2.jpg",
remaing: "2023-03-04 4:00:00",
};
const deleteData = () => {
setItemName("");
setLink("");
setPrice("");
setDescription("");
setRoyalties("");
setPropertiesKey("");
setPropertiesValue("");
setPurchase(false);
cancelUploadModalHandler();
setImg(null);
};
return (
<>
<Layout>
<div className="upload-product-wrapper w-full mb-10">
<div className="main-wrapper w-full">
<div className="w-full">
{/* heading */}
<div className="mb-6">
<h1 className="text-26 font-bold text-dark-gray dark:text-white">
Create new item
</h1>
</div>
{/**
TODO: upload product main widget
*/}
<div className="w-full bg-white dark:bg-dark-white section-shadow rounded-2xl">
{/* section-heading */}
<div className="section-heading w-full mb-5 lg:px-9 px-4 lg:pt-9 pt-5 ">
<h1 className="text-dark-gray dark:text-white lg:text-26 text-18 font-bold tracking-wide mb-1">
Image,Video,Audio or 3D Model
</h1>
<p className="text-thin-light-gray text-base tracking-wide font-medium">
File types suppported: JPG, PNG, GIP, SVG, MP4, MP3, WEBM,
OGG, GLB, GLTF. Max Size : 100 MB
</p>
</div>
<div className="main-content w-full lg:flex justify-between lg:px-9 px-4">
<div className="lg:w-[39%] w-[100%] lg:pr-[39px] lg:mb-0 mb-10">
<div
ref={fileSelect}
className="drop-product-upload w-full rounded-md lg:h-[360px] h-[300px] overflow-hidden relative"
>
{img ? (
<div className="w-full h-full">
<img
src={img}
alt=""
className="w-full h-full object-cover"
/>
<input
type="file"
id="fileElem"
name="file"
className="hidden"
accept="image/*"
ref={fileRef}
value={selectedFile.name}
onChange={(e) => changeFile(e)}
/>
<button
type="button"
className="absolute w-10 h-10 rounded primary-gradient flex justify-center items-center right-2 top-2 text-white"
onClick={() => browseImg()}
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth="2"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
/>
</svg>
</button>
</div>
) : (
<div
className="w-full h-full flex justify-center items-center"
onClick={() => browseImg()}
>
<form action="#">
<div>
<div className="flex justify-center mb-8">
<svg
width="71"
height="52"
viewBox="0 0 71 52"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M45.9204 11.6862C49.8242 8.24423 55.4809 9.23082 58.1485 11.6525C59.8979 13.2402 61.0985 15.1033 61.4235 17.4743C61.7414 19.7992 61.3241 21.9748 60.0409 23.9684C60.6758 24.1762 61.2708 24.3476 61.8498 24.5643C67.7214 26.7604 71.4049 32.7243 70.9644 38.9662C70.5009 45.5314 65.0866 50.9075 59.3082 51.7706C58.4913 51.8923 57.6601 51.9784 56.836 51.9793C43.3851 51.9917 29.9334 51.9775 16.4825 51.9917C7.58007 52.0033 1.7582 45.1113 0.437713 39.3934C-1.30459 31.8487 2.26349 24.0963 9.19983 20.673C9.50264 20.5238 9.55415 20.3533 9.53283 20.0567C8.76292 9.5363 16.5313 2.47741 23.1089 0.709362C33.1169 -1.98134 42.2849 3.28995 45.7517 11.331C45.8032 11.4491 45.8618 11.5645 45.9204 11.6862ZM28.3971 28.3641C28.3971 28.5853 28.3971 28.7584 28.3971 28.9316C28.3971 32.9863 28.3962 37.041 28.398 41.0957C28.398 42.0885 28.8358 42.521 29.8357 42.521C32.0255 42.5219 34.2154 42.5219 36.4062 42.521C37.4558 42.521 37.8705 42.0992 37.8714 41.0353C37.8714 36.9957 37.8714 32.9561 37.8714 28.9156C37.8714 28.7433 37.8714 28.5719 37.8714 28.3641C38.1041 28.3641 38.279 28.3641 38.453 28.3641C40.9537 28.3641 43.4544 28.3597 45.9551 28.3668C46.5447 28.3686 47.0136 28.1697 47.2347 27.6058C47.4443 27.0703 47.2826 26.6112 46.8706 26.2009C42.6143 21.9606 38.366 17.7132 34.1133 13.4693C33.4775 12.8344 32.7972 12.8291 32.1694 13.4551C27.9273 17.6883 23.6861 21.9233 19.4476 26.1592C18.9494 26.6565 18.8171 27.1733 19.0471 27.6821C19.3064 28.2567 19.8019 28.3686 20.3711 28.3668C22.8567 28.3606 25.3432 28.3641 27.8296 28.3641C28.0019 28.3641 28.1751 28.3641 28.3971 28.3641Z"
fill="#374557"
fillOpacity="0.6"
/>
</svg>
</div>
<p className="text-xl font-bold text-center w-[203px] tracking-wide text-dark-gray dark:text-white ">
Drag files to upload or
<span className="text-purple ml-1">Browse</span>
</p>
<input
type="file"
id="fileElem"
name="file"
className="hidden"
accept="image/*"
ref={fileRef}
value={selectedFile.name}
onChange={(e) => changeFile(e)}
/>
</div>
</form>
</div>
)}
</div>
</div>
<div className="w-[1px] bg-light-purple dark:bg-dark-light-purple "></div>
<div className="flex-1">
{/* product upload field */}
<ProductUploadField
datas={data}
cpt={changePriceTypeHandler}
inh={changeItemNameHandler}
linkh={linkHandler}
dscrphn={descriptionHandler}
priceHndlr={pricehandler}
roltsHndlr={royaltiesHandler}
keyHndlr={propertiesKeyHandler}
valueHndlr={propertiesValueHandler}
unlckPrchesHndlr={purchaseValueHandler}
/>
</div>
</div>
{/* bottom action */}
<div className="w-full h-[120px] bg-red border-t border-light-purple dark:border-[#5356fb29] flex justify-end items-center">
<div className="flex sm:space-x-4 space-x-2 sm:mr-9 mr-2">
<button
type="button"
onClick={cancelUploadModalHandler}
className="sm:text-18 text-sm text-light-red tracking-wide "
>
<span className="border-b dark:border-[#5356fb29] border-light-red">
{" "}
Cancel
</span>
</button>
<button
onClick={() => previewUploadProduct(data)}
type="button"
className="sm:w-[126px] h-[46px] w-[100px] flex justify-center items-center border-gradient sm:text-18 text-sm rounded-full text-back"
>
<span className="text-gradient"> Preview</span>
</button>
<Link
to="/"
className="sm:w-[126px] h-[46px] w-[100px] flex justify-center items-center btn-gradient sm:text-18 text-sm rounded-full text-white"
>
Create Now
</Link>
</div>
</div>
{/* === action modals === */}
{/* TODO: preview modal */}
{previewProductModal && (
<ModalCom
action={previewProductToggleHandler}
situation={previewProductModal}
>
<div className="preview-upload-product lg:w-[580px] lg:h-[622px] w-full h-full bg-white dark:bg-[#11131F] lg:rounded-2xl">
<div className="w-full h-full flex flex-col justify-between">
{/* heading */}
<div className="lg:px-[40px] lg:py-[33px] px-[30px] py-[23px] flex justify-between border-b dark:border-[#5356fb29] border-light-purple dark:border-[#5356fb29] mb-4 lg:mb-0">
<h1 className="text-dark-gray dark:text-white tracking-wide text-26 font-bold">
Item Privew
</h1>
<button
onClick={previewProductToggleHandler}
type="button"
>
<svg
width="37"
height="36"
viewBox="0 0 37 36"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="fill-current text-[#374557] dark:text-[#EB5757]"
>
<path d="M36.9932 16.1598C36.9932 17.4397 36.9932 18.7196 36.9932 19.9999C36.7843 20.0707 36.8568 20.2552 36.8317 20.3998C35.5253 27.945 31.2392 32.9245 23.9534 35.282C22.8937 35.6249 21.7684 35.7654 20.6734 35.9994C19.3935 35.9994 18.1135 35.9994 16.8333 35.9994C16.5828 35.7084 16.212 35.773 15.8966 35.7091C8.76547 34.2618 4.08044 30.0723 1.76284 23.1868C1.42817 22.1924 1.43916 21.1197 0.993164 20.1596C0.993164 18.7196 0.993164 17.2796 0.993164 15.8395C1.28454 15.6193 1.20757 15.2654 1.26392 14.9805C2.70637 7.6975 7.01928 2.99666 14.036 0.700707C15.005 0.383561 16.044 0.386653 16.993 -0.000244141C18.2197 -0.000244141 19.4464 -0.000244141 20.673 -0.000244141C20.7088 0.123797 20.8057 0.135823 20.9156 0.146474C28.2931 0.868729 34.5254 6.21897 36.3733 13.4267C36.6052 14.3311 36.7877 15.2482 36.9932 16.1598ZM34.0042 18.0784C34.0365 9.7708 27.3355 3.00285 19.0701 2.99426C10.778 2.98601 3.9966 9.65776 3.97839 17.8424C3.95983 26.1631 10.5818 32.9599 18.7533 33.0077C27.1902 33.0575 33.9719 26.4184 34.0042 18.0784Z" />
<path d="M16.9241 18.0228C14.926 16.0368 13.0001 14.1205 11.0718 12.207C10.5939 11.7328 10.2571 11.216 10.5131 10.5058C10.9382 9.32653 12.1885 9.08085 13.1369 10.0172C14.8999 11.7582 16.6698 13.4937 18.3782 15.2877C18.9039 15.8399 19.1565 15.7485 19.6306 15.2578C21.3517 13.4759 23.1131 11.7324 24.8754 9.99071C25.8107 9.06608 27.1026 9.33615 27.4899 10.5168C27.7218 11.2239 27.3851 11.741 26.9064 12.2176C25.1688 13.947 23.4409 15.6852 21.7036 17.4146C21.516 17.6015 21.2896 17.7493 21.0398 17.9482C23.0763 19.9738 25.0304 21.899 26.9621 23.8465C27.9194 24.8117 27.6421 26.1098 26.4268 26.4984C25.7052 26.729 25.2063 26.3438 24.7386 25.8755C22.9876 24.1224 21.2164 22.3889 19.4977 20.6046C19.063 20.1531 18.8647 20.2267 18.4734 20.628C16.7251 22.4212 14.9425 24.1805 13.1709 25.9507C12.6953 26.4259 12.1861 26.7469 11.467 26.4534C10.3066 25.9796 10.062 24.8395 10.979 23.895C12.2782 22.5573 13.6069 21.2482 14.9319 19.9353C15.5723 19.3003 16.2331 18.6849 16.9241 18.0228Z" />
</svg>
</button>
</div>
<div className="flex justify-center mb-4 lg:mb-0">
<div className="w-[270px] h-[387px]">
<PreviewProductCardStyleOne
datas={{
thumbnil: img,
profile_img: data.profile_img,
username: data.username,
title: data.itemName,
price: data.price,
remaing: data.remaing,
}}
/>
</div>
</div>
<div className="flex justify-end">
<div className="flex space-x-4 pb-[33px] pr-[40px]">
<button
onClick={previewProductToggleHandler}
type="button"
className="text-18 text-light-red tracking-wide "
>
<span> Cancel</span>
</button>
<Link
to="/"
className="sm:w-[126px] h-[46px] w-[100px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
>
Create Now
</Link>
</div>
</div>
</div>
</div>
</ModalCom>
)}
{/* TODO: cancel modal */}
{cancelUploadModal && (
<ModalCom>
<div className="lg:w-[460px] lg:h-[473px] w-full h-full bg-white dark:bg-dark-white lg:rounded-2xl">
<div className="w-full h-[92px] lg:px-10 lg:py-4 px-[30px] py-[23px] border-b dark:border-[#5356fb29] border-light-purple flex justify-between items-center">
<h1 className="text-26 tracking-wide font-bold text-dark-gray dark:text-white">
Confirm
</h1>
<button
onClick={cancelUploadModalHandler}
type="button"
>
<svg
width="37"
height="36"
viewBox="0 0 37 36"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M36.9932 16.1598C36.9932 17.4397 36.9932 18.7196 36.9932 19.9999C36.7843 20.0707 36.8568 20.2552 36.8317 20.3998C35.5253 27.945 31.2392 32.9245 23.9534 35.282C22.8937 35.6249 21.7684 35.7654 20.6734 35.9994C19.3935 35.9994 18.1135 35.9994 16.8333 35.9994C16.5828 35.7084 16.212 35.773 15.8966 35.7091C8.76547 34.2618 4.08044 30.0723 1.76284 23.1868C1.42817 22.1924 1.43916 21.1197 0.993164 20.1596C0.993164 18.7196 0.993164 17.2796 0.993164 15.8395C1.28454 15.6193 1.20757 15.2654 1.26392 14.9805C2.70637 7.6975 7.01928 2.99666 14.036 0.700707C15.005 0.383561 16.044 0.386653 16.993 -0.000244141C18.2197 -0.000244141 19.4464 -0.000244141 20.673 -0.000244141C20.7088 0.123797 20.8057 0.135823 20.9156 0.146474C28.2931 0.868729 34.5254 6.21897 36.3733 13.4267C36.6052 14.3311 36.7877 15.2482 36.9932 16.1598ZM34.0042 18.0784C34.0365 9.7708 27.3355 3.00285 19.0701 2.99426C10.778 2.98601 3.9966 9.65776 3.97839 17.8424C3.95983 26.1631 10.5818 32.9599 18.7533 33.0077C27.1902 33.0575 33.9719 26.4184 34.0042 18.0784Z"
fill="#374557"
fillOpacity="0.6"
/>
<path
d="M16.9241 18.0228C14.926 16.0368 13.0001 14.1205 11.0718 12.207C10.5939 11.7328 10.2571 11.216 10.5131 10.5058C10.9382 9.32653 12.1885 9.08085 13.1369 10.0172C14.8999 11.7582 16.6698 13.4937 18.3782 15.2877C18.9039 15.8399 19.1565 15.7485 19.6306 15.2578C21.3517 13.4759 23.1131 11.7324 24.8754 9.99071C25.8107 9.06608 27.1026 9.33615 27.4899 10.5168C27.7218 11.2239 27.3851 11.741 26.9064 12.2176C25.1688 13.947 23.4409 15.6852 21.7036 17.4146C21.516 17.6015 21.2896 17.7493 21.0398 17.9482C23.0763 19.9738 25.0304 21.899 26.9621 23.8465C27.9194 24.8117 27.6421 26.1098 26.4268 26.4984C25.7052 26.729 25.2063 26.3438 24.7386 25.8755C22.9876 24.1224 21.2164 22.3889 19.4977 20.6046C19.063 20.1531 18.8647 20.2267 18.4734 20.628C16.7251 22.4212 14.9425 24.1805 13.1709 25.9507C12.6953 26.4259 12.1861 26.7469 11.467 26.4534C10.3066 25.9796 10.062 24.8395 10.979 23.895C12.2782 22.5573 13.6069 21.2482 14.9319 19.9353C15.5723 19.3003 16.2331 18.6849 16.9241 18.0228Z"
fill="#374557"
fillOpacity="0.6"
/>
</svg>
</button>
</div>
<div className="py-8">
<div className="w-full flex justify-center mb-7">
<div className="w-[136px] h-[136px] rounded-full flex justify-center items-center bg-purple">
<svg
width="41"
height="66"
viewBox="0 0 41 66"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M21.8849 0.789307C23.1593 1.03592 24.4573 1.19697 25.7049 1.54256C33.5452 3.71006 39.271 10.538 39.9579 18.6158C40.5118 25.115 38.308 30.6008 33.5048 35.0197C31.8364 36.5547 30.0501 37.9606 28.3413 39.4537C28.1275 39.6399 27.9659 40.0039 27.9608 40.2875C27.9289 42.2755 27.944 44.2651 27.944 46.2967C22.8899 46.2967 17.8763 46.2967 12.7919 46.2967C12.7919 46.0619 12.7919 45.8388 12.7919 45.6139C12.7919 41.5457 12.8004 37.4774 12.7802 33.4109C12.7785 32.9394 12.9317 32.6492 13.2835 32.3539C16.5648 29.5959 19.8275 26.8178 23.1038 24.0547C24.2621 23.0783 24.922 21.8704 24.9085 20.3421C24.8883 17.9163 22.8613 15.9148 20.4235 15.8913C17.9706 15.8695 15.9149 17.8055 15.8325 20.2331C15.8089 20.8991 15.8291 21.5668 15.8291 22.2697C10.775 22.2697 5.77485 22.2697 0.692174 22.2697C0.692174 21.3151 0.646718 20.3387 0.698908 19.3657C1.2225 9.69921 8.74465 1.87473 18.4336 0.891642C18.5767 0.876543 18.7147 0.824537 18.8544 0.789307C19.8646 0.789307 20.8747 0.789307 21.8849 0.789307Z"
fill="white"
/>
<path
d="M19.485 65.2103C18.1617 64.9268 16.9041 64.5091 15.803 63.6787C13.3804 61.8484 12.2877 58.7699 13.0386 55.7888C13.7726 52.8747 16.2138 50.6703 19.2089 50.2157C23.273 49.6 27.2024 52.3681 27.8135 56.277C28.4937 60.6153 25.8202 64.3782 21.544 65.103C21.4429 65.1198 21.3487 65.1718 21.2527 65.2087C20.6635 65.2103 20.0742 65.2103 19.485 65.2103Z"
fill="white"
/>
</svg>
</div>
</div>
<div className="flex justify-center mb-8">
<p className="text-center text-2xl text-black tracking-wide w-[84%]">
Are you sure you want to Navigate away from this
page?
</p>
</div>
<div className="flex justify-center">
<div className="flex space-x-5">
<button
onClick={deleteData}
type="button"
className="w-[114px] h-[46px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
>
Yes Delete
</button>
<button
onClick={cancelUploadModalHandler}
type="button"
className="w-[114px] h-[46px] flex justify-center items-center border-gradient text-base rounded-full text-back"
>
<span className="text-gradient"> Not Now</span>
</button>
</div>
</div>
</div>
</div>
</ModalCom>
)}
</div>
</div>
</div>
</div>
</Layout>
</>
);
}