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;