pedram
/
Andishmand
1
0
Fork 0
Code Issues 2 Pull Requests Projects Releases Wiki Activity

Filters Made

Browse Source
main
Pedram Keshavarzi 3 years ago
parent 78dd3fe364
commit a17f3e1173
2 changed files with 205 additions and 23 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      src/App.css
  2. 185
      src/view/services/index.js

3
src/App.css
Unescape View File

@ -6,3 +6,6 @@ input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
*{
transition: all 0.3s;
}

185
src/view/services/index.js
Unescape View File

@ -4,6 +4,14 @@ import { book, publicApi } from "../../redux/actions";
import { connect } from 'react-redux';
import { Link } from "react-router-dom";
import Product from '../../components/Product';
import img1 from "../../assets/img/Group 1344.svg";
import img2 from "../../assets/img/Group 1345.svg";
import img3 from "../../assets/img/Group 1349.svg";
import img4 from "../../assets/img/Group 1364.svg";
import img5 from "../../assets/img/Group 1357.svg";
import img6 from "../../assets/img/Group 1362.svg";
const Services = ({ isMobile,
books,
getList,
@ -15,7 +23,8 @@ const Services = ({ isMobile,
headerOptions,
videos,
}) => {
const [checked, setChecked] = useState([false, false, false, false, false, false]);
const [filterCheck, setFilterCheck] = useState([false, false, false, false]);
const [filter, setFilter] = useState({
search: "",
grade: "",
@ -36,10 +45,176 @@ const Services = ({ isMobile,
gradeFilter(filter.grade);
}, [filter]);
const services = [
{
title: 'کلاس های آموزشی',
image: img1,
role: ''
},
{
title: 'پیش ثبت نام مدارس',
image: img2,
role: ''
},
{
title: 'بسته های آزمون',
image: img3,
role: ''
},
{
title: 'کتاب های آموزشی',
image: img4,
role: ''
},
{
title: 'دوره های مجازی',
image: img5,
role: ''
},
{
title: 'سایر خدمات',
image: img6,
role: ''
},
];
return (
<div className="" style={{ width: '93.5%', marginRight: '6.5%', marginTop: '8.5%' }}>
<div>
<div className="flex items-start justify-between" style={{ width: '93.5%', direction: 'rtl' }}>
<div className="w-3/4 flex flex-col justify-center " style={{ marginTop: '5.5%' }}>
<div className="flex w-full flex-wrap justify-center px-4 border-b border-red82OP">
{
services.map((item, index) => (
<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"
style={{ minWidth: '175px', height: '175px' }}
onClick={() => setChecked(prevState => [...prevState, checked[index] = !checked[index]])}
>
{
checked[index] ? <div className="flex w-full px-4 " style={{ direction: 'ltr' }}>
<div className="w-6 h-6 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" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div> : <div className="h-6"></div>
}
<img src={item.image} className=" h-20 mb-4" />
<h2 className="w-full text-md text-gray-400 font-bold">{item.title}</h2>
</div>
))
}
</div>
{/* filters */}
<div className="flex mx-2 my-4 justify-center">
<div className="flex items-center ">
<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" stroke-linecap="round" stroke-linejoin="round" stroke-width="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" stroke-linecap="round" stroke-linejoin="round" stroke-width="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" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.6" />
</g>
</g>
</g>
</svg>
</div>
<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>آنلاین</h3>
{
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" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
}
</div>
<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'}`}>
<h3>حضوری</h3>
{
filterCheck[1] && <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" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
}
</div>
</div>
<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[2] ? 'border-red52 text-red52 bg-pinkF5' : 'border-gray200 text-gray-400'}`}>
<h3>دختران</h3>
{
filterCheck[2] && <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" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
}
</div>
<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[3] ? 'border-red52 text-red52 bg-pinkF5' : 'border-gray200 text-gray-400'}`}>
<h3>پسران</h3>
{
filterCheck[3] && <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" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
}
</div>
</div>
<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) => (
<option key={`Grade__${item.id}`}>{item.title}</option>
))}
</select>
</div>
</div>
<div className="flex justify-center flex-wrap " >
{books?.map((product, index) => (
<Link to={"/class/" + product?.id}>
<Product
@ -62,6 +237,10 @@ const Services = ({ isMobile,
))}
</div>
</div>
<div className="w-1/4 fixed bg-gray-200 left-0 pt-40" style={{ height: '100vh' }}>
Cart
</div>
</div>
);
};

Write Preview
Loading…
Cancel
Save