update

src/App.js

@@ -48,6 +48,7 @@ import Digikala from "./components/Digikala";
 // import Digikala from "./components/Digikala/ImageSlider";
 
 import Switch from "./components/Switch";
+import BreadCrumb from "./components/BreadCrumb";
 
 function App() {
   return (
@@ -100,6 +101,7 @@ function App() {
             <FooterDesign1 />
           </span>
         </div> */}
+        <BreadCrumb />
       </div>
     </Provider>
   );

src/components/BreadCrumb/black-arrow-left.svg

@@ -0,0 +1,4 @@
+<svg id="arrow-left" xmlns="http://www.w3.org/2000/svg" width="10.112" height="10.112" viewBox="0 0 10.112 10.112">
+  <path id="Vector" d="M2.99,6.674.243,3.927a.837.837,0,0,1,0-1.18L2.99,0" transform="translate(3.329 1.719)" fill="none" stroke="#00253a" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+  <path id="Vector-2" data-name="Vector" d="M0,0H10.112V10.112H0Z" transform="translate(10.112 10.112) rotate(180)" fill="none" opacity="0"/>
+</svg>

src/components/BreadCrumb/gray-arrow-left.svg

@@ -0,0 +1,4 @@
+<svg id="arrow-left" xmlns="http://www.w3.org/2000/svg" width="10.112" height="10.112" viewBox="0 0 10.112 10.112">
+  <path id="Vector" d="M2.99,6.674.243,3.927a.837.837,0,0,1,0-1.18L2.99,0" transform="translate(3.329 1.719)" fill="none" stroke="#cbcbcb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+  <path id="Vector-2" data-name="Vector" d="M0,0H10.112V10.112H0Z" transform="translate(10.112 10.112) rotate(180)" fill="none" opacity="0"/>
+</svg>

src/components/BreadCrumb/index.js

@@ -0,0 +1,61 @@
+import React from "react";
+
+import grayLeftArrow from "./gray-arrow-left.svg";
+import blackLeftArrow from "./black-arrow-left.svg";
+
+const BreadCrumb = ({ breadCrumbs }) => {
+  return (
+    <div>
+      <div className="flex flex-row items-center">
+        {breadCrumbs.map((breadCrumb, index) => (
+          <div className="flex flex-row items-center" key={index}>
+            <span
+              className={`cursor-pointer text-xs hover:text-blue-900  ${
+                breadCrumb.active ? "text-blue-900" : "text-blue-400"
+              }`}
+            >
+              {breadCrumb.name}
+            </span>
+            {Number(index) !== breadCrumbs.length - 1 && (
+              <div
+                className={`mx-2 ${
+                  breadCrumb.active ? "text-blue-900" : "text-blue-400"
+                }`}
+              >
+                {/* {breadCrumb.active === true ? (
+                  <img src={grayLeftArrow} className="w-10" />
+                ) : (
+                  <img src={blackLeftArrow} className="w-10" />
+                )} */}
+                <img src={grayLeftArrow} className="w-4" />
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default BreadCrumb;
+
+BreadCrumb.defaultProps = {
+  breadCrumbs: [
+    {
+      name: "صفحه اصلی",
+      active: false,
+    },
+    {
+      name: "آمار و گزارشات",
+      active: false,
+    },
+    {
+      name: "فروش محصولات",
+      active: false,
+    },
+    {
+      name: "سال 1400",
+      active: true,
+    },
+  ],
+};

src/components/FileManager/index.js

@@ -0,0 +1,7 @@
+import React from "react";
+
+const index = () => {
+  return <div>index</div>;
+};
+
+export default index;

src/components/ReactTable4/index.js

@@ -1,10 +1,11 @@
 import React, { useRef, useState } from "react";
 
 import BasicTable from "./BasicTable";
+import TitleSubtitle from "../TitleSubtitle";
+
 import MultiRangeInput from "./MultiRangeInput";
 
 import grayLeftArrow from "./gray-arrow-left.svg";
-import blackLeftArrow from "./black-arrow-left.svg";
 
 const ReactTable4 = ({ breadCrumbs, subTitle, title }) => {
   const [tabs, setTabs] = useState([
@@ -56,16 +57,7 @@ const ReactTable4 = ({ breadCrumbs, subTitle, title }) => {
         ))}
       </div>
       <div className="my-7">
-        {/* page Title */}
+        <TitleSubtitle />
-        <div className="flex flex-row items-center">
-          <div className="w-1 h-5 bg-blue-500 rounded ml-1"></div>
-          <h2 className="text-base text-blue-900">{title}</h2>
-        </div>
-        {/* page subTitle */}
-        <div className="flex flex-row items-center mt-4">
-          <div className="w-1 h-5 bg-gray-400 rounded ml-1"></div>
-          <h2 className="text-xs">{subTitle}</h2>
-        </div>
       </div>
       <BasicTable
         addTab={addTab}
@@ -80,66 +72,6 @@ const ReactTable4 = ({ breadCrumbs, subTitle, title }) => {
 
 export default ReactTable4;
 
-// export function Tabbar({ tabs, delTab, setActivateTab, activeTab }) {
-//   // const { onMouseDown } = useDraggableScroll(ref);
-
-//   return (
-//     <ul
-//       className="tabbar flex no-scrollbar overflow-x-scroll scrolling-touch"
-//       onMouseDown={(e) => {
-//         const slider = window.document.querySelector(".tabbar");
-//         window.isDown = true;
-//         window.startX = e.pageX - slider.offsetLeft;
-//         window.scrollLeft = slider.scrollLeft;
-//       }}
-//       onMouseLeave={(e) => {
-//         window.isDown = false;
-//       }}
-//       onMouseUp={(e) => {
-//         window.isDown = false;
-//       }}
-//       onMouseMove={(e) => {
-//         const slider = window.document.querySelector(".tabbar");
-//         if (!window.isDown) return;
-//         e.preventDefault();
-//         const x = e.pageX - slider.offsetLeft;
-//         const walk = (x - window.startX) * 1;
-//         slider.scrollLeft = window.scrollLeft - walk;
-//       }}
-//     >
-//       {tabs.map((el, index) => (
-//         <li
-//           key={index}
-//           onClick={(e) => {
-//             if (window.isDown) return e.preventDefault();
-//           }}
-//           aria-current="page"
-//           className="flex flex-row items-center text-sm text-center active rounded-sm px-4"
-//           style={{
-//             backgroundColor: activeTab === el.id ? "#92c1fc" : "#F1F6FF",
-//             color: activeTab === el.id ? "#fff" : "#000",
-//           }}
-//         >
-//           <div className="h-full py-2" onClick={(e) => setActivateTab(el.id)}>
-//             {el.name}
-//           </div>
-//           {el.id ? (
-//             <img
-//               src={cancleIcon}
-//               className="w-2 mr-3"
-//               alt=""
-//               onClick={(e) => {
-//                 e.preventDefault();
-//                 delTab(el.id);
-//               }}
-//             />
-//           ) : null}
-//         </li>
-//       ))}
-//     </ul>
-//   );
-// }
-
 ReactTable4.defaultProps = {
   breadCrumbs: [
     {

src/components/TitleSubtitle/index.js

@@ -0,0 +1,25 @@
+import React from "react";
+
+const TitleSubtitle = ({ title, subTitle }) => {
+  return (
+    <div>
+      {/*  page Title */}
+      <div className="flex flex-row items-center">
+        <div className="w-1 h-5 bg-blue-500 rounded ml-1"></div>
+        <h2 className="text-base text-blue-900">{title}</h2>
+      </div>
+      {/* page subTitle */}
+      <div className="flex flex-row items-center mt-4">
+        <div className="w-1 h-5 bg-gray-400 rounded ml-1"></div>
+        <h2 className="text-xs">{subTitle}</h2>
+      </div>
+    </div>
+  );
+};
+
+export default TitleSubtitle;
+
+TitleSubtitle.defaultProps = {
+  title: "میزان فروش محصولات",
+  subTitle: "اطلاعات جداول مشخصاتی کارکنان مجموعه ایران تایر",
+};