parent
28ccf2c3b5
commit
6b0cf077b5
14 changed files with 1140 additions and 367 deletions
@ -1,116 +1,212 @@ |
||||
import React from "react"; |
||||
import Button from "../../../components/Button"; |
||||
import Checkbox from '../../../components/Checkbox'; |
||||
import Checkbox from "../../../components/Checkbox"; |
||||
import separate from "../../../utils/separate"; |
||||
const servicePopUp = ({ |
||||
content, |
||||
closeOnClick, |
||||
addToCartFunction, |
||||
sendPrice |
||||
content, |
||||
closeOnClick, |
||||
addToCartFunction, |
||||
sendPrice, |
||||
}) => { |
||||
return ( |
||||
<div className="flex justify-center w-full items-center fixed text-right z-30 backdrop-blur" style={{ background: 'rgba(0,0,0,0.1)', height: 'calc(100vh - 6.5vh)', top: '8.5vh' }}> |
||||
<div className="bg-white flex flex-col w-1/2 rounded-2xl py-6 px-10" > |
||||
<div className="w-full"> |
||||
<div className="w-8 h-8 text-white text-sm rounded-full cursor-pointer flex justify-center items-center bg-red52" onClick={closeOnClick}> |
||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 15.044 15.044"> |
||||
<g id="vuesax_linear_card-remove" data-name="vuesax/linear/card-remove" transform="translate(-252.46 -511.461)"> |
||||
<g id="card-remove" transform="translate(253.309 512.31)"> |
||||
<path id="Vector" d="M0,13.347,13.347,0" fill="none" stroke="#fff" strokeLinecap="round" strokeWidth="2" /> |
||||
<path id="Vector-2" data-name="Vector" d="M13.347,13.347,0,0" fill="none" stroke="#fff" strokeLinecap="round" strokeWidth="2" /> |
||||
</g> |
||||
</g> |
||||
</svg> |
||||
</div> |
||||
</div> |
||||
<div className={`flex justify-${content.id === 3 ? 'center' : 'between'} mb-20`} style={{direction: content.id === 1 ? 'rtl' : 'ltr'}} > |
||||
{ content.id !== 2 && <div className={`${content.id === 4 ? 'w-1/2' : content.id === 1 ? 'w-2/3' : 'w-full'} my-4 mx-2 p-2`}> |
||||
<h1 className="text-red25 font-black text-md"> |
||||
|
||||
{content.id === 4 ? 'کلاس آنلاین ' : content.id === 1 ? 'کتاب ' : null} |
||||
|
||||
{content.title}</h1> |
||||
<p className="text-red26 text-sm my-2"> |
||||
{content.description} |
||||
</p> |
||||
<div className="w-full flex flex-col" style={{direction: 'rtl'}}> |
||||
<div className="flex mb-2"> |
||||
<div className="bg-gray-100 rounded w-40 px-4 py-2 ml-2 text-red52">نام کلاس</div> |
||||
<div className="bg-gray-100 rounded w-full px-4 py-2 ml-2 text-red26">{content.title}</div> |
||||
</div> |
||||
<div className="flex mb-2"> |
||||
<div className="bg-gray-100 rounded w-40 px-4 py-2 ml-2 text-red52"> استاد </div> |
||||
<div className="bg-gray-100 rounded w-full px-4 py-2 ml-2 text-red26">{content.teacher}</div> |
||||
</div> |
||||
<div className="flex mb-2"> |
||||
<div className="bg-gray-100 rounded w-40 px-4 py-2 ml-2 text-red52">زمان کلاس</div> |
||||
<div className="bg-gray-100 rounded w-full px-4 py-2 ml-2 text-red26">
|
||||
{content.classHour} ساعت و {content.classMinute} دقیقه |
||||
</div> |
||||
</div> |
||||
|
||||
|
||||
</div> |
||||
|
||||
</div>} |
||||
{ |
||||
content.id === 2 &&
|
||||
<div className="flex w-11/12 flex-col rounded-xl border border-red82OP"> |
||||
<h1 className="px-2 py-6 border-b border-red82OP bg-blueFF rounded-t-xl pr-10 text-blueE3 text-xl font-bold">آزمون {content.title}</h1> |
||||
<div className="flex w-full border-b border-red82OP text-red26 text-sm font-bold" style={{direction : 'rtl'}}> |
||||
<div className="w-1/4 flex justify-center py-4 border-l border-red82OP">نوع آزمون : آنلاین</div> |
||||
<div className="w-1/4 flex justify-center py-4 border-l border-red82OP">تاریخ شروع : 1400/12/03</div> |
||||
<div className="w-1/4 flex justify-center py-4 border-l border-red82OP">تعداد آزمون : ۱۸</div> |
||||
<div className="w-1/4 flex items-center justify-center py-4 "> بودجه بندی آزمون </div> |
||||
</div> |
||||
<div className="flex w-full border-b border-red82OP text-red26 text-xs py-3 px-6 " style={{direction : 'rtl'}}> |
||||
<span className="text-red52 ml-1 font-bold"> |
||||
توجه: |
||||
</span> |
||||
به صورت معمول تمامی آزمون ها برای شما خریداری خواهند شد مگر اینکه شما به صورت دلخواه یک یا چند آزمون را انتخاب نمایید |
||||
</div> |
||||
{ |
||||
content.examCont?.map( |
||||
(item, index) => ( |
||||
<div className="flex w-full items-center justify-between border-b border-red82OP font-bold text-red26 text-xs py-3 px-6 " style={{direction : 'rtl'}}> |
||||
<div className="flex items-center font-bold"> |
||||
<Checkbox name={`examPackage_${item.id}_${index}`} onclick={(e) => e.target.checked ? sendPrice(item.price) : sendPrice(-item.price)}/> |
||||
<p>{item.title}</p> |
||||
</div> |
||||
<p>تاریخ : {item.date}</p> |
||||
<p>ساعت : {item.time}</p> |
||||
<p>بودجه بندی !</p> |
||||
<p>تعداد سوالات: {item.numberOfQ}</p> |
||||
<p>{separate(item.price)} تومان</p> |
||||
</div> |
||||
) |
||||
) |
||||
} |
||||
</div> |
||||
} |
||||
|
||||
{content.id === 3 && <video className="w-1/2 rounded-md" controls> |
||||
<source |
||||
src={`https://dnvn.ir/api/v1/file/20540`} |
||||
type="video/mp4" |
||||
/> |
||||
</video>} |
||||
return ( |
||||
<div |
||||
className="flex justify-center w-full items-center fixed text-right z-30 backdrop-blur" |
||||
style={{ |
||||
background: "rgba(0,0,0,0.1)", |
||||
height: "calc(100vh - 6.5vh)", |
||||
top: "8.5vh", |
||||
}} |
||||
> |
||||
<div className="bg-white flex flex-col w-1/2 rounded-2xl py-6 px-10"> |
||||
<div className="w-full"> |
||||
<div |
||||
className="w-8 h-8 text-white text-sm rounded-full cursor-pointer flex justify-center items-center bg-red52 mb-2" |
||||
onClick={closeOnClick} |
||||
> |
||||
<svg |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
width="12" |
||||
height="12" |
||||
viewBox="0 0 15.044 15.044" |
||||
> |
||||
<g |
||||
id="vuesax_linear_card-remove" |
||||
data-name="vuesax/linear/card-remove" |
||||
transform="translate(-252.46 -511.461)" |
||||
> |
||||
<g id="card-remove" transform="translate(253.309 512.31)"> |
||||
<path |
||||
id="Vector" |
||||
d="M0,13.347,13.347,0" |
||||
fill="none" |
||||
stroke="#fff" |
||||
strokeLinecap="round" |
||||
strokeWidth="2" |
||||
/> |
||||
<path |
||||
id="Vector-2" |
||||
data-name="Vector" |
||||
d="M13.347,13.347,0,0" |
||||
fill="none" |
||||
stroke="#fff" |
||||
strokeLinecap="round" |
||||
strokeWidth="2" |
||||
/> |
||||
</g> |
||||
</g> |
||||
</svg> |
||||
</div> |
||||
</div> |
||||
<div |
||||
className={`flex justify-${ |
||||
content.id === 3 ? "center" : "between" |
||||
} mb-20`}
|
||||
style={{ direction: content.id === 1 ? "rtl" : "ltr" }} |
||||
> |
||||
{content.id !== 2 && ( |
||||
<div |
||||
className={`${ |
||||
content.id === 4 |
||||
? "w-1/2" |
||||
: content.id === 1 |
||||
? "w-2/3" |
||||
: "w-full" |
||||
} my-4 mx-2 p-2`}
|
||||
> |
||||
<h1 className="text-red25 font-black text-md"> |
||||
{content.id === 4 |
||||
? "کلاس آنلاین " |
||||
: content.id === 1 |
||||
? "کتاب " |
||||
: null} |
||||
|
||||
{ |
||||
content.id === 1 && <img src={content.image} className="w-1/3 rounded-md mt-4" alt="Content"/> |
||||
} |
||||
{content.title} |
||||
</h1> |
||||
<p className="text-red26 text-sm my-2">{content.description}</p> |
||||
<div |
||||
className="w-full flex flex-col" |
||||
style={{ direction: "rtl" }} |
||||
> |
||||
<div className="flex mb-2"> |
||||
<div className="bg-gray-100 rounded w-40 px-4 py-2 ml-2 text-red52"> |
||||
نام کلاس |
||||
</div> |
||||
<div className="bg-gray-100 rounded w-full px-4 py-2 ml-2 text-red26"> |
||||
{content.title} |
||||
</div> |
||||
</div> |
||||
<div className="flex mb-2"> |
||||
<div className="bg-gray-100 rounded w-40 px-4 py-2 ml-2 text-red52"> |
||||
{" "} |
||||
استاد{" "} |
||||
</div> |
||||
<div className="bg-gray-100 rounded w-full px-4 py-2 ml-2 text-red26"> |
||||
{content.teacher} |
||||
</div> |
||||
</div> |
||||
<div className="flex w-full items-center justify-start mb-8" style={{direction: 'ltr'}}> |
||||
<Button title='افزودن به سبد خرید' onClick={addToCartFunction} className="w-40"/> |
||||
|
||||
<h1 className="text-xl font-bold text-red52 p-2 mt-3"> |
||||
مبلغ کل : {separate(content.price)} تومان |
||||
</h1> |
||||
|
||||
<div className="flex mb-2"> |
||||
<div className="bg-gray-100 rounded w-40 px-4 py-2 ml-2 text-red52"> |
||||
زمان کلاس |
||||
</div> |
||||
<div className="bg-gray-100 rounded w-full px-4 py-2 ml-2 text-red26"> |
||||
{content.classHour} ساعت |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
)} |
||||
{content.id === 2 && ( |
||||
<div className="flex w-11/12 flex-col rounded-xl border border-red82OP"> |
||||
<h1 className="px-2 py-6 border-b border-red82OP bg-blueFF rounded-t-xl pr-10 text-blueE3 text-xl font-bold"> |
||||
آزمون {content.title} |
||||
</h1> |
||||
<div |
||||
className="flex w-full border-b border-red82OP text-red26 text-sm font-bold" |
||||
style={{ direction: "rtl" }} |
||||
> |
||||
<div className="w-1/4 flex justify-center py-4 border-l border-red82OP"> |
||||
نوع آزمون : آنلاین |
||||
</div> |
||||
<div className="w-1/4 flex justify-center py-4 border-l border-red82OP"> |
||||
تاریخ شروع : 1400/12/03 |
||||
</div> |
||||
<div className="w-1/4 flex justify-center py-4 border-l border-red82OP"> |
||||
تعداد آزمون : ۱۸ |
||||
</div> |
||||
<div className="w-1/4 flex items-center justify-center py-4 "> |
||||
{" "} |
||||
بودجه بندی آزمون{" "} |
||||
</div> |
||||
</div> |
||||
<div |
||||
className="flex w-full border-b border-red82OP text-red26 text-xs py-3 px-6 " |
||||
style={{ direction: "rtl" }} |
||||
> |
||||
<span className="text-red52 ml-1 font-bold">توجه:</span> |
||||
به صورت معمول تمامی آزمون ها برای شما خریداری خواهند شد مگر |
||||
اینکه شما به صورت دلخواه یک یا چند آزمون را انتخاب نمایید |
||||
</div> |
||||
{content.examCont?.map((item, index) => ( |
||||
<div |
||||
className="flex w-full items-center justify-between border-b border-red82OP font-bold text-red26 text-xs py-3 px-6 " |
||||
style={{ direction: "rtl" }} |
||||
> |
||||
<div className="flex items-center font-bold"> |
||||
<Checkbox |
||||
name={`examPackage_${item.id}_${index}`} |
||||
onclick={(e) => |
||||
e.target.checked |
||||
? sendPrice(item.price) |
||||
: sendPrice(-item.price) |
||||
} |
||||
/> |
||||
<p>{item.title}</p> |
||||
</div> |
||||
<p>تاریخ : {item.date}</p> |
||||
<p>ساعت : {item.time}</p> |
||||
<p>بودجه بندی !</p> |
||||
<p>تعداد سوالات: {item.numberOfQ}</p> |
||||
<p>{separate(item.price)} تومان</p> |
||||
</div> |
||||
))} |
||||
</div> |
||||
)} |
||||
|
||||
{(content.id === 3 |
||||
&& ( |
||||
<video className="w-1/2 rounded-md" controls> |
||||
<source |
||||
src={`https://new.andishmand.ir/api/v1/file/${content?.video}`} |
||||
type="video/mp4" |
||||
/> |
||||
</video> |
||||
))} |
||||
|
||||
{content.id === 1 && ( |
||||
<img |
||||
src={content.image} |
||||
className="w-1/3 rounded-md mt-4" |
||||
alt="Content" |
||||
/> |
||||
)} |
||||
</div> |
||||
); |
||||
{/* <div |
||||
className="flex w-full items-center justify-start mb-8" |
||||
style={{ direction: "ltr" }} |
||||
> |
||||
<Button |
||||
title="افزودن به سبد خرید" |
||||
onClick={addToCartFunction} |
||||
className="w-40" |
||||
/> |
||||
|
||||
<h1 className="text-xl font-bold text-red52 p-2 mt-3"> |
||||
مبلغ کل : {separate(content.price)} تومان |
||||
</h1> |
||||
</div> */} |
||||
</div> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
export default servicePopUp; |
||||
export default servicePopUp; |
||||
|
||||
Loading…
Reference in new issue