import React, { useRef } from "react";
import BasicTable from "./BasicTable";
// import useDraggableScroll from "use-draggable-scroll";
import cancleIcon from "./zarbedar-icon.svg";
const ReactTable4 = ({ breadCrumbs, subTitle, title }) => {
return (
{/* breadCrumb */}
{breadCrumbs.map((breadCrumb, index) => (
{breadCrumb.name}
{Number(index) !== breadCrumbs.length - 1 && (
{" > "}
)}
))}
{/* page Title */}
{/* page Title */}
{/*
*/}
);
};
window.isDown = false;
export default ReactTable4;
export function Tabbar({}) {
const ref = useRef(null);
// const { onMouseDown } = useDraggableScroll(ref);
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();
}}
aria-current="page"
className="flex flex-row items-center text-sm text-center active px-2 py-1 rounded-sm mx-1"
style={{ backgroundColor: "#F1F6FF" }}
>
{el}
))}
);
}
ReactTable4.defaultProps = {
breadCrumbs: [
{
name: "صفحه اصلی",
active: false,
},
{
name: "آمار و گزارشات",
active: false,
},
{
name: "فروش محصولات",
active: false,
},
{
name: "سال 1400",
active: true,
},
],
title: "میزان فروش محصولات",
subTitle: "اطلاعات جداول مشخصاتی کارکنان مجموعه ایران تایر",
};