Reza_ashrafi
3 years ago
commit
b6f473fd88
54 changed files with 2552 additions and 46 deletions
@ -0,0 +1,52 @@ |
|||||||
|
import React from "react"; |
||||||
|
|
||||||
|
const AdvertisementDesign1 = () => { |
||||||
|
return ( |
||||||
|
<section className="mx-auto bg-white m-10 w-full sm:w-8/12 md:w-5/12 lg:w-3/12"> |
||||||
|
<div |
||||||
|
className="w-full h-96 rounded-3xl relative overflow-hidden" |
||||||
|
style={{ backgroundColor: "#E3F2FF" }} |
||||||
|
> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
width: "calc(100vw / 10)", |
||||||
|
height: "calc(100vw / 10)", |
||||||
|
left: "20%", |
||||||
|
top: "15%", |
||||||
|
}} |
||||||
|
className="rounded-full absolute bg-blue-200 bg-opacity-30 backdrop-filter backdrop-blur-md z-30" |
||||||
|
></div> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
width: "calc(100vw / 7)", |
||||||
|
height: "calc(100vw / 7)", |
||||||
|
right: "25%", |
||||||
|
bottom: "4%", |
||||||
|
}} |
||||||
|
className="rounded-full absolute bg-purple-200 bg-opacity-30 backdrop-filter backdrop-blur-md" |
||||||
|
></div> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
width: "calc(100vw / 8)", |
||||||
|
height: "calc(100vw / 8)", |
||||||
|
right: "3%", |
||||||
|
top: "15%", |
||||||
|
}} |
||||||
|
className="rounded-full absolute bg-green-200 bg-opacity-40 backdrop-filter backdrop-blur-md" |
||||||
|
></div> |
||||||
|
<div className="absolute right-0 bottom-0 h-full w-full flex flex-col justify-center p-10 z-50"> |
||||||
|
<h2 className="text-lg">تبلیغات دانوینی</h2> |
||||||
|
<p className="text-sm text-justify leading-6 mt-2"> |
||||||
|
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با |
||||||
|
استفاده از طراحان گرافیک است. |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
<button className="rounded-sm text-base border p-3 w-6/12 absolute left-1/2 bottom-2 transform -translate-x-1/2 -translate-y-1/2 z-50"> |
||||||
|
دانلود اپلیکیشن |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</section> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default AdvertisementDesign1; |
||||||
@ -0,0 +1,55 @@ |
|||||||
|
import React from "react"; |
||||||
|
|
||||||
|
const AdvertisementDesign2 = () => { |
||||||
|
return ( |
||||||
|
<section className="mx-auto bg-white m-10 w-4/12 p-2"> |
||||||
|
<div |
||||||
|
className="h-56 rounded-3xl relative" |
||||||
|
style={{ backgroundColor: "#E3F2FF" }} |
||||||
|
> |
||||||
|
<div className="flex flex-col justify-center p-10 w-7/12"> |
||||||
|
<h2 className="text-lg">تبلیغات دانوینی</h2> |
||||||
|
<p className="text-sm text-justify leading-6 mt-2"> |
||||||
|
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با |
||||||
|
استفاده از طراحان گرافیک است. |
||||||
|
</p> |
||||||
|
<button className="rounded-lg text-sm border p-3 w-8/12 mx-auto bg-darkCrimsonBgColor text-white mt-2"> |
||||||
|
دانلود اپلیکیشن |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
backgroundColor: "#00FFFF33", |
||||||
|
width: "calc(100vw / 15)", |
||||||
|
height: "calc(100vw / 15)", |
||||||
|
left: "20%", |
||||||
|
top: "15%", |
||||||
|
}} |
||||||
|
className="rounded-full absolute z-20 backdrop-filter backdrop-blur-md" |
||||||
|
></div> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
backgroundColor: "#6E6EEF66", |
||||||
|
width: "calc(100vw / 10)", |
||||||
|
height: "calc(100vw / 10)", |
||||||
|
left: "7%", |
||||||
|
bottom: "-15%", |
||||||
|
}} |
||||||
|
className="rounded-full absolute z-10 backdrop-filter backdrop-blur-md" |
||||||
|
></div> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
backgroundColor: "white", |
||||||
|
width: "calc(100vw / 12)", |
||||||
|
height: "calc(100vw / 12)", |
||||||
|
left: "0%", |
||||||
|
top: "10%", |
||||||
|
}} |
||||||
|
className="rounded-full absolute backdrop-filter backdrop-blur-md" |
||||||
|
></div> |
||||||
|
</div> |
||||||
|
</section> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default AdvertisementDesign2; |
||||||
|
After Width: | Height: | Size: 1.4 KiB |
@ -0,0 +1,91 @@ |
|||||||
|
import React from "react"; |
||||||
|
|
||||||
|
import cart from "./cart-icon.svg"; |
||||||
|
import map from "./map-icon.svg"; |
||||||
|
import setting from "./setting-icon.svg"; |
||||||
|
|
||||||
|
const AdvertisementDesign3 = ({ features }) => { |
||||||
|
return ( |
||||||
|
<section className="mx-auto bg-white m-10 w-full sm:w-5/12 p-2"> |
||||||
|
<div |
||||||
|
className="rounded-3xl relative" |
||||||
|
style={{ backgroundColor: "#E3F2FF" }} |
||||||
|
> |
||||||
|
<div className="flex flex-col justify-center p-10 w-8/12"> |
||||||
|
<h2 className="text-lg text-productPrice z-50">تبلیغات دانوینی</h2> |
||||||
|
<p className="text-sm text-justify leading-6 mt-2 text-productPrice z-50"> |
||||||
|
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با |
||||||
|
استفاده از طراحان گرافیک است. |
||||||
|
</p> |
||||||
|
<div className="mt-3"> |
||||||
|
{features.map((feature, i) => ( |
||||||
|
<div className="flex flex-row items-center mt-2"> |
||||||
|
<img src={feature.icon} alt="" className="w-6 h-6 z-50" /> |
||||||
|
<p className="text-sm mr-2 text-justify leading-6 text-productPrice font-light z-50"> |
||||||
|
{feature.title} |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
backgroundColor: "#00FFFF22", |
||||||
|
width: "calc(100vw / 15)", |
||||||
|
height: "calc(100vw / 15)", |
||||||
|
left: "8%", |
||||||
|
top: "20%", |
||||||
|
}} |
||||||
|
className="rounded-full absolute z-20 bg-opacity-30 backdrop-filter backdrop-blur-md" |
||||||
|
></div> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
backgroundColor: "#6E6EEF22", |
||||||
|
width: "calc(100vw / 10)", |
||||||
|
height: "calc(100vw / 10)", |
||||||
|
left: "17%", |
||||||
|
top: "10%", |
||||||
|
}} |
||||||
|
className="rounded-full absolute bg-opacity-30 backdrop-filter backdrop-blur-md" |
||||||
|
></div> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
backgroundColor: "#06BACE22", |
||||||
|
width: "calc(100vw / 11)", |
||||||
|
height: "calc(100vw / 11)", |
||||||
|
left: "12%", |
||||||
|
bottom: "2%", |
||||||
|
}} |
||||||
|
className="rounded-full absolute" |
||||||
|
></div> |
||||||
|
<div className="absolute bottom-5 left-10"> |
||||||
|
<button className="border-2 border-blue-500 text-blue-500 ml-4 rounded p-2 text-sm"> |
||||||
|
تماس با ما |
||||||
|
</button> |
||||||
|
<button className="bg-blue-500 border-2 border-blue-500 text-white rounded p-2 text-sm"> |
||||||
|
به سلامت |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</section> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default AdvertisementDesign3; |
||||||
|
|
||||||
|
AdvertisementDesign3.defaultProps = { |
||||||
|
features: [ |
||||||
|
{ |
||||||
|
icon: cart, |
||||||
|
title: "قابلیت های فروشگاهی بسیار پیشرفته و ساده", |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: map, |
||||||
|
title: "ارسال به تمام نقاط ایران", |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: setting, |
||||||
|
title: "تنظیمات پیشرفته و بیش از 2000 ماژول اختصاصی", |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 289 B |
@ -0,0 +1,139 @@ |
|||||||
|
import React, { useState } from "react"; |
||||||
|
|
||||||
|
const CourseChapter = ({ chapters }) => { |
||||||
|
const [selectedLesson, setSelectedLesson] = useState(null); |
||||||
|
|
||||||
|
return ( |
||||||
|
<section style={{ width: "30%" }} className="bg-white mx-auto my-20 p-4"> |
||||||
|
<div |
||||||
|
className="rounded py-5 px-4 relative" |
||||||
|
style={{ backgroundColor: "#196EC033" }} |
||||||
|
> |
||||||
|
{/* top */} |
||||||
|
<div className="flex flex-row items-center justify-between"> |
||||||
|
<div> |
||||||
|
<h2 className="text-blue-800 text-base">سرفصل دوره</h2> |
||||||
|
</div> |
||||||
|
<div className="flex flex-row-reverse items-center divide-x transform translate-x-2"> |
||||||
|
<span className="text-blue-800 text-sm px-2">علوم تجربی</span> |
||||||
|
<span className="text-blue-800 text-sm px-2">پایه ششم</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
{/* divider */} |
||||||
|
<div className="border-b border-blue-300 bg-opacity-10 my-5"></div> |
||||||
|
{/* course title */} |
||||||
|
{chapters.map((chapter, index) => ( |
||||||
|
<div className="flex flex-col" key={index}> |
||||||
|
<div className="bg-blue-600 rounded-sm p-4 flex flex-row items-center justify-between"> |
||||||
|
<p className="text-sm text-white">{chapter.title}</p> |
||||||
|
<span className="text-sm text-white">{chapter.duration}</span> |
||||||
|
</div> |
||||||
|
{/* course lessons */} |
||||||
|
{chapter.lessons.map((lesson, i) => ( |
||||||
|
<div |
||||||
|
className="flex flex-row items-center justify-around" |
||||||
|
key={i} |
||||||
|
> |
||||||
|
{/* right div dot dot */} |
||||||
|
<div |
||||||
|
className="flex items-center relative flex-col " |
||||||
|
style={{ width: "10%", transform: "translateY(30px)" }} |
||||||
|
> |
||||||
|
<div |
||||||
|
className={`flex justify-center items-center w-4 h-4 rounded-full
|
||||||
|
${selectedLesson === lesson ? "bg-red-600" : "bg-blue-600"}, |
||||||
|
${lesson.passed ? "bg-red-600" : "bg-blue-600"} |
||||||
|
`}
|
||||||
|
></div> |
||||||
|
<span |
||||||
|
className="w-1" |
||||||
|
style={{ |
||||||
|
borderRight: "2px dotted yellow", |
||||||
|
transform: "translateX(-1px)", |
||||||
|
height: "65px", |
||||||
|
}} |
||||||
|
></span> |
||||||
|
</div> |
||||||
|
{/* left div content */} |
||||||
|
<div |
||||||
|
className={`mt-2 bg-white border border-blue-600 flex flex-col rounded-md cursor-pointer transition duration-200 ease-in-out group hover:bg-blue-600
|
||||||
|
${selectedLesson === lesson ? "bg-blue-600" : ""}`}
|
||||||
|
style={{ width: "80%" }} |
||||||
|
onClick={() => setSelectedLesson(lesson)} |
||||||
|
> |
||||||
|
{/* top */} |
||||||
|
<div className="flex flex-row items-center justify-between p-2"> |
||||||
|
<p |
||||||
|
className={`text-sm text-blue-500 group-hover:text-white
|
||||||
|
${selectedLesson === lesson ? "text-red-600" : ""}`}
|
||||||
|
> |
||||||
|
{lesson.title} |
||||||
|
</p> |
||||||
|
<span |
||||||
|
className={`text-xs text-blue-500 group-hover:text-white border-r border-blue-200 pr-1
|
||||||
|
${selectedLesson === lesson ? "text-red-600" : ""}`}
|
||||||
|
> |
||||||
|
{lesson.duration} |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
{/* divider */} |
||||||
|
<div |
||||||
|
className={`border-t border-blue-600 group-hover:border-white ${ |
||||||
|
selectedLesson === lesson ? "border-red-600" : "" |
||||||
|
}`}
|
||||||
|
></div> |
||||||
|
{/* bottom */} |
||||||
|
<span |
||||||
|
className={`text-xs text-center text-blue-500 group-hover:text-white p-2
|
||||||
|
${selectedLesson === lesson ? "text-red-600" : ""}`}
|
||||||
|
> |
||||||
|
{lesson.play} |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
))} |
||||||
|
{/* blue left border */} |
||||||
|
<div className="absolute top-1/2 left-0.5 transform -translate-x-1/2 -translate-y-1/2 bg-blue-600 w-1 h-20 rounded"></div> |
||||||
|
</div> |
||||||
|
</section> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default CourseChapter; |
||||||
|
|
||||||
|
CourseChapter.defaultProps = { |
||||||
|
chapters: [ |
||||||
|
{ |
||||||
|
title: "فصل اول: مباحث جوشش مواد مذاب در مرکز", |
||||||
|
duration: "2:30:13", |
||||||
|
lessons: [ |
||||||
|
{ |
||||||
|
title: "آیا گوگل از ما دزدی میکند؟", |
||||||
|
duration: "14:30", |
||||||
|
play: "پخش", |
||||||
|
passed: true, |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: "چگونگی ساخت نیروگاه های برقی", |
||||||
|
duration: "22:31", |
||||||
|
play: "در حال پخش", |
||||||
|
passed: true, |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: "آیا از اینترنت می توان درآمد داشت؟", |
||||||
|
duration: "10:09", |
||||||
|
play: "نمایش", |
||||||
|
passed: false, |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: "زمین سبز و آسمان آبی", |
||||||
|
duration: "56:09", |
||||||
|
play: "نمایش", |
||||||
|
passed: false, |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
@ -0,0 +1,62 @@ |
|||||||
|
import React from "react"; |
||||||
|
|
||||||
|
import "./index.scss"; |
||||||
|
|
||||||
|
import productImg from "./productImg.svg"; |
||||||
|
|
||||||
|
const ProductImage = ({ images }) => { |
||||||
|
console.log(images.length); |
||||||
|
|
||||||
|
return ( |
||||||
|
<section className="bg-white m-10 border-2 border-gray-300 p-4 rounded-lg"> |
||||||
|
<div className="w-4/12 flex flex-row h-72"> |
||||||
|
<div className="flex flex-col items-center justify-between ml-4 w-16"> |
||||||
|
{images.slice(0, 4).map((image, index) => ( |
||||||
|
<div className="relative"> |
||||||
|
<img |
||||||
|
key={index} |
||||||
|
src={productImg} |
||||||
|
alt="" |
||||||
|
className={`rounded-sm h-full`} |
||||||
|
// style={{ height: "calc(100% - 8px)" }}
|
||||||
|
// style={{ height: "calc(100% - 8px)" }}
|
||||||
|
/> |
||||||
|
{/* این خط پایین که نوشتم برای این است که ایندکس که جنسش استرینگ است رو به نامبر تبدیل کند */} |
||||||
|
{Number(index) === 3 && ( |
||||||
|
<div className="absolute w-full h-full bg-black bg-opacity-30 left-0 top-0 flex justify-center items-center text-white"> |
||||||
|
<strong>+ {images.length - 3}</strong> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
<img src={productImg} alt="" className="h-full" /> |
||||||
|
</div> |
||||||
|
</section> |
||||||
|
); |
||||||
|
}; |
||||||
|
// {[0, 1, 2, 3, 4].map((item, index) => (
|
||||||
|
|
||||||
|
// ))}
|
||||||
|
|
||||||
|
export default ProductImage; |
||||||
|
|
||||||
|
ProductImage.defaultProps = { |
||||||
|
images: [ |
||||||
|
{ |
||||||
|
image: productImg, |
||||||
|
}, |
||||||
|
{ |
||||||
|
image: productImg, |
||||||
|
}, |
||||||
|
{ |
||||||
|
image: productImg, |
||||||
|
}, |
||||||
|
{ |
||||||
|
image: productImg, |
||||||
|
}, |
||||||
|
{ |
||||||
|
image: productImg, |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
@ -0,0 +1,9 @@ |
|||||||
|
.no-scrollbar::-webkit-scrollbar { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
/* Hide scrollbar for IE, Edge and Firefox */ |
||||||
|
.no-scrollbar { |
||||||
|
-ms-overflow-style: none; /* IE and Edge */ |
||||||
|
scrollbar-width: none; /* Firefox */ |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 39 KiB |
|
After Width: | Height: | Size: 39 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
@ -0,0 +1,120 @@ |
|||||||
|
import React from "react"; |
||||||
|
|
||||||
|
import arrow from "./arrow-icon.svg"; |
||||||
|
import delivery from "./delivery-icon.svg"; |
||||||
|
import checked from "./icon1.svg"; |
||||||
|
import circle from "./info-circle.svg"; |
||||||
|
import shield from "./shield-tick.svg"; |
||||||
|
import tick from "./tick-circle.svg"; |
||||||
|
import shop from "./icon-shop.svg"; |
||||||
|
|
||||||
|
const ProductStatusCard = ({ items, productPrice, discountPrice }) => { |
||||||
|
console.log(items.alertIcon); |
||||||
|
|
||||||
|
return ( |
||||||
|
<section className="bg-white m-10 w-full sm:w-8/12 md:w-5/12 lg:w-3/12 p-5"> |
||||||
|
<div className="bg-gray-200 rounded px-4 py-2"> |
||||||
|
{items.map((item, index) => ( |
||||||
|
<div> |
||||||
|
<div |
||||||
|
className="flex flex-row items-center justify-between mt-3 mb-3" |
||||||
|
key={index} |
||||||
|
> |
||||||
|
<div className="flex flex-row items-center"> |
||||||
|
<img src={item.icon} alt="" className="w-8" /> |
||||||
|
<div className="flex flex-col mr-3"> |
||||||
|
<p className="text-sm"> |
||||||
|
<span className="font-bold">{item.subtitle}</span> |
||||||
|
{item.title} |
||||||
|
</p> |
||||||
|
{item.customerSatisfaction && ( |
||||||
|
<p className="text-xs mt-1"> |
||||||
|
رضایت خریداران: |
||||||
|
<span className="font-bold text-green-500 mr-2"> |
||||||
|
{item.customerSatisfactionPercent} |
||||||
|
</span> |
||||||
|
</p> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
{item.alertIcon && <img src={circle} alt="" className="w-5" />} |
||||||
|
</div> |
||||||
|
<div className="border-b border-gray-300"></div> |
||||||
|
</div> |
||||||
|
))} |
||||||
|
<div className="flex flex-col items-center"> |
||||||
|
<p className="text-lg text-blue-600 mt-5 mb-2"> |
||||||
|
{productPrice} |
||||||
|
<span className="text-sm text-gray-700 font-light">تومان</span> |
||||||
|
</p> |
||||||
|
<p className="text-xs font-light text-gray-600"> |
||||||
|
با خرید این کالا |
||||||
|
<span>{discountPrice}</span> |
||||||
|
صرفه جویی کنید |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
<div className="w-full flex flex-col items-center"> |
||||||
|
<button className="w-6/12 mt-5 mb-2 rounded bg-blue-400 text-white p-2 text-sm hover:bg-blue-600 transtition ease-linear duration-300"> |
||||||
|
افزودن به سبد خرید |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className="bg-gray-200 rounded px-4 py-2 mt-2 flex flex-row items-center"> |
||||||
|
<div> |
||||||
|
<img src={arrow} alt="" className="w-20 h-20" /> |
||||||
|
</div> |
||||||
|
<div className="flex flex-col mr-5"> |
||||||
|
<h2 className="text-sm font-bold text-blue-900"> |
||||||
|
بازگشت بی چون و چرا |
||||||
|
</h2> |
||||||
|
<p className="text-xs mt-2 leading-5 text-justify"> |
||||||
|
از اونجایی که ما خیلی خوب هستیم و دوستون داریم در صورتی که از کالایی |
||||||
|
خوشتون نیومده میتونید بی قید و شرط پس بدید |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</section> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default ProductStatusCard; |
||||||
|
|
||||||
|
ProductStatusCard.defaultProps = { |
||||||
|
items: [ |
||||||
|
{ |
||||||
|
icon: tick, |
||||||
|
title: "توصیه به خرید توسط 4420 نفر", |
||||||
|
subtitle: null, |
||||||
|
alertIcon: false, |
||||||
|
customerSatisfaction: false, |
||||||
|
customerSatisfactionPercent: null, |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: shop, |
||||||
|
title: " آپادانا ", |
||||||
|
subtitle: " فروشنده", |
||||||
|
alertIcon: true, |
||||||
|
customerSatisfaction: true, |
||||||
|
customerSatisfactionPercent: " 91.5 ", |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: delivery, |
||||||
|
title: " 20 روز کاری پس از سفارش ", |
||||||
|
subtitle: "زمان ارسال", |
||||||
|
alertIcon: false, |
||||||
|
customerSatisfaction: false, |
||||||
|
customerSatisfactionPercent: null, |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: shield, |
||||||
|
title: "اصالت و سلامت فیزیکی", |
||||||
|
subtitle: "گارانتی ", |
||||||
|
alertIcon: true, |
||||||
|
customerSatisfaction: false, |
||||||
|
customerSatisfactionPercent: null, |
||||||
|
}, |
||||||
|
], |
||||||
|
|
||||||
|
productPrice: " 56/894/000 ", |
||||||
|
discountPrice: " 540.000 ", |
||||||
|
}; |
||||||
|
After Width: | Height: | Size: 829 B |
|
After Width: | Height: | Size: 864 B |
|
After Width: | Height: | Size: 652 B |
@ -0,0 +1,51 @@ |
|||||||
|
import React, { useState } from "react"; |
||||||
|
import Table from "./table"; |
||||||
|
|
||||||
|
const ProductTab = ({ tabs }) => { |
||||||
|
const [selectedTab, setSelectedTab] = useState(null); |
||||||
|
|
||||||
|
return ( |
||||||
|
<section className="m-10"> |
||||||
|
<div className="rounded bg-white"> |
||||||
|
<ul className="flex flex-row"> |
||||||
|
{tabs.map((tab, index) => ( |
||||||
|
<li |
||||||
|
className={`text-sm m-4 cursor-pointer hover:text-blue-400 ${ |
||||||
|
selectedTab === tab ? "text-blue-600" : "" |
||||||
|
}`}
|
||||||
|
onClick={() => setSelectedTab(tab)} |
||||||
|
key={index} |
||||||
|
> |
||||||
|
{tab.title} |
||||||
|
</li> |
||||||
|
))} |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
<div className={`rounded w-full flex items-center ${selectedTab?.bg}`}> |
||||||
|
{selectedTab?.components} |
||||||
|
</div> |
||||||
|
</section> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default ProductTab; |
||||||
|
|
||||||
|
ProductTab.defaultProps = { |
||||||
|
tabs: [ |
||||||
|
{ |
||||||
|
title: "مشخصات", |
||||||
|
components: <Table />, |
||||||
|
bg: "bg-transparent", |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: "پرسش", |
||||||
|
components: "نقد و بررسی", |
||||||
|
bg: "bg-blue-500", |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: "سوال", |
||||||
|
components: "پرسش و پاسخ", |
||||||
|
bg: "bg-yellow-500", |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
@ -0,0 +1,47 @@ |
|||||||
|
import React from "react"; |
||||||
|
|
||||||
|
const persian = { |
||||||
|
weight: "وزن", |
||||||
|
pageNumber: "تعداد صفحات", |
||||||
|
pageType: "نوع کاغذ", |
||||||
|
bookNumber: "شماره شابک", |
||||||
|
publisher: "انتشارات", |
||||||
|
author: "نویسنده", |
||||||
|
bookType: "قطع", |
||||||
|
publishedYear: "سال انتشار", |
||||||
|
}; |
||||||
|
|
||||||
|
const Table = ({ specifications }) => { |
||||||
|
return ( |
||||||
|
<ul className="w-full"> |
||||||
|
{Object.keys(specifications).map((specification, index) => ( |
||||||
|
<li className="flex my-3"> |
||||||
|
<div |
||||||
|
className="bg-white rounded p-3 ml-2 text-blue-600 text-sm" |
||||||
|
style={{ flex: 2 }} |
||||||
|
> |
||||||
|
{persian[specification]} |
||||||
|
</div> |
||||||
|
<div className="bg-white rounded p-3 text-sm" style={{ flex: 8 }}> |
||||||
|
{specifications[specification]} |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
))} |
||||||
|
</ul> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Table; |
||||||
|
|
||||||
|
Table.defaultProps = { |
||||||
|
specifications: { |
||||||
|
weight: "1 کیلوگرم", |
||||||
|
pageNumber: "400 صفحه", |
||||||
|
pageType: "گلاسه", |
||||||
|
bookNumber: "124900985340561870112312499", |
||||||
|
publisher: "رزمندگان", |
||||||
|
author: "یک نویسنده گمنام", |
||||||
|
bookType: "خشتی", |
||||||
|
publishedYear: "1399", |
||||||
|
}, |
||||||
|
}; |
||||||
|
After Width: | Height: | Size: 499 B |
|
After Width: | Height: | Size: 434 B |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1,159 @@ |
|||||||
|
import React from "react"; |
||||||
|
|
||||||
|
import "./index.scss"; |
||||||
|
|
||||||
|
import downwardArrow from "./arrow-down.svg"; |
||||||
|
import profilePic from "./profile-pic.svg"; |
||||||
|
import element from "./element-4.svg"; |
||||||
|
import folderOpen from "./folder-open.svg"; |
||||||
|
import wallet from "./wallet-money.svg"; |
||||||
|
import logout from "./logout.svg"; |
||||||
|
import messageText from "./message-text.svg"; |
||||||
|
import moon from "./moon.svg"; |
||||||
|
import sms from "./sms.svg"; |
||||||
|
import userEdit from "./user-edit.svg"; |
||||||
|
import Switch from "../Switch"; |
||||||
|
|
||||||
|
const SidebarMenu = ({ items, buttons }) => { |
||||||
|
return ( |
||||||
|
<section> |
||||||
|
<div |
||||||
|
style={{ width: "20%" }} |
||||||
|
className="bg-white p-5 h-screen shadow-sm border border-gray-300 rounded overflow-y-scroll no-scrollbar" |
||||||
|
> |
||||||
|
{/* profile */} |
||||||
|
<div className="flex flex-row items-center"> |
||||||
|
<img src={profilePic} alt="" className="w-12 rounded-full" /> |
||||||
|
<p className="text-blue-600 font-bold text-base flex-1 mx-2"> |
||||||
|
کامران کوهستانی شیرازی |
||||||
|
</p> |
||||||
|
<img src={downwardArrow} alt="" className="w-5" /> |
||||||
|
</div> |
||||||
|
{/* divider */} |
||||||
|
<div className="border border-gray-200 mt-5"></div> |
||||||
|
<p className="text-xs text-gray-400 my-4">منوی کاربری</p> |
||||||
|
{/* items */} |
||||||
|
{items.map((item, i) => ( |
||||||
|
<div className="flex flex-col item-center"> |
||||||
|
{/* menu items */} |
||||||
|
<div |
||||||
|
key={i} |
||||||
|
className="flex flex-row items-center cursor-pointer hover:bg-blue-100 rounded-md p-2" |
||||||
|
> |
||||||
|
<img src={item.icon} alt="" /> |
||||||
|
<p className="text-blue-600 text-sm flex-1 mx-2">{item.title}</p> |
||||||
|
{item.notification && ( |
||||||
|
<div className=" w-6 h-6 bg-blue-700 text-center rounded-full flex flex-col items-center justify-center"> |
||||||
|
<span className=" text-white text-xs"> |
||||||
|
{item.notification} |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
{/* sub items */} |
||||||
|
{item.subItems.map((subItem, i) => ( |
||||||
|
<div |
||||||
|
key={i} |
||||||
|
className="flex flex-row items-center cursor-pointer hover:bg-gray-100 rounded-md p-2" |
||||||
|
> |
||||||
|
{subItem.name && ( |
||||||
|
<p className="text-gray-400 text-xs flex-1 mr-4"> |
||||||
|
{subItem.name} |
||||||
|
</p> |
||||||
|
)} |
||||||
|
{subItem.num && ( |
||||||
|
<div className=" w-6 h-6 bg-yellow-400 text-center rounded-full flex flex-col items-center justify-center"> |
||||||
|
<span className=" text-white text-xs">{subItem.num}</span> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
))} |
||||||
|
{/* buttons */} |
||||||
|
{buttons.map((button, i) => ( |
||||||
|
<div className="flex flex-col item-center"> |
||||||
|
{/* divider */} |
||||||
|
<div className="border border-gray-200 my-1"></div> |
||||||
|
<div |
||||||
|
key={i} |
||||||
|
className="flex flex-row items-center cursor-pointer hover:bg-blue-100 rounded-md p-2" |
||||||
|
> |
||||||
|
<img src={button.icon} alt="" /> |
||||||
|
<p className="text-blue-600 text-sm flex-1 mx-2"> |
||||||
|
{button.title} |
||||||
|
</p> |
||||||
|
{button.leftIcon && <Switch />} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</section> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default SidebarMenu; |
||||||
|
|
||||||
|
SidebarMenu.defaultProps = { |
||||||
|
items: [ |
||||||
|
{ |
||||||
|
icon: element, |
||||||
|
title: "داشبورد مدیریت", |
||||||
|
notification: null, |
||||||
|
subItems: [], |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: folderOpen, |
||||||
|
title: "پروژه ها", |
||||||
|
notification: null, |
||||||
|
subItems: [ |
||||||
|
{ name: "افزدون پروژه", num: null }, |
||||||
|
{ name: "مدیریت پروژه ها", num: null }, |
||||||
|
{ name: "پروژه های حذف شده", num: null }, |
||||||
|
], |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: wallet, |
||||||
|
title: "مالی و حسابداری", |
||||||
|
notification: null, |
||||||
|
subItems: [ |
||||||
|
{ name: "تمدید سرویس", num: null }, |
||||||
|
{ name: "بسته های اشتراکی", num: null }, |
||||||
|
{ name: "فاکتور ها", num: 1 }, |
||||||
|
{ name: "درخواست تسویه حساب", num: null }, |
||||||
|
], |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: userEdit, |
||||||
|
title: "دیدگاه ها", |
||||||
|
notification: null, |
||||||
|
subItems: [], |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: userEdit, |
||||||
|
title: "حساب کاربری", |
||||||
|
notification: null, |
||||||
|
subItems: [{ name: "ویرایش حساب کاربری", num: null }], |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: sms, |
||||||
|
title: "پشتیبانی", |
||||||
|
notification: 7, |
||||||
|
subItems: [ |
||||||
|
{ name: "تیکت ها", num: null }, |
||||||
|
{ name: "ارسال تیکت جدید", num: null }, |
||||||
|
{ name: "ویکی", num: null }, |
||||||
|
], |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: messageText, |
||||||
|
title: "متستندات", |
||||||
|
notification: null, |
||||||
|
subItems: [{ name: "API توسعه دهندگان", num: null }], |
||||||
|
}, |
||||||
|
], |
||||||
|
buttons: [ |
||||||
|
{ icon: moon, title: "حالت شب", leftIcon: moon }, |
||||||
|
{ icon: logout, title: "خروج از حساب کاربری", leftIcon: null }, |
||||||
|
], |
||||||
|
}; |
||||||
@ -0,0 +1,9 @@ |
|||||||
|
.no-scrollbar::-webkit-scrollbar { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
/* Hide scrollbar for IE, Edge and Firefox */ |
||||||
|
.no-scrollbar { |
||||||
|
-ms-overflow-style: none; /* IE and Edge */ |
||||||
|
scrollbar-width: none; /* Firefox */ |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 943 B |
|
After Width: | Height: | Size: 874 B |
|
After Width: | Height: | Size: 597 B |
|
After Width: | Height: | Size: 48 KiB |
|
After Width: | Height: | Size: 755 B |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
@ -0,0 +1,13 @@ |
|||||||
|
import React from "react"; |
||||||
|
import "./index.scss"; |
||||||
|
|
||||||
|
const Switch = () => { |
||||||
|
return ( |
||||||
|
<div className="switch"> |
||||||
|
<input type="checkbox" id="toggle" /> |
||||||
|
<label for="toggle"></label> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Switch; |
||||||
@ -0,0 +1,52 @@ |
|||||||
|
// *, *:after, *:before { |
||||||
|
// // box-sizing: border-box; |
||||||
|
// } |
||||||
|
|
||||||
|
// body { |
||||||
|
// min-height: 100vh; |
||||||
|
// display: flex; |
||||||
|
// align-items: center; |
||||||
|
// justify-content: center; |
||||||
|
// } |
||||||
|
|
||||||
|
.switch { |
||||||
|
position: relative; |
||||||
|
input[type="checkbox"] { |
||||||
|
visibility: hidden; |
||||||
|
position : absolute; |
||||||
|
&:checked + label { |
||||||
|
transform: rotate(0deg); |
||||||
|
background-color: #000; |
||||||
|
&:before { |
||||||
|
transform: translateX(35.5px); |
||||||
|
background-color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
label { |
||||||
|
display: flex; |
||||||
|
width: 70px; |
||||||
|
height: 34px; |
||||||
|
border: 3px solid; |
||||||
|
border-radius: 99em; |
||||||
|
position: relative; |
||||||
|
transition: transform 0.3s ease-in-out; |
||||||
|
transform-origin: 50% 50%; |
||||||
|
cursor: pointer; |
||||||
|
|
||||||
|
&:before { |
||||||
|
transition: transform 0.3s ease; |
||||||
|
transition-delay: 0s; |
||||||
|
content: ""; |
||||||
|
display: block; |
||||||
|
position: absolute; |
||||||
|
width: 24px; |
||||||
|
height: 24px; |
||||||
|
background-color: #000; |
||||||
|
border-radius: 50%; |
||||||
|
top: 2px; |
||||||
|
left: 3px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
Binary file not shown.
@ -0,0 +1,323 @@ |
|||||||
|
import React, { useEffect, useState } from "react"; |
||||||
|
|
||||||
|
import StarRating from "../starRating/StarRating"; |
||||||
|
import ReactTooltip from "react-tooltip"; |
||||||
|
|
||||||
|
import watermelon from "../../assets/images/watermelon.png"; |
||||||
|
import video from "./danovin.mp4"; |
||||||
|
|
||||||
|
import discountImg from "../../assets/icons/discount.png"; |
||||||
|
|
||||||
|
import heart from "../../assets/icons/vuesax-linear-heart.svg"; |
||||||
|
import YellowDotIcon from "../../assets/icons/yellowDotIcon.svg"; |
||||||
|
import RedDotIcon from "../../assets/icons/redDotIcon.svg"; |
||||||
|
import PurpleDotIcon from "../../assets/icons/purpleDotIcon.svg"; |
||||||
|
import LightBlueDotIcon from "../../assets/icons/lightBlueDotIcon.svg"; |
||||||
|
import whitePlayIcon from "../../assets/icons/white-play-button-icon.svg"; |
||||||
|
|
||||||
|
const VodProduct = ({ |
||||||
|
productColor, |
||||||
|
colors, |
||||||
|
likeBtn, |
||||||
|
discount, |
||||||
|
discountPricePercent, |
||||||
|
discountPrice, |
||||||
|
productContent, |
||||||
|
star, |
||||||
|
productTags, |
||||||
|
priceDirection, |
||||||
|
productTitleAlignment, |
||||||
|
priceHolder, |
||||||
|
productCat, |
||||||
|
rangeHolder, |
||||||
|
priceTitle, |
||||||
|
addToCartHolder, |
||||||
|
productTitleCategoryHolder, |
||||||
|
productTitleCategoryHolderAlignment, |
||||||
|
priceStarHolder, |
||||||
|
priceStarAlignment, |
||||||
|
rangeWidth, |
||||||
|
}) => { |
||||||
|
const [progressFlag, setProgressFlag] = useState(false); |
||||||
|
const [openModal, setOpenModal] = useState(false); |
||||||
|
// const [closeModal, setCloseModal] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
setTimeout(() => { |
||||||
|
setProgressFlag(true); |
||||||
|
}, 1000); |
||||||
|
}); |
||||||
|
return ( |
||||||
|
<section className="mx-auto p-0 sm:p-4 bg-white rounded-md shadow-md my-8"> |
||||||
|
{/* product UI Design */} |
||||||
|
<div className="flex flex-wrap sm:flex-nowrap justify-around"> |
||||||
|
<div className="w-full flex flex-wrap items-center justify-around my-10 px-1 sm:px-4"> |
||||||
|
<div |
||||||
|
className={`w-full sm:w-60 md:w-96 mx-1 rounded-lg shadow-sm p-2 my-3 border border-grayBorderColor`} |
||||||
|
> |
||||||
|
{/* product image */} |
||||||
|
<div |
||||||
|
className="group transition ease-in-out delay-150 duration-300 w-full relative flex items-center justify-center cursor-pointer" |
||||||
|
style={{ |
||||||
|
backgroundImage: `url(${watermelon})`, |
||||||
|
backgroundSize: "100% 100%", |
||||||
|
backgroundRepeat: "no-repeat", |
||||||
|
minHeight: "180px", |
||||||
|
}} |
||||||
|
onClick={() => setOpenModal(true)} |
||||||
|
> |
||||||
|
{/* icons on image */} |
||||||
|
<div className="absolute left-2 top-2"> |
||||||
|
{discountPricePercent && ( |
||||||
|
<div className="bg-discountPriceBg rounded-md px-2 py-2 mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer"> |
||||||
|
<p className="text-discountPriceTitle font-bold text-xs"> |
||||||
|
23<span>%</span> |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
{likeBtn && ( |
||||||
|
<div className="bg-likeBtnBg rounded-md p-1 flex justify-center mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer"> |
||||||
|
<img src={heart} alt="" className="w-5" /> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
{discount && ( |
||||||
|
<div className="rounded-md mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer"> |
||||||
|
<img src={discountImg} alt="" className="w-full" /> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
{/* play button */} |
||||||
|
<div |
||||||
|
className={` rounded-full p-4 group-hover:scale-125 transform transition-transform duration-300 bg-playButtonIcon`} |
||||||
|
onClick={() => setOpenModal(true)} |
||||||
|
> |
||||||
|
<img |
||||||
|
src={whitePlayIcon} |
||||||
|
alt="" |
||||||
|
className=" w-5 h-5" |
||||||
|
onClick={() => setOpenModal(true)} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
{/* select Color */} |
||||||
|
{productColor && ( |
||||||
|
<div className="flex items-center absolute right-2 bottom-2"> |
||||||
|
{/* {colors.map((color,index))} */} |
||||||
|
<img |
||||||
|
src={YellowDotIcon} |
||||||
|
alt="" |
||||||
|
data-tip="زرد" |
||||||
|
className="w-3 h-3 ml-1 cursor-pointer" |
||||||
|
/> |
||||||
|
<ReactTooltip place="top" type="dark" effect="float" /> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
{/* product content */} |
||||||
|
<div className="px-2"> |
||||||
|
{/* content */} |
||||||
|
<div className="mt-4 flex flex-col"> |
||||||
|
<div |
||||||
|
className={`flex ${productTitleCategoryHolder} ${productTitleCategoryHolderAlignment} justify-between `} |
||||||
|
> |
||||||
|
<h2 |
||||||
|
className={`leading-4 text-base mb-2 font-semibold text-darkCrimsonTextColor ${productTitleAlignment}`} |
||||||
|
> |
||||||
|
نسخه چاپی علموم تجربه هفتم |
||||||
|
</h2> |
||||||
|
{productCat && ( |
||||||
|
<span |
||||||
|
className={`text-xs font-light text-darkCrimsonTextColor`} |
||||||
|
> |
||||||
|
پایه سوم |
||||||
|
</span> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
{productContent && ( |
||||||
|
<p |
||||||
|
className={`text-justify text-sm leading-6 text-productContent`} |
||||||
|
> |
||||||
|
این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های |
||||||
|
خوب دیگری نیز دارد. |
||||||
|
</p> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
{/* price */} |
||||||
|
<div |
||||||
|
className={`flex ${priceStarHolder} ${priceStarAlignment} justify-between mt-2`} |
||||||
|
> |
||||||
|
{priceHolder && ( |
||||||
|
<div |
||||||
|
className={`flex items-center justify-between ${priceDirection}`} |
||||||
|
> |
||||||
|
{/* price */} |
||||||
|
<div className=""> |
||||||
|
<div |
||||||
|
className={`${ |
||||||
|
priceDirection.indexOf("col") !== -1 |
||||||
|
? "inline" |
||||||
|
: "flex" |
||||||
|
}`}
|
||||||
|
> |
||||||
|
{priceTitle && ( |
||||||
|
<span className="text-xs text-borderColor ml-2"> |
||||||
|
قیمت |
||||||
|
</span> |
||||||
|
)} |
||||||
|
{discountPrice && ( |
||||||
|
<p className="line-through text-xs text-borderColor"> |
||||||
|
<span> قیمت</span> 140<span>تومان</span> |
||||||
|
</p> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
<p |
||||||
|
className={`text-sm font-semibold inline text-productPrice`} |
||||||
|
> |
||||||
|
111.000<span>تومان</span> |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
{/* add to cart */} |
||||||
|
{addToCartHolder && ( |
||||||
|
<button |
||||||
|
className={`rounded-md px-2 py-3 border text-xs text-productPrice mt-2 hover:bg-darkCrimsonBgColor hover:text-white active:bg-rangeFillBgColor transition duration-500 ${ |
||||||
|
priceDirection.indexOf("col") !== -1 ? "w-full" : "" |
||||||
|
}`}
|
||||||
|
> |
||||||
|
اضافه کردن به سبد خرید |
||||||
|
</button> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
)} |
||||||
|
{star && ( |
||||||
|
<div className="flex items-center"> |
||||||
|
<StarRating /> |
||||||
|
<span className="text-xs text-productContent font-bold mr-2"> |
||||||
|
39 |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
{productTags && ( |
||||||
|
<div className="mt-2 flex flex-wrap"> |
||||||
|
<button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs"> |
||||||
|
ارسال رایگان |
||||||
|
</button> |
||||||
|
<button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs"> |
||||||
|
برچسب های دیگر |
||||||
|
</button> |
||||||
|
<button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs"> |
||||||
|
دسته بندی به صورت کادو |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
{rangeHolder && ( |
||||||
|
<div className="bg-rangeBgColor h-3 w-full rounded mt-2"> |
||||||
|
<div |
||||||
|
className={`bg-rangeFillBgColor h-3 rounded duration-500`} |
||||||
|
style={{ |
||||||
|
width: progressFlag ? rangeWidth : 0, |
||||||
|
}} |
||||||
|
></div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div |
||||||
|
className={`cursor-pointer w-screen h-screen backdrop-filter backdrop-blur-lg flex items-center justify-center bg-gray-900 fixed left-0 top-0 duration-1000 transition-all
|
||||||
|
${openModal ? "opacity-80" : "opacity-10 pointer-events-none"} |
||||||
|
`}
|
||||||
|
onClick={() => setOpenModal(false)} |
||||||
|
> |
||||||
|
<video |
||||||
|
controls |
||||||
|
className={`border transition-all duration-1000
|
||||||
|
${openModal ? "opacity-100" : "opacity-0 pointer-events-none"} |
||||||
|
`}
|
||||||
|
src={video} |
||||||
|
type="video/mp4" |
||||||
|
onClick={(e) => e.stopPropagation()} |
||||||
|
></video> |
||||||
|
</div> |
||||||
|
</section> |
||||||
|
); |
||||||
|
}; |
||||||
|
// hover:-translate-y-2
|
||||||
|
export default VodProduct; |
||||||
|
|
||||||
|
// text colors i used for product title:
|
||||||
|
// text-darkCrimsonTextColor
|
||||||
|
// text-productTitle
|
||||||
|
|
||||||
|
// text color i used for product excerpt:
|
||||||
|
// text-productContent
|
||||||
|
|
||||||
|
// text color i used for product cat:
|
||||||
|
// text-darkCrimsonTextColor
|
||||||
|
|
||||||
|
// bg color i used for play button icon:
|
||||||
|
// bg-playButtonIcon
|
||||||
|
// bg-playButtonIcon2
|
||||||
|
|
||||||
|
VodProduct.defaultProps = { |
||||||
|
colors: [ |
||||||
|
{ |
||||||
|
icon: YellowDotIcon, |
||||||
|
dataType: "زرد", |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: RedDotIcon, |
||||||
|
dataType: "قرمز", |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: PurpleDotIcon, |
||||||
|
dataType: "بنفش", |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: LightBlueDotIcon, |
||||||
|
dataType: "آبی", |
||||||
|
}, |
||||||
|
|
||||||
|
LightBlueDotIcon, |
||||||
|
], |
||||||
|
|
||||||
|
// icons on product image
|
||||||
|
productColor: true, |
||||||
|
likeBtn: true, |
||||||
|
discount: true, |
||||||
|
discountPricePercent: true, |
||||||
|
// product price
|
||||||
|
discountPrice: true, |
||||||
|
priceHolder: true, |
||||||
|
priceTitle: false, |
||||||
|
|
||||||
|
productContent: false, |
||||||
|
star: true, |
||||||
|
productTags: false, |
||||||
|
productCat: true, |
||||||
|
rangeHolder: true, |
||||||
|
|
||||||
|
addToCartHolder: false, |
||||||
|
|
||||||
|
productTitleAlignment: "text-justify", |
||||||
|
|
||||||
|
// برای درصد دادن به عرض رنج
|
||||||
|
rangeWidth: "75%", |
||||||
|
|
||||||
|
priceDirection: "flex-row", |
||||||
|
|
||||||
|
productTitleCategoryHolder: "flex-row", |
||||||
|
productTitleCategoryHolderAlignment: "items-center", |
||||||
|
|
||||||
|
// برای اینکه بتونیم ستاره هارو بالا قیمت بزاریم و دیزاین را مثل کتاب ها در بیاریم
|
||||||
|
// یادمون باشه که حتما رویه
|
||||||
|
// flex-col-reverse
|
||||||
|
// بزاریم
|
||||||
|
|
||||||
|
// دیفالتش باید این باشه:
|
||||||
|
// priceStarHolder: flex-row
|
||||||
|
priceStarHolder: "flex-row", |
||||||
|
// دیفالتش باید این باشه:
|
||||||
|
// priceStarHolder: items-center
|
||||||
|
priceStarAlignment: "items-center", |
||||||
|
}; |
||||||
Binary file not shown.
@ -0,0 +1,344 @@ |
|||||||
|
import React, { useEffect, useState } from "react"; |
||||||
|
|
||||||
|
import StarRating from "../starRating/StarRating"; |
||||||
|
import ReactTooltip from "react-tooltip"; |
||||||
|
|
||||||
|
import watermelon from "../../assets/images/watermelon.png"; |
||||||
|
import video from "./danovin.mp4"; |
||||||
|
|
||||||
|
import discountImg from "../../assets/icons/discount.png"; |
||||||
|
|
||||||
|
import heart from "../../assets/icons/vuesax-linear-heart.svg"; |
||||||
|
import YellowDotIcon from "../../assets/icons/yellowDotIcon.svg"; |
||||||
|
import RedDotIcon from "../../assets/icons/redDotIcon.svg"; |
||||||
|
import PurpleDotIcon from "../../assets/icons/purpleDotIcon.svg"; |
||||||
|
import LightBlueDotIcon from "../../assets/icons/lightBlueDotIcon.svg"; |
||||||
|
import whitePlayIcon from "../../assets/icons/white-play-button-icon.svg"; |
||||||
|
|
||||||
|
const VodProduct = ({ |
||||||
|
productColor, |
||||||
|
colors, |
||||||
|
likeBtn, |
||||||
|
discount, |
||||||
|
discountPricePercent, |
||||||
|
discountPrice, |
||||||
|
productContent, |
||||||
|
star, |
||||||
|
productTags, |
||||||
|
priceDirection, |
||||||
|
productTitleAlignment, |
||||||
|
priceHolder, |
||||||
|
productCat, |
||||||
|
rangeHolder, |
||||||
|
priceTitle, |
||||||
|
addToCartHolder, |
||||||
|
productTitleCategoryHolder, |
||||||
|
productTitleCategoryHolderAlignment, |
||||||
|
priceStarHolder, |
||||||
|
priceStarAlignment, |
||||||
|
rangeWidth, |
||||||
|
}) => { |
||||||
|
const [progressFlag, setProgressFlag] = useState(false); |
||||||
|
// const [openModal, setOpenModal] = useState(false);
|
||||||
|
useEffect(() => { |
||||||
|
setTimeout(() => { |
||||||
|
setProgressFlag(true); |
||||||
|
}, 1000); |
||||||
|
}); |
||||||
|
return ( |
||||||
|
<section className="mx-auto p-0 sm:p-4 bg-white rounded-md shadow-md my-8"> |
||||||
|
رویه باتن پلی / عکس کلیک کنید |
||||||
|
{/* product UI Design */} |
||||||
|
<div className="flex flex-wrap sm:flex-nowrap justify-around"> |
||||||
|
<div className="w-full flex flex-wrap items-center justify-around my-10 px-1 sm:px-4"> |
||||||
|
<div |
||||||
|
className={`w-full sm:w-60 md:w-96 mx-1 rounded-lg shadow-sm p-2 my-3 border border-grayBorderColor`} |
||||||
|
> |
||||||
|
{/* product image */} |
||||||
|
<div |
||||||
|
className="group transition ease-in-out delay-150 duration-300 w-full relative flex items-center justify-center cursor-pointer" |
||||||
|
style={{ |
||||||
|
backgroundImage: `url(${watermelon})`, |
||||||
|
backgroundSize: "100% 100%", |
||||||
|
backgroundRepeat: "no-repeat", |
||||||
|
minHeight: "180px", |
||||||
|
}} |
||||||
|
data-modal-toggle="large-modal" |
||||||
|
> |
||||||
|
{/* icons on image */} |
||||||
|
<div className="absolute left-2 top-2"> |
||||||
|
{discountPricePercent && ( |
||||||
|
<div className="bg-discountPriceBg rounded-md px-2 py-2 mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer"> |
||||||
|
<p className="text-discountPriceTitle font-bold text-xs"> |
||||||
|
23<span>%</span> |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
{likeBtn && ( |
||||||
|
<div className="bg-likeBtnBg rounded-md p-1 flex justify-center mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer"> |
||||||
|
<img src={heart} alt="" className="w-5" /> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
{discount && ( |
||||||
|
<div className="rounded-md mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer"> |
||||||
|
<img src={discountImg} alt="" className="w-full" /> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
{/* play button */} |
||||||
|
<div |
||||||
|
className={` rounded-full p-4 group-hover:scale-125 transform transition-transform duration-300 bg-playButtonIcon`} |
||||||
|
// onClick={() => setOpenModal(true)}
|
||||||
|
> |
||||||
|
<img |
||||||
|
src={whitePlayIcon} |
||||||
|
alt="" |
||||||
|
className="w-5 h-5" |
||||||
|
// onClick={() => setOpenModal(true)}
|
||||||
|
/> |
||||||
|
</div> |
||||||
|
{/* select Color */} |
||||||
|
{productColor && ( |
||||||
|
<div className="flex items-center absolute right-2 bottom-2"> |
||||||
|
{/* {colors.map((color,index))} */} |
||||||
|
<img |
||||||
|
src={YellowDotIcon} |
||||||
|
alt="" |
||||||
|
data-tip="زرد" |
||||||
|
className="w-3 h-3 ml-1 cursor-pointer" |
||||||
|
/> |
||||||
|
<ReactTooltip place="top" type="dark" effect="float" /> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
{/* product content */} |
||||||
|
<div className="px-2"> |
||||||
|
{/* content */} |
||||||
|
<div className="mt-4 flex flex-col"> |
||||||
|
<div |
||||||
|
className={`flex ${productTitleCategoryHolder} ${productTitleCategoryHolderAlignment} justify-between `} |
||||||
|
> |
||||||
|
<h2 |
||||||
|
className={`leading-4 text-base mb-2 font-semibold text-darkCrimsonTextColor ${productTitleAlignment}`} |
||||||
|
> |
||||||
|
نسخه چاپی علموم تجربه هفتم |
||||||
|
</h2> |
||||||
|
{productCat && ( |
||||||
|
<span |
||||||
|
className={`text-xs font-light text-darkCrimsonTextColor`} |
||||||
|
> |
||||||
|
پایه سوم |
||||||
|
</span> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
{productContent && ( |
||||||
|
<p |
||||||
|
className={`text-justify text-sm leading-6 text-productContent`} |
||||||
|
> |
||||||
|
این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های |
||||||
|
خوب دیگری نیز دارد. |
||||||
|
</p> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
{/* price */} |
||||||
|
<div |
||||||
|
className={`flex ${priceStarHolder} ${priceStarAlignment} justify-between mt-2`} |
||||||
|
> |
||||||
|
{priceHolder && ( |
||||||
|
<div |
||||||
|
className={`flex items-center justify-between ${priceDirection}`} |
||||||
|
> |
||||||
|
{/* price */} |
||||||
|
<div className=""> |
||||||
|
<div |
||||||
|
className={`${ |
||||||
|
priceDirection.indexOf("col") !== -1 |
||||||
|
? "inline" |
||||||
|
: "flex" |
||||||
|
}`}
|
||||||
|
> |
||||||
|
{priceTitle && ( |
||||||
|
<span className="text-xs text-borderColor ml-2"> |
||||||
|
قیمت |
||||||
|
</span> |
||||||
|
)} |
||||||
|
{discountPrice && ( |
||||||
|
<p className="line-through text-xs text-borderColor"> |
||||||
|
<span> قیمت</span> 140<span>تومان</span> |
||||||
|
</p> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
<p |
||||||
|
className={`text-sm font-semibold inline text-productPrice`} |
||||||
|
> |
||||||
|
111.000<span>تومان</span> |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
{/* add to cart */} |
||||||
|
{addToCartHolder && ( |
||||||
|
<button |
||||||
|
className={`rounded-md px-2 py-3 border text-xs text-productPrice mt-2 hover:bg-darkCrimsonBgColor hover:text-white active:bg-rangeFillBgColor transition duration-500 ${ |
||||||
|
priceDirection.indexOf("col") !== -1 ? "w-full" : "" |
||||||
|
}`}
|
||||||
|
> |
||||||
|
اضافه کردن به سبد خرید |
||||||
|
</button> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
)} |
||||||
|
{star && ( |
||||||
|
<div className="flex items-center"> |
||||||
|
<StarRating /> |
||||||
|
<span className="text-xs text-productContent font-bold mr-2"> |
||||||
|
39 |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
{productTags && ( |
||||||
|
<div className="mt-2 flex flex-wrap"> |
||||||
|
<button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs"> |
||||||
|
ارسال رایگان |
||||||
|
</button> |
||||||
|
<button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs"> |
||||||
|
برچسب های دیگر |
||||||
|
</button> |
||||||
|
<button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs"> |
||||||
|
دسته بندی به صورت کادو |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
{rangeHolder && ( |
||||||
|
<div className="bg-rangeBgColor h-3 w-full rounded mt-2"> |
||||||
|
<div |
||||||
|
className={`bg-rangeFillBgColor h-3 rounded duration-500`} |
||||||
|
style={{ |
||||||
|
width: progressFlag ? rangeWidth : 0, |
||||||
|
}} |
||||||
|
></div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div |
||||||
|
class="hidden overflow-y-auto overflow-x-hidden fixed right-0 left-0 top-4 z-50 justify-center items-center md:inset-0 h-modal sm:h-full" |
||||||
|
id="large-modal" |
||||||
|
> |
||||||
|
<div class="relative px-4 w-full max-w-4xl h-full md:h-auto"> |
||||||
|
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700"> |
||||||
|
<div class="flex justify-between items-center p-5 rounded-t border-b border-gray-200 dark:border-gray-600"> |
||||||
|
<button |
||||||
|
type="button" |
||||||
|
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white" |
||||||
|
data-modal-toggle="large-modal" |
||||||
|
> |
||||||
|
<svg |
||||||
|
class="w-5 h-5" |
||||||
|
fill="currentColor" |
||||||
|
viewBox="0 0 20 20" |
||||||
|
xmlns="http://www.w3.org/2000/svg" |
||||||
|
> |
||||||
|
<path |
||||||
|
fill-rule="evenodd" |
||||||
|
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" |
||||||
|
clip-rule="evenodd" |
||||||
|
></path> |
||||||
|
</svg> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
<div class="p-6 space-y-6"> |
||||||
|
<video |
||||||
|
controls |
||||||
|
className={`border transition-all duration-1000
|
||||||
|
`}
|
||||||
|
src={video} |
||||||
|
type="video/mp4" |
||||||
|
></video> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</section> |
||||||
|
); |
||||||
|
}; |
||||||
|
// hover:-translate-y-2
|
||||||
|
export default VodProduct; |
||||||
|
|
||||||
|
// text colors i used for product title:
|
||||||
|
// text-darkCrimsonTextColor
|
||||||
|
// text-productTitle
|
||||||
|
|
||||||
|
// text color i used for product excerpt:
|
||||||
|
// text-productContent
|
||||||
|
|
||||||
|
// text color i used for product cat:
|
||||||
|
// text-darkCrimsonTextColor
|
||||||
|
|
||||||
|
// bg color i used for play button icon:
|
||||||
|
// bg-playButtonIcon
|
||||||
|
// bg-playButtonIcon2
|
||||||
|
|
||||||
|
VodProduct.defaultProps = { |
||||||
|
colors: [ |
||||||
|
{ |
||||||
|
icon: YellowDotIcon, |
||||||
|
dataType: "زرد", |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: RedDotIcon, |
||||||
|
dataType: "قرمز", |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: PurpleDotIcon, |
||||||
|
dataType: "بنفش", |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: LightBlueDotIcon, |
||||||
|
dataType: "آبی", |
||||||
|
}, |
||||||
|
|
||||||
|
LightBlueDotIcon, |
||||||
|
], |
||||||
|
|
||||||
|
// icons on product image
|
||||||
|
productColor: true, |
||||||
|
likeBtn: true, |
||||||
|
discount: true, |
||||||
|
discountPricePercent: true, |
||||||
|
// product price
|
||||||
|
discountPrice: true, |
||||||
|
priceHolder: true, |
||||||
|
priceTitle: false, |
||||||
|
|
||||||
|
productContent: false, |
||||||
|
star: true, |
||||||
|
productTags: false, |
||||||
|
productCat: true, |
||||||
|
rangeHolder: true, |
||||||
|
|
||||||
|
addToCartHolder: false, |
||||||
|
|
||||||
|
productTitleAlignment: "text-justify", |
||||||
|
|
||||||
|
// برای درصد دادن به عرض رنج
|
||||||
|
rangeWidth: "75%", |
||||||
|
|
||||||
|
priceDirection: "flex-row", |
||||||
|
|
||||||
|
productTitleCategoryHolder: "flex-row", |
||||||
|
productTitleCategoryHolderAlignment: "items-center", |
||||||
|
|
||||||
|
// برای اینکه بتونیم ستاره هارو بالا قیمت بزاریم و دیزاین را مثل کتاب ها در بیاریم
|
||||||
|
// یادمون باشه که حتما رویه
|
||||||
|
// flex-col-reverse
|
||||||
|
// بزاریم
|
||||||
|
|
||||||
|
// دیفالتش باید این باشه:
|
||||||
|
// priceStarHolder: flex-row
|
||||||
|
priceStarHolder: "flex-row", |
||||||
|
// دیفالتش باید این باشه:
|
||||||
|
// priceStarHolder: items-center
|
||||||
|
priceStarAlignment: "items-center", |
||||||
|
}; |
||||||
Binary file not shown.
Loading…
Reference in new issue