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.
 
 
 

63 lines
1.8 KiB

import React from "react";
const BreadCrumb = ({ breadCrumbs, grayLeftArrow, blackLeftArrow }) => {
return (
<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 ${
Number(index) === breadCrumbs.length - 1
? "text-blue-900"
: "text-blue-400"
}`}
>
{breadCrumb.name}
{/* {console.log(breadCrumb.active)} */}
</span>
{Number(index) !== breadCrumbs.length - 1 && (
<div>
{/* {console.log(breadCrumbs)}
{console.log(breadCrumbs[breadCrumbs.length - 1])}
{console.log(
breadCrumb.length ? "text-red-900" : "text-blue-400"
)} */}
{/* {breadCrumb.active === true ? (
<img src={grayLeftArrow} className="w-10" />
) : (
<img src={blackLeftArrow} className="w-10" />
)} */}
{Number(index) === breadCrumbs.length - 2 ? (
<img src={blackLeftArrow} className="w-4" alt="arrow" />
) : (
<img src={grayLeftArrow} className="w-4" alt="arrow" />
)}
</div>
)}
</div>
))}
</div>
);
};
export default BreadCrumb;
BreadCrumb.defaultProps = {
grayLeftArrow: "images/BreadCrumbgray-arrow-left.svg",
blackLeftArrow: "images/BreadCrumbblack-arrow-left.svg",
breadCrumbs: [
{
name: "صفحه اصلی",
},
{
name: "آمار و گزارشات",
},
{
name: "فروش محصولات",
},
{
name: "سال 1400",
},
],
};