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