Product Page Filtering Nav Styled Tailwind

src/assets/images/vuesax-linear-filter-tick.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g id="vuesax_linear_filter-tick" data-name="vuesax/linear/filter-tick" transform="translate(-620 -700)">
+    <g id="filter-tick">
+      <path id="Vector" d="M9.5,4.75A4.678,4.678,0,0,1,8.82,7.2,4.735,4.735,0,0,1,4.75,9.5a4.62,4.62,0,0,1-2.56-.77A4.481,4.481,0,0,1,.69,7.2,4.686,4.686,0,0,1,0,4.75,4.754,4.754,0,0,1,4.75,0,4.421,4.421,0,0,1,5.79.12,4.74,4.74,0,0,1,9.5,4.75Z" transform="translate(632.13 710)" fill="none" stroke="#05335f" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+      <path id="Vector-2" data-name="Vector" d="M0,1.17,1.17,2.34,3.7,0" transform="translate(635.03 713.58)" fill="none" stroke="#05335f" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+      <path id="Vector-3" data-name="Vector" d="M0,0H24V24H0Z" transform="translate(644 724) rotate(180)" fill="none" opacity="0"/>
+      <g id="Group">
+        <path id="Vector-4" data-name="Vector" d="M17.38,2.02V4.24a3.825,3.825,0,0,1-1.01,2.33L14.61,8.12A4.421,4.421,0,0,0,13.57,8a4.754,4.754,0,0,0-4.75,4.75,4.686,4.686,0,0,0,.69,2.45,4.481,4.481,0,0,0,1.5,1.53v.34a2.23,2.23,0,0,1-.91,1.72l-1.41.91a2.058,2.058,0,0,1-3.13-1.72V12.63a3.91,3.91,0,0,0-.81-2.12L.91,6.47A3.407,3.407,0,0,1,0,4.45V2.12A2.051,2.051,0,0,1,2.02,0H15.36A2.027,2.027,0,0,1,17.38,2.02Z" transform="translate(623.31 702)" fill="none" stroke="#05335f" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+      </g>
+    </g>
+  </g>
+</svg>

src/views/Products/layouts/Main.js

@@ -1,9 +1,43 @@
 import React from 'react';
 import { connect } from 'react-redux';
 
-export const Main = ({}) => {
+import filterIcon from '../../../assets/images/vuesax-linear-filter-tick.svg';
-  return <div className="flex flex-col w-3/4 p-4 bg-green-300">
 
+export const Main = ({ }) => {
+
+  const filteringNavItems = [
+    {
+      title: 'بیشترین بازدید'
+    },
+    {
+      title: 'پرفروش ترین'
+    },
+    {
+      title: 'کمترین قیمت'
+    },
+    {
+      title: 'بیشترین قیمت'
+    },
+    {
+      title: 'محبوب ترین'
+    },
+  ];
+  return <div className="flex flex-col w-3/4 p-4 ">
+    <div className="flex w-full bg-blue rounded-lg border border-solid border-gray-200 p-2 items-center my-2.5 justify-center text-blue52">
+      <div className='flex text-xs items-center mx-4'>
+        <img src={filterIcon} />
+        <span>
+          مرتب سازی بر اساس
+        </span>
+      </div>
+      <ul className='flex justify-between w-3/4 px-4 py-0 '>
+        {
+          filteringNavItems.map(e => (
+            <li className='text-sm rounded py-2 px-6 transition-all	hover:bg-gray-300 hover:text-blueC0 cursor-pointer'>{e.title}</li>
+          ))
+        }
+      </ul>
+    </div>
   </div>;
 };