@ -35,7 +35,7 @@ const Services = ({
pushToCart , pushToCart ,
} ) => { } ) => {
const [ filterCheck , setFilterCheck ] = useState ( null ) ; const [ filterCheck , setFilterCheck ] = useState ( [ false , false , false , false ] ) ;
const [ filter , setFilter ] = useState ( { const [ filter , setFilter ] = useState ( {
search : "" , search : "" ,
grade : "" , grade : "" ,
@ -105,11 +105,11 @@ const Services = ({
const chooseGame = ( id ) => { const chooseGame = ( id ) => {
setGameId ( id ) ; setGameId ( id ) ;
} ; } ;
if ( ! isMobile ) { if ( ! isMobile ) {
return ( return (
< div < div
className = "flex items-start justify-between" className = "flex items-start justify-between"
style = { { width : "93.5%" , direction : "rtl" , height : '100vh' } } style = { { width : "93.5%" , direction : "rtl" } }
> >
{ popup ? ( { popup ? (
< ServicePopUp < ServicePopUp
@ -119,10 +119,10 @@ const Services = ({
) : null } ) : null }
< div < div
className = "w-3/4 flex flex-col justify-center " className = "w-3/4 flex flex-col justify-center "
style = { { paddingTop : '5.5%' , height : '100vh' } } style = { { marginTop : "5.5%" } }
> >
< div < div
className = "h-48 w-full border-b border-red82OP my-4 px-10" className = "relative h-48 w-full border-b border-red82OP my-4 px-10"
style = { { direction : "ltr" } } style = { { direction : "ltr" } }
> >
{ / * { { / * {
@ -161,7 +161,7 @@ const Services = ({
/ > / >
< / d i v > < / d i v >
{ /* filters */ } { /* filters */ }
{ gameId != 6 && < div className = "flex mx-10 my-4 justify-start " > { gameId != 6 && < div className = "flex mx-2 my-4 justify-center " >
< div className = "flex items-center " > < div className = "flex items-center " >
< svg < svg
xmlns = "http://www.w3.org/2000/svg" xmlns = "http://www.w3.org/2000/svg"
@ -220,20 +220,24 @@ const Services = ({
< / g > < / g >
< / s v g > < / s v g >
< / d i v > < / d i v >
< div className = "flex items-center mx-6 pl-6 border-l-2 border-gray-300" > < div className = "flex items-center mx-4 pl-6 border-l-2 border-gray-300" >
< div < div
className = { ` flex w-32 border-2 p-2 px-4 mx-2 justify-center items-center rounded-md cursor-pointer
className = { ` flex w-32 border-2 p-2 mx-2 justify-center items-center rounded-md cursor-pointer
hover : border - red52 hover : text - red52 hover : bg - pinkF5
hover : border - red52 hover : text - red52 hover : bg - pinkF5
$ { filterCheck == 'Online' $ {
filterCheck [ 0 ]
? "border-red52 text-red52 bg-pinkF5" ? "border-red52 text-red52 bg-pinkF5"
: "border-gray200 text-gray-400" : "border-gray200 text-gray-400"
} ` }
} ` }
onClick = { ( prevState ) => onClick = { ( prevState ) =>
setFilterCheck ( 'Online' ) setFilterCheck ( [
... prevState ,
( filterCheck [ 0 ] = ! filterCheck [ 0 ] ) ,
] )
} }
> >
< h3 > آنلاین < / h 3 > < h3 > آنلاین < / h 3 >
{ filterCheck == 'Online' && ( { filterCheck [ 0 ] && (
< div className = "flex w-full" style = { { direction : "ltr" } } > < div className = "flex w-full" style = { { direction : "ltr" } } >
< div className = "w-4 h-4 text-white text-sm rounded-full flex justify-center items-center bg-red52" > < div className = "w-4 h-4 text-white text-sm rounded-full flex justify-center items-center bg-red52" >
< svg < svg
@ -258,18 +262,22 @@ const Services = ({
) } ) }
< / d i v > < / d i v >
< div < div
className = { ` flex w-32 border-2 p-2 mx-2 px-4 justify-center items-center rounded-md cursor-pointer
className = { ` flex w-32 border-2 p-2 mx-2 justify-center items-center rounded-md cursor-pointer
hover : border - red52 hover : text - red52 hover : bg - pinkF5
hover : border - red52 hover : text - red52 hover : bg - pinkF5
$ { filterCheck == 'Physical' $ {
filterCheck [ 0 ]
? "border-red52 text-red52 bg-pinkF5" ? "border-red52 text-red52 bg-pinkF5"
: "border-gray200 text-gray-400" : "border-gray200 text-gray-400"
} ` }
} ` }
onClick = { ( prevState ) => onClick = { ( prevState ) =>
setFilterCheck ( 'Physical' ) setFilterCheck ( [
... prevState ,
( filterCheck [ 0 ] = ! filterCheck [ 0 ] ) ,
] )
} }
> >
< h3 > حضوری < / h 3 > < h3 > حضوری < / h 3 >
{ filterCheck == 'Physical' && ( { filterCheck [ 0 ] && (
< div className = "flex w-full" style = { { direction : "ltr" } } > < div className = "flex w-full" style = { { direction : "ltr" } } >
< div className = "w-4 h-4 text-white text-sm rounded-full flex justify-center items-center bg-red52" > < div className = "w-4 h-4 text-white text-sm rounded-full flex justify-center items-center bg-red52" >
< svg < svg
@ -306,27 +314,28 @@ const Services = ({
< / d i v > } < / d i v > }
< div < div
className = { ` flex
className = { ` flex ${
} items - center w - full justify - center overflow - x - hidden overflow - scroll flex - wrap h - full ` }
gameId == 2 && "flex-col"
} items - center w - full justify - center flex - wrap ` }
> >
{ books ? . map ( ( product , index ) => ( { books ? . map ( ( product , index ) => (
< div < Link
// to={"/class/" + product?.id}
// to={"/class/" + product?.id}
to = "#"
key = { ` PRODUCT__ ${ gameId } __ ${ index } ` } key = { ` PRODUCT__ ${ gameId } __ ${ index } ` }
onClick = { ( ) => { onClick = { ( ) => {
setPopUpContent ( { setPopUpContent ( {
id : gameId , id : gameId ,
title : product ? . name , title : product ? . name ,
video : "" , video : "" ,
teacher : product ? . vodTeacher , teacher : product . vodTeacher ,
description : description :
"در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط در این قسمت قرار می , "در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط در این قسمت قرار می ,
price : product ? . price , price : product . product [ 0 ] . price ,
classHour : 21 , classHour : 21 ,
classMinute : 56 , classMinute : 56 ,
image : 'https://narafella.ir/wp-content/uploads/2021/08/books-min.jpg' , image : 'https://narafella.ir/wp-content/uploads/2021/08/books-min.jpg' ,
examCont : [ examCont : [
{ {
title : 'بخش اول آزمون ' + product . name , title : 'بخش اول آزمون ' + product . name ,
date : '۱۴۰۰/۱۲/۱۳' , date : '۱۴۰۰/۱۲/۱۳' ,
@ -350,7 +359,7 @@ const Services = ({
} , } ,
] ]
} ) ; } ) ;
if ( gameId !== 2 ) { if ( gameId !== 2 ) {
setPopUp ( true ) setPopUp ( true )
} }
console . log ( gameId ) console . log ( gameId )
@ -365,7 +374,7 @@ const Services = ({
index = { Number ( index ) } index = { Number ( index ) }
productName = { ` ${ product ? . name } ` } productName = { ` ${ product ? . name } ` }
productCat = { ` پایه ${ grades [ product ? . gradeId ] } ` } productCat = { ` پایه ${ grades [ product ? . gradeId ] } ` }
productPrice = { product ? . price } productPrice = { product . product [ 0 ] . price }
// productImg={"https://dnvn.ir/api/v1/file/" + product?.fileIds}
// productImg={"https://dnvn.ir/api/v1/file/" + product?.fileIds}
numberOfRegards = { 160 } numberOfRegards = { 160 }
productHolderBorder = "" productHolderBorder = ""
@ -373,7 +382,7 @@ const Services = ({
teacher = { product . vodTeacher } teacher = { product . vodTeacher }
catId = { gameId } catId = { gameId }
onClick = { ( ) => null } onClick = { ( ) => null }
btnOnClick = { ( ) => { btnOnClick = { ( ) => {
pushToCart ( { pushToCart ( {
productId : product ? . id , productId : product ? . id ,
@ -385,11 +394,11 @@ const Services = ({
} }
} }
/ > / >
< / d i v > < / L i n k >
) ) } ) ) }
{ {
gameId == 6 &&
gameId == 6 &&
< div className = "w-3/4 p-8 py-10 flex mt-10 justify-between text-right items-center border-2 rounded-xl border-red52 " > < div className = "w-3/4 p-8 py-10 flex mt-10 justify-between items-center border-2 rounded-xl border-red52 " >
< div className = "w-1/5" > < div className = "w-1/5" >
< h1 className = "text-red26 font-bold" > افزایش مبلغ دلخواه < / h 1 > < h1 className = "text-red26 font-bold" > افزایش مبلغ دلخواه < / h 1 >
@ -414,15 +423,14 @@ const Services = ({
} }
< / d i v > < / d i v >
< / d i v > < / d i v >
{ ! isMobile && < div className = "w-1/4 left-0" style = { { height : "100vh" } } > { ! isMobile && < div className = "w-1/4 fixed left-0" style = { { height : "100vh" } } >
< ShoppingCart / > < ShoppingCart / >
< / d i v > } < / d i v > }
< / d i v > < / d i v >
) ; ) ; }
}
// Mobile Version
// Mobile Version
else { else {
return ( return (
< div className = "flex flex-col items-center mt-16 mb-40 rtl" > < div className = "flex flex-col items-center mt-16 mb-40 rtl" >
< Games < Games
@ -493,7 +501,8 @@ const Services = ({
< div < div
className = { ` flex w-32 border-2 p-2 mx-2 justify-center items-center rounded-md cursor-pointer
className = { ` flex w-32 border-2 p-2 mx-2 justify-center items-center rounded-md cursor-pointer
hover : border - red52 hover : text - red52 hover : bg - pinkF5
hover : border - red52 hover : text - red52 hover : bg - pinkF5
$ { filterCheck [ 0 ] $ {
filterCheck [ 0 ]
? "border-red52 text-red52 bg-pinkF5" ? "border-red52 text-red52 bg-pinkF5"
: "border-gray200 text-gray-400" : "border-gray200 text-gray-400"
} ` }
} ` }
@ -532,7 +541,8 @@ const Services = ({
< div < div
className = { ` flex w-32 border-2 p-2 mx-2 justify-center items-center rounded-md cursor-pointer
className = { ` flex w-32 border-2 p-2 mx-2 justify-center items-center rounded-md cursor-pointer
hover : border - red52 hover : text - red52 hover : bg - pinkF5
hover : border - red52 hover : text - red52 hover : bg - pinkF5
$ { filterCheck [ 1 ] $ {
filterCheck [ 1 ]
? "border-red52 text-red52 bg-pinkF5" ? "border-red52 text-red52 bg-pinkF5"
: "border-gray200 text-gray-400" : "border-gray200 text-gray-400"
} ` }
} ` }
@ -592,7 +602,7 @@ const Services = ({
classHour : 21 , classHour : 21 ,
classMinute : 56 , classMinute : 56 ,
image : 'https://narafella.ir/wp-content/uploads/2021/08/books-min.jpg' , image : 'https://narafella.ir/wp-content/uploads/2021/08/books-min.jpg' ,
examCont : [ examCont : [
{ {
title : 'بخش اول آزمون ' + product . name , title : 'بخش اول آزمون ' + product . name ,
date : '۱۴۰۰/۱۲/۱۳' , date : '۱۴۰۰/۱۲/۱۳' ,
@ -669,13 +679,13 @@ const Services = ({
/ > / >
< / d i v > < / d i v >
< button className = "cursor-pointer text-blue52 border border-blueDF w-full rounded-lg font-bold text-sm px-6 h-14" < button className = "cursor-pointer text-blue52 border border-blueDF w-full rounded-lg font-bold text-sm px-6 h-14"
style = { { background : 'rgba(211, 246, 255, 0.44)' } } > style = { { background : 'rgba(211, 246, 255, 0.44)' } } >
افزودن به سبد خرید افزودن به سبد خرید
< / b u t t o n > < / b u t t o n >
< / d i v > < / d i v >
} }
< / d i v > < / d i v >
< / d i v > < / d i v >
) )
} }
