diff --git a/src/App.js b/src/App.js index bdcc502..0875402 100644 --- a/src/App.js +++ b/src/App.js @@ -68,7 +68,7 @@ function App() { {/* */} {/* */} {/* */} - + {/* */} {/* */} {/* */} {/* */} diff --git a/src/components/ReactTable3/TabBar.js b/src/components/ReactTable3/TabBar.js new file mode 100644 index 0000000..d3e5f1d --- /dev/null +++ b/src/components/ReactTable3/TabBar.js @@ -0,0 +1,84 @@ +import React from "react"; + +const TabBar = () => { + const tabs = [ + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + ]; + return ( +
    { + 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) => ( +
  • + { + if (window.isDown) return e.preventDefault(); + ///do here + }} + aria-current="page" + className="inline-block py-4 px-4 text-sm font-medium text-center text-blue-600 bg-gray-100 rounded-t-lg active dark:bg-gray-800 dark:text-blue-500" + > + + {el} x + + +
  • + ))} +
+ ); +}; + +export default TabBar;