Filters Made

src/App.css

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

src/view/services/index.js

@@ -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 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) => (
                         <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>
     );
 };