@ -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,27 +105,27 @@ const Services = ({
const chooseGame = ( id ) => { const chooseGame = ( id ) => {
setGameId ( id ) ; setGameId ( id ) ;
} ; } ;
if ( ! isMobile ) { if ( ! isMobile ) {
return ( return (
< div
className = "flex items-start justify-between"
style = { { width : "93.5%" , direction : "rtl" } }
>
{ popup ? (
< ServicePopUp
content = { popUpContent }
closeOnClick = { ( ) => setPopUp ( false ) }
/ >
) : null }
< div < div
className = "flex items-start justify-between" className = "w-3/4 flex flex-col justify-center "
style = { { width : "93.5%" , direction : "rtl" , height : '100vh' } } style = { { marginTop : "5.5%" } }
> >
{ popup ? (
< ServicePopUp
content = { popUpContent }
closeOnClick = { ( ) => setPopUp ( false ) }
/ >
) : null }
< div < div
className = "w-3/4 flex flex-col justify-center " className = "relative h-48 w-full border-b border-red82OP my-4 px-10"
style = { { paddingTop : '5.5%' , height : '100vh' } } style = { { direction : "ltr" } }
> >
< div { / * {
className = "h-48 w-full border-b border-red82OP my-4 px-10"
style = { { direction : "ltr" } }
>
{ / * {
services . map ( ( item , index ) => ( services . map ( ( item , index ) => (
< div < div
className = "flex flex-col justify-center items-center transition-all duration-200 m-4 rounded-xl border-2 border-red82OP hover:cursor-pointer hover:bg-pinkF5" className = "flex flex-col justify-center items-center transition-all duration-200 m-4 rounded-xl border-2 border-red82OP hover:cursor-pointer hover:bg-pinkF5"
@ -154,16 +154,295 @@ const Services = ({
< / d i v > < / d i v >
) ) ) )
} * / } } * / }
< Games < Games
selectedGames = { selectedGames } selectedGames = { selectedGames }
gameId = { gameId } gameId = { gameId }
chooseGame = { chooseGame } chooseGame = { chooseGame }
/ > / >
< / 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"
width = "40"
height = "40"
viewBox = "0 0 14.378 14.378"
>
< g
id = "vuesax_linear_filter-tick"
data - name = "vuesax/linear/filter-tick"
transform = "translate(-620 -700)"
>
< g id = "filter-tick" transform = "translate(620 700)" >
< path
id = "Vector"
d = "M5.691,2.846a2.8,2.8,0,0,1-.407,1.468A2.836,2.836,0,0,1,2.846,5.691,2.768,2.768,0,0,1,1.312,5.23a2.685,2.685,0,0,1-.9-.917A2.807,2.807,0,0,1,0,2.846,2.848,2.848,0,0,1,2.846,0a2.648,2.648,0,0,1,.623.072A2.84,2.84,0,0,1,5.691,2.846Z"
transform = "translate(7.267 5.991)"
fill = "none"
stroke = "#696969"
strokeLinecap = "round"
strokeLinejoin = "round"
strokeWidth = "0.6"
/ >
< path
id = "Vector-2"
data - name = "Vector"
d = "M0,.7l.7.7L2.217,0"
transform = "translate(9.004 8.136)"
fill = "none"
stroke = "#696969"
strokeLinecap = "round"
strokeLinejoin = "round"
strokeWidth = "0.6"
/ >
< path
id = "Vector-3"
data - name = "Vector"
d = "M0,0H14.378V14.378H0Z"
transform = "translate(14.378 14.378) rotate(180)"
fill = "none"
opacity = "0"
/ >
< g id = "Group" transform = "translate(1.983 1.198)" >
< path
id = "Vector-4"
data - name = "Vector"
d = "M10.412,1.21V2.54a2.292,2.292,0,0,1-.605,1.4l-1.054.929a2.648,2.648,0,0,0-.623-.072A2.848,2.848,0,0,0,5.284,7.638,2.807,2.807,0,0,0,5.7,9.106a2.685,2.685,0,0,0,.9.917v.2a1.336,1.336,0,0,1-.545,1.03l-.845.545a1.233,1.233,0,0,1-1.875-1.03V7.567A2.342,2.342,0,0,0,2.846,6.3l-2.3-2.42A2.041,2.041,0,0,1,0,2.666V1.27A1.229,1.229,0,0,1,1.21,0H9.2A1.215,1.215,0,0,1,10.412,1.21Z"
fill = "none"
stroke = "#696969"
strokeLinecap = "round"
strokeLinejoin = "round"
strokeWidth = "0.6"
/ >
< / g >
< / g >
< / g >
< / s v g >
< / d i v >
< div className = "flex items-center mx-4 pl-6 border-l-2 border-gray-300" >
< div
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
$ {
filterCheck [ 0 ]
? "border-red52 text-red52 bg-pinkF5"
: "border-gray200 text-gray-400"
} ` }
onClick = { ( prevState ) =>
setFilterCheck ( [
... prevState ,
( filterCheck [ 0 ] = ! filterCheck [ 0 ] ) ,
] )
}
>
< h3 > آنلاین < / h 3 >
{ filterCheck [ 0 ] && (
< 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" >
< svg
width = "37"
height = "37"
viewBox = "0 0 24 24"
fill = "none"
xmlns = "http://www.w3.org/2000/svg"
>
< path
d = "M7.75 12L10.58 14.83L16.25 9.17004"
stroke = "#fff"
strokeWidth = "1.5"
strokeLinecap = "round"
strokeLinejoin = "round"
/ >
< / s v g >
< / d i v >
< / d i v >
) }
< / d i v >
< div
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
$ {
filterCheck [ 0 ]
? "border-red52 text-red52 bg-pinkF5"
: "border-gray200 text-gray-400"
} ` }
onClick = { ( prevState ) =>
setFilterCheck ( [
... prevState ,
( filterCheck [ 0 ] = ! filterCheck [ 0 ] ) ,
] )
}
>
< h3 > حضوری < / h 3 >
{ filterCheck [ 0 ] && (
< 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" >
< svg
width = "37"
height = "37"
viewBox = "0 0 24 24"
fill = "none"
xmlns = "http://www.w3.org/2000/svg"
>
< path
d = "M7.75 12L10.58 14.83L16.25 9.17004"
stroke = "#fff"
strokeWidth = "1.5"
strokeLinecap = "round"
strokeLinejoin = "round"
/ >
< / s v g >
< / d i v >
< / d i v >
) }
< / d i v >
< / d i v >
< div className = "flex items-center mx-4 pl-6" >
< select className = "bg-white border border-solid border-gray-300 w-72 p-3 rounded-lg text-gray-400 outline-red52" >
{ services . map ( ( item , index ) => (
< option key = { ` Grade__ ${ index } ` } > { item . title } < / o p t i o n >
) ) }
< / s e l e c t >
< / d i v >
< / d i v > }
< div
className = { ` flex ${
gameId == 2 && "flex-col"
} items - center w - full justify - center flex - wrap ` }
>
{ books ? . map ( ( product , index ) => (
< Link
// to={"/class/" + product?.id}
to = "#"
key = { ` PRODUCT__ ${ gameId } __ ${ index } ` }
onClick = { ( ) => {
setPopUpContent ( {
id : gameId ,
title : product ? . name ,
video : "" ,
teacher : product . vodTeacher ,
description :
"در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط در این قسمت قرار می ,
price : product . product [ 0 ] . price ,
classHour : 21 ,
classMinute : 56 ,
image : 'https://narafella.ir/wp-content/uploads/2021/08/books-min.jpg' ,
examCont : [
{
title : 'بخش اول آزمون ' + product . name ,
date : '۱۴۰۰/۱۲/۱۳' ,
time : '۱۴:۴۶' ,
numberOfQ : '۱۸' ,
price : 10000
} ,
{
title : 'بخش دوم آزمون ' + product . name ,
date : '۱۴۰۰/۱۲/۱۴' ,
time : '۱۴:۴۶' ,
numberOfQ : '۱۸' ,
price : 10000
} ,
{
title : 'بخش سوم آزمون ' + product . name ,
date : '۱۴۰۰/۱۲/۱۵' ,
time : '۱۴:۴۶' ,
numberOfQ : '۳۲' ,
price : 250000
} ,
]
} ) ;
if ( gameId !== 2 ) {
setPopUp ( true )
}
console . log ( gameId )
} }
>
{ /* {console.log(product)} */ }
< Product
key = { index }
productsType = { filter . productsType }
product = { product }
index = { Number ( index ) }
productName = { ` ${ product ? . name } ` }
productCat = { ` پایه ${ grades [ product ? . gradeId ] } ` }
productPrice = { product . product [ 0 ] . price }
// productImg={"https://dnvn.ir/api/v1/file/" + product?.fileIds}
numberOfRegards = { 160 }
productHolderBorder = ""
productHolderHoverBorder = "shadow-md"
teacher = { product . vodTeacher }
catId = { gameId }
onClick = { ( ) => null }
btnOnClick = { ( ) => {
pushToCart ( {
productId : product ? . id ,
count : 1 ,
} ) ;
setTimeout ( ( ) => setPopUp ( false ) , 1 )
console . log ( popup )
console . log ( product . id )
}
}
/ >
< / L i n k >
) ) }
{
gameId == 6 &&
< 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" >
< h1 className = "text-red26 font-bold" > افزایش مبلغ دلخواه < / h 1 >
< p className = "text-red26 text-sm" > لطفا مبلغ دلخواه خود را در کادر روبرو وارد کنید < / p >
< / d i v >
< div className = "flex" >
< input
placeholder = "12,000,000"
className = "border border-red52 rounded-lg h-12 w-36 text-center rounded-l-none border-l-0 px-4 outline-none"
/ > < p c l a s s N a m e = " b o r d e r f l e x j u s t i f y - c e n t e r i t e m s - c e n t e r b o r d e r - r e d 5 2 r o u n d e d - l g h - 1 2 w - 1 2 t e x t - c e n t e r r o u n d e d - r - n o n e b o r d e r - r - 0 p x - 4 " > ر ی ا ل < / p >
< / d i v >
< div className = "flex" >
< p className = "border flex justify-center items-center border-red52 rounded-lg h-12 w-12 text-center rounded-l-none border-l-0 px-10" > بابت < / p >
< input
placeholder = "شارژ حساب"
className = "border border-red52 rounded-lg h-12 w-60 text-center rounded-r-none border-r-0 px-4 outline-none"
/ >
< / d i v >
< button className = "cursor-pointer text-red26 border border-red52 rounded-lg bg-red82OP font-bold text-sm px-6 h-12" > افزودن به اعتبار < / b u t t o n >
< / d i v >
}
< / d i v >
< / d i v >
{ ! isMobile && < div className = "w-1/4 fixed left-0" style = { { height : "100vh" } } >
< ShoppingCart / >
< / d i v > }
< / d i v >
) ; }
// Mobile Version
else {
return (
< div className = "flex flex-col items-center mt-16 mb-40 rtl" >
< Games
selectedGames = { selectedGames }
gameId = { gameId }
chooseGame = { chooseGame }
/ >
< div className = "w-11/12 border-b border-gray-200" > < / d i v >
{
gameId !== 6 && < div className = "flex items-center mx-4 my-4" >
< svg
xmlns = "http://www.w3.org/2000/svg" xmlns = "http://www.w3.org/2000/svg"
width = "40" width = "40"
height = "40" height = "40"
@ -219,21 +498,23 @@ const Services = ({
< / g > < / g >
< / g > < / g >
< / s v g > < / s v g >
< / d i v >
< div className = "flex items-center mx-6 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' $ {
? "border-red52 text-red52 bg-pinkF5" filterCheck [ 0 ]
: "border-gray200 text-gray-400" ? "border-red52 text-red52 bg-pinkF5"
} ` }
: "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 +539,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' $ {
? "border-red52 text-red52 bg-pinkF5" filterCheck [ 1 ]
: "border-gray200 text-gray-400" ? "border-red52 text-red52 bg-pinkF5"
} ` }
: "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
@ -294,285 +579,10 @@ const Services = ({
) } ) }
< / d i v > < / d i v >
< / d i v > < / d i v >
}
< div className = "w-11/12 border-b border-gray-200" > < / d i v >
< div className = "flex items-center mx-4 pl-6" >
< select className = "bg-white border border-solid border-gray-300 w-72 p-3 rounded-lg text-gray-400 outline-red52" >
{ services . map ( ( item , index ) => (
< option key = { ` Grade__ ${ index } ` } > { item . title } < / o p t i o n >
) ) }
< / s e l e c t >
< / d i v >
< / d i v > }
< div < div
className = { ` flex
} items - center w - full justify - center overflow - x - hidden overflow - scroll flex - wrap h - full ` }
>
{ books ? . map ( ( product , index ) => (
< div
// to={"/class/" + product?.id}
key = { ` PRODUCT__ ${ gameId } __ ${ index } ` }
onClick = { ( ) => {
setPopUpContent ( {
id : gameId ,
title : product ? . name ,
video : "" ,
teacher : product ? . vodTeacher ,
description :
"در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط در این قسمت قرار می ,
price : product ? . price ,
classHour : 21 ,
classMinute : 56 ,
image : 'https://narafella.ir/wp-content/uploads/2021/08/books-min.jpg' ,
examCont : [
{
title : 'بخش اول آزمون ' + product . name ,
date : '۱۴۰۰/۱۲/۱۳' ,
time : '۱۴:۴۶' ,
numberOfQ : '۱۸' ,
price : 10000
} ,
{
title : 'بخش دوم آزمون ' + product . name ,
date : '۱۴۰۰/۱۲/۱۴' ,
time : '۱۴:۴۶' ,
numberOfQ : '۱۸' ,
price : 10000
} ,
{
title : 'بخش سوم آزمون ' + product . name ,
date : '۱۴۰۰/۱۲/۱۵' ,
time : '۱۴:۴۶' ,
numberOfQ : '۳۲' ,
price : 250000
} ,
]
} ) ;
if ( gameId !== 2 ) {
setPopUp ( true )
}
console . log ( gameId )
} }
>
{ /* {console.log(product)} */ }
< Product
key = { index }
productsType = { filter . productsType }
product = { product }
index = { Number ( index ) }
productName = { ` ${ product ? . name } ` }
productCat = { ` پایه ${ grades [ product ? . gradeId ] } ` }
productPrice = { product ? . price }
// productImg={"https://dnvn.ir/api/v1/file/" + product?.fileIds}
numberOfRegards = { 160 }
productHolderBorder = ""
productHolderHoverBorder = "shadow-md"
teacher = { product . vodTeacher }
catId = { gameId }
onClick = { ( ) => null }
btnOnClick = { ( ) => {
pushToCart ( {
productId : product ? . id ,
count : 1 ,
} ) ;
setTimeout ( ( ) => setPopUp ( false ) , 1 )
console . log ( popup )
console . log ( product . id )
}
}
/ >
< / d i v >
) ) }
{
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-1/5" >
< h1 className = "text-red26 font-bold" > افزایش مبلغ دلخواه < / h 1 >
< p className = "text-red26 text-sm" > لطفا مبلغ دلخواه خود را در کادر روبرو وارد کنید < / p >
< / d i v >
< div className = "flex" >
< input
placeholder = "12,000,000"
className = "border border-red52 rounded-lg h-12 w-36 text-center rounded-l-none border-l-0 px-4 outline-none"
/ > < p c l a s s N a m e = " b o r d e r f l e x j u s t i f y - c e n t e r i t e m s - c e n t e r b o r d e r - r e d 5 2 r o u n d e d - l g h - 1 2 w - 1 2 t e x t - c e n t e r r o u n d e d - r - n o n e b o r d e r - r - 0 p x - 4 " > ر ی ا ل < / p >
< / d i v >
< div className = "flex" >
< p className = "border flex justify-center items-center border-red52 rounded-lg h-12 w-12 text-center rounded-l-none border-l-0 px-10" > بابت < / p >
< input
placeholder = "شارژ حساب"
className = "border border-red52 rounded-lg h-12 w-60 text-center rounded-r-none border-r-0 px-4 outline-none"
/ >
< / d i v >
< button className = "cursor-pointer text-red26 border border-red52 rounded-lg bg-red82OP font-bold text-sm px-6 h-12" > افزودن به اعتبار < / b u t t o n >
< / d i v >
}
< / d i v >
< / d i v >
{ ! isMobile && < div className = "w-1/4 left-0" style = { { height : "100vh" } } >
< ShoppingCart / >
< / d i v > }
< / d i v >
) ;
}
// Mobile Version
else {
return (
< div className = "flex flex-col items-center mt-16 mb-40 rtl" >
< Games
selectedGames = { selectedGames }
gameId = { gameId }
chooseGame = { chooseGame }
/ >
< div className = "w-11/12 border-b border-gray-200" > < / d i v >
{
gameId !== 6 && < div className = "flex items-center mx-4 my-4" >
< svg
xmlns = "http://www.w3.org/2000/svg"
width = "40"
height = "40"
viewBox = "0 0 14.378 14.378"
>
< g
id = "vuesax_linear_filter-tick"
data - name = "vuesax/linear/filter-tick"
transform = "translate(-620 -700)"
>
< g id = "filter-tick" transform = "translate(620 700)" >
< path
id = "Vector"
d = "M5.691,2.846a2.8,2.8,0,0,1-.407,1.468A2.836,2.836,0,0,1,2.846,5.691,2.768,2.768,0,0,1,1.312,5.23a2.685,2.685,0,0,1-.9-.917A2.807,2.807,0,0,1,0,2.846,2.848,2.848,0,0,1,2.846,0a2.648,2.648,0,0,1,.623.072A2.84,2.84,0,0,1,5.691,2.846Z"
transform = "translate(7.267 5.991)"
fill = "none"
stroke = "#696969"
strokeLinecap = "round"
strokeLinejoin = "round"
strokeWidth = "0.6"
/ >
< path
id = "Vector-2"
data - name = "Vector"
d = "M0,.7l.7.7L2.217,0"
transform = "translate(9.004 8.136)"
fill = "none"
stroke = "#696969"
strokeLinecap = "round"
strokeLinejoin = "round"
strokeWidth = "0.6"
/ >
< path
id = "Vector-3"
data - name = "Vector"
d = "M0,0H14.378V14.378H0Z"
transform = "translate(14.378 14.378) rotate(180)"
fill = "none"
opacity = "0"
/ >
< g id = "Group" transform = "translate(1.983 1.198)" >
< path
id = "Vector-4"
data - name = "Vector"
d = "M10.412,1.21V2.54a2.292,2.292,0,0,1-.605,1.4l-1.054.929a2.648,2.648,0,0,0-.623-.072A2.848,2.848,0,0,0,5.284,7.638,2.807,2.807,0,0,0,5.7,9.106a2.685,2.685,0,0,0,.9.917v.2a1.336,1.336,0,0,1-.545,1.03l-.845.545a1.233,1.233,0,0,1-1.875-1.03V7.567A2.342,2.342,0,0,0,2.846,6.3l-2.3-2.42A2.041,2.041,0,0,1,0,2.666V1.27A1.229,1.229,0,0,1,1.21,0H9.2A1.215,1.215,0,0,1,10.412,1.21Z"
fill = "none"
stroke = "#696969"
strokeLinecap = "round"
strokeLinejoin = "round"
strokeWidth = "0.6"
/ >
< / g >
< / g >
< / g >
< / s v g >
< div
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
$ { filterCheck [ 0 ]
? "border-red52 text-red52 bg-pinkF5"
: "border-gray200 text-gray-400"
} ` }
onClick = { ( prevState ) =>
setFilterCheck ( [
... prevState ,
( filterCheck [ 0 ] = ! filterCheck [ 0 ] ) ,
] )
}
>
< h3 > آنلاین < / h 3 >
{ filterCheck [ 0 ] && (
< 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" >
< svg
width = "37"
height = "37"
viewBox = "0 0 24 24"
fill = "none"
xmlns = "http://www.w3.org/2000/svg"
>
< path
d = "M7.75 12L10.58 14.83L16.25 9.17004"
stroke = "#fff"
strokeWidth = "1.5"
strokeLinecap = "round"
strokeLinejoin = "round"
/ >
< / s v g >
< / d i v >
< / d i v >
) }
< / d i v >
< div
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
$ { filterCheck [ 1 ]
? "border-red52 text-red52 bg-pinkF5"
: "border-gray200 text-gray-400"
} ` }
onClick = { ( prevState ) =>
setFilterCheck ( [
... prevState ,
( filterCheck [ 0 ] = ! filterCheck [ 0 ] ) ,
] )
}
>
< h3 > حضوری < / h 3 >
{ filterCheck [ 0 ] && (
< 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" >
< svg
width = "37"
height = "37"
viewBox = "0 0 24 24"
fill = "none"
xmlns = "http://www.w3.org/2000/svg"
>
< path
d = "M7.75 12L10.58 14.83L16.25 9.17004"
stroke = "#fff"
strokeWidth = "1.5"
strokeLinecap = "round"
strokeLinejoin = "round"
/ >
< / s v g >
< / d i v >
< / d i v >
) }
< / d i v >
< / d i v >
}
< div className = "w-11/12 border-b border-gray-200" > < / d i v >
< div
className = { ` flex items-center w-full justify-center flex-col ` } className = { ` flex items-center w-full justify-center flex-col ` }
> >
{ books ? . map ( ( product , index ) => ( { books ? . map ( ( product , index ) => (
@ -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 : '۱۴۰۰/۱۲/۱۳' ,
@ -654,29 +664,29 @@ const Services = ({
< div className = "w-full text-right mb-4" > < div className = "w-full text-right mb-4" >
< h1 className = "text-red26 font-bold" > افزایش مبلغ دلخواه < / h 1 > < h1 className = "text-red26 font-bold" > افزایش مبلغ دلخواه < / h 1 >
< p className = "text-red26 text-sm" > لطفا مبلغ دلخواه خود را در کادر روبرو وارد کنید < / p > < p className = "text-red26 text-sm" > لطفا مبلغ دلخواه خود را در کادر روبرو وارد کنید < / p >
< / d i v > < / d i v >
< div className = "flex w-full mb-4" > < div className = "flex w-full mb-4" >
< input < input
placeholder = "12,000,000" placeholder = "12,000,000"
className = "border border-red5B rounded-lg h-14 w-3/4 text-center rounded-l-none border-l-0 px-4 outline-none" className = "border border-red5B rounded-lg h-14 w-3/4 text-center rounded-l-none border-l-0 px-4 outline-none"
/ > < p c l a s s N a m e = " b o r d e r f l e x j u s t i f y - c e n t e r i t e m s - c e n t e r b o r d e r - r e d 5 B r o u n d e d - l g h - 1 4 w - 1 / 4 t e x t - c e n t e r r o u n d e d - r - n o n e b o r d e r - r - 0 p x - 4 " > ر ی ا ل < / p > / > < p c l a s s N a m e = " b o r d e r f l e x j u s t i f y - c e n t e r i t e m s - c e n t e r b o r d e r - r e d 5 B r o u n d e d - l g h - 1 4 w - 1 / 4 t e x t - c e n t e r r o u n d e d - r - n o n e b o r d e r - r - 0 p x - 4 " > ر ی ا ل < / p >
< / d i v > < / d i v >
< div className = "flex w-full mb-4" > < div className = "flex w-full mb-4" >
< p className = "border flex justify-center items-center border-red52 rounded-lg h-14 w-1/5 text-center rounded-l-none border-l-0 px-10" > بابت < / p > < p className = "border flex justify-center items-center border-red52 rounded-lg h-14 w-1/5 text-center rounded-l-none border-l-0 px-10" > بابت < / p >
< input < input
placeholder = "شارژ حساب" placeholder = "شارژ حساب"
className = "border border-red52 rounded-lg h-14 w-4/5 text-center rounded-r-none border-r-0 px-4 outline-none" className = "border border-red52 rounded-lg h-14 w-4/5 text-center rounded-r-none border-r-0 px-4 outline-none"
/ > / >
< / 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 >
) )
} }
