You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

122 lines
3.5 KiB

3 years ago
import React, { useRef } from "react";
import BasicTable from "./BasicTable";
// import useDraggableScroll from "use-draggable-scroll";
3 years ago
import cancleIcon from "./zarbedar-icon.svg";
const ReactTable4 = ({ breadCrumbs, subTitle, title }) => {
3 years ago
return (
3 years ago
<div className="my-10 w-11/12 mx-auto">
3 years ago
{/* breadCrumb */}
<div className="flex flex-row items-center">
{breadCrumbs.map((breadCrumb, index) => (
<div className="flex flex-row items-center">
<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"
}`}
>
{" > "}
</div>
)}
</div>
))}
</div>
<div className="my-7">
{/* 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 Title */}
<div className="flex flex-row items-center mt-4">
<div className="w-1 h-5 bg-gray-400 rounded ml-1"></div>
3 years ago
<h2 className="text-xs">{subTitle}</h2>
3 years ago
</div>
</div>
3 years ago
<Tabbar />
3 years ago
<BasicTable />
</div>
);
};
window.isDown = false;
3 years ago
export default ReactTable4;
3 years ago
3 years ago
export function Tabbar({}) {
3 years ago
const ref = useRef(null);
// const { onMouseDown } = useDraggableScroll(ref);
3 years ago
const tabs = ["فروشگاه دانوین", "مهدی عندلیب"];
3 years ago
return (
<ul
3 years ago
className="tabbar flex no-scrollbar overflow-x-scroll scrolling-touch"
3 years ago
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) => (
3 years ago
<li
onClick={(e) => {
if (window.isDown) return e.preventDefault();
}}
aria-current="page"
3 years ago
className="flex flex-row items-center text-sm text-center active px-4 py-4 rounded-sm mx-1"
3 years ago
style={{ backgroundColor: "#F1F6FF" }}
>
<span className="">{el}</span>
3 years ago
<img src={cancleIcon} className="w-2 h-2 mr-2" />
3 years ago
</li>
))}
</ul>
);
}
3 years ago
ReactTable4.defaultProps = {
3 years ago
breadCrumbs: [
{
name: "صفحه اصلی",
active: false,
},
{
name: "آمار و گزارشات",
active: false,
},
{
name: "فروش محصولات",
active: false,
},
{
name: "سال 1400",
active: true,
},
],
title: "میزان فروش محصولات",
subTitle: "اطلاعات جداول مشخصاتی کارکنان مجموعه ایران تایر",
};