Filters Made

main
Pedram Keshavarzi 3 years ago
parent 78dd3fe364
commit a17f3e1173
  1. 3
      src/App.css
  2. 185
      src/view/services/index.js

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

@ -4,6 +4,14 @@ import { book, publicApi } from "../../redux/actions";
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import Product from '../../components/Product'; 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, const Services = ({ isMobile,
books, books,
getList, getList,
@ -15,7 +23,8 @@ const Services = ({ isMobile,
headerOptions, headerOptions,
videos, videos,
}) => { }) => {
const [checked, setChecked] = useState([false, false, false, false, false, false]);
const [filterCheck, setFilterCheck] = useState([false, false, false, false]);
const [filter, setFilter] = useState({ const [filter, setFilter] = useState({
search: "", search: "",
grade: "", grade: "",
@ -36,10 +45,176 @@ const Services = ({ isMobile,
gradeFilter(filter.grade); gradeFilter(filter.grade);
}, [filter]); }, [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 ( return (
<div className="" style={{ width: '93.5%', marginRight: '6.5%', marginTop: '8.5%' }}> <div className="flex items-start justify-between" style={{ width: '93.5%', direction: 'rtl' }}>
<div> <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) => ( {books?.map((product, index) => (
<Link to={"/class/" + product?.id}> <Link to={"/class/" + product?.id}>
<Product <Product
@ -62,6 +237,10 @@ const Services = ({ isMobile,
))} ))}
</div> </div>
</div> </div>
<div className="w-1/4 fixed bg-gray-200 left-0 pt-40" style={{ height: '100vh' }}>
Cart
</div>
</div>
); );
}; };

Loading…
Cancel
Save