add truncate to breadcrumbs

Author: sanjaypinna

components/BreadCrumbs/index.tsx

@@ -14,18 +14,29 @@ interface BreadCrumbsProps {
 
 const BreadCrumbs: React.FC<BreadCrumbsProps> = ({ data }) => {
   return (
-    <div className="sticky top-[70px] lg:top-[85px] z-1 bg-secondaryOrange px-6 py-2 lg:px-10 border-b">
+    <div className="border-b sticky top-[70px] z-1 bg-secondaryOrange px-6 py-2 lg:top-[85px] lg:px-10">
       <Breadcrumb className="mx-1">
-        <BreadcrumbList className=''>
+        <BreadcrumbList className="">
           {data.map((item, index) => (
             <React.Fragment key={index}>
               {index === data.length - 1 ? (
                 <BreadcrumbItem>
-                  <BreadcrumbPage className='font-bold' >{item.label}</BreadcrumbPage>
+                  <BreadcrumbPage
+                    title={item.label}
+                    className="max-w-[20ch] truncate  font-bold lg:max-w-[40ch]"
+                  >
+                    {item.label}
+                  </BreadcrumbPage>
                 </BreadcrumbItem>
               ) : (
                 <BreadcrumbItem>
-                  <BreadcrumbLink href={item.href} className=' font-bold '>{item.label}</BreadcrumbLink>
+                  <BreadcrumbLink
+                    href={item.href}
+                    title={item.label}
+                    className="max-w-[20ch] truncate  font-bold lg:max-w-[40ch]"
+                  >
+                    {item.label}
+                  </BreadcrumbLink>
                 </BreadcrumbItem>
               )}
               {index < data.length - 1 && <BreadcrumbSeparator />}