victorAnumudu
49 lines
2.1 KiB
React
49 lines
2.1 KiB
React
import { MdKeyboardDoubleArrowRight } from 'react-icons/md'
|
|
import { TiHomeOutline } from 'react-icons/ti'
|
|
import DashboardHeader from '../layouts/DashboardHeader'
|
|
|
|
export default function BreadcrumbCom({title, span, paths}) {
|
|
|
|
// const [stickNav, setStickNav] = useState(false)
|
|
|
|
// useEffect(()=>{
|
|
// // var rect = navRef?.current?.getBoundingClientRect()?.bottom;
|
|
// var rect = 10;
|
|
// window.addEventListener('scroll', ()=>{
|
|
// if(window.scrollY >= rect + 20){
|
|
// setStickNav(true)
|
|
// console.log('tru')
|
|
// }else{
|
|
// setStickNav(false)
|
|
// console.log('false')
|
|
// }
|
|
// })
|
|
// },[])
|
|
|
|
return (
|
|
// ${stickNav ? 'sticky top-0 transition-[top] duration-1000 shadow-md shadow-black' : '-top-[100px] static'}
|
|
<div className={`sticky z-[970] top-[78px] lg:-top-10 bg-white-body dark:bg-black-body dark:border-b dark:border-black-box dark:shadow-sm dark:shadow-black-box`}>
|
|
<div className= {`w-full py-2 flex justify-between items-center`}>
|
|
<div className='flex flex-col gap-2'>
|
|
<div className='flex flex-col md:flex-row gap-1 md:items-center'>
|
|
<h1 className='text-12 sm:text-lg md:text-2xl text-black dark:text-white-body font-semibold'>{title}</h1>
|
|
<span className='text-red-500 text-10 sm:text-base'>{span && span}</span>
|
|
</div>
|
|
<div className='flex gap-2 items-center text-black-gray dark:text-white-body text-base'>
|
|
<TiHomeOutline className='text-black dark:text-white-body' />
|
|
{paths.map((item, index) => (
|
|
<div className='flex gap-2 items-center text-black dark:text-white-body text-10 sm:text-sm' key={index}>
|
|
<MdKeyboardDoubleArrowRight />
|
|
<p className={`${index + 1 === paths.length ? 'text-sky-600 dark:text-white-body/70' : ''}`}>{item}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className='hidden lg:flex'>
|
|
<DashboardHeader />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|