From 3e98ab7bda5427364620ce1e6a387992f401713c Mon Sep 17 00:00:00 2001
From: Anirban Biswas <139000437+Rustix69@users.noreply.github.com>
Date: Wed, 15 Jan 2025 21:32:20 +0530
Subject: [PATCH] Fix : DOM Nesting in BreadCrumbs.tsx (#9942)

---
 src/components/Common/Breadcrumbs.tsx | 125 +++++++++++++-------------
 1 file changed, 64 insertions(+), 61 deletions(-)

diff --git a/src/components/Common/Breadcrumbs.tsx b/src/components/Common/Breadcrumbs.tsx
index 5437db0336d..72951c5a98e 100644
--- a/src/components/Common/Breadcrumbs.tsx
+++ b/src/components/Common/Breadcrumbs.tsx
@@ -7,7 +7,6 @@ import {
   Breadcrumb,
   BreadcrumbItem,
   BreadcrumbList,
-  BreadcrumbSeparator,
 } from "@/components/ui/breadcrumb";
 import { Button } from "@/components/ui/button";
 import {
@@ -82,15 +81,24 @@ export default function Breadcrumbs({
   const renderCrumb = (crumb: any, index: number) => {
     const isLastItem = index === crumbs!.length - 1;
     return (
-      <li
+      <BreadcrumbItem
         key={crumb.name}
         className={classNames("text-sm font-normal", crumb.style)}
       >
         <div className="flex items-center">
-          <BreadcrumbSeparator className="text-gray-400" />
-          {isLastItem && <span className="text-gray-600">{crumb.name}</span>}
+          {!isLastItem ? (
+            <Button
+              asChild
+              variant="link"
+              className="p-1 font-normal text-gray-800 hover:text-gray-700"
+            >
+              <Link href={crumb.uri}>{crumb.name}</Link>
+            </Button>
+          ) : (
+            <span className="text-gray-600">{crumb.name}</span>
+          )}
         </div>
-      </li>
+      </BreadcrumbItem>
     );
   };
 
@@ -98,72 +106,67 @@ export default function Breadcrumbs({
     <Breadcrumb>
       <nav className={classNames("w-full", className)} aria-label="Breadcrumb">
         <BreadcrumbList>
-          <ol className="flex flex-wrap items-center">
-            {!hideBack && (
-              <li className="mr-3 flex items-center">
-                <Button
-                  variant="link"
-                  type="button"
-                  className="rounded bg-gray-200/50 px-1 text-sm font-normal text-gray-800 transition hover:bg-gray-200/75 hover:no-underline"
-                  size="xs"
-                  onClick={() => {
-                    if (onBackClick && onBackClick() === false) return;
-                    goBack(backUrl);
-                  }}
-                >
-                  <CareIcon icon="l-arrow-left" className="h-5 text-gray-700" />
-                  <span className="pr-2">Back</span>
-                </Button>
-              </li>
-            )}
+          {!hideBack && (
             <BreadcrumbItem>
               <Button
-                asChild
                 variant="link"
-                className="p-1 font-normal text-gray-800 hover:text-gray-700"
+                type="button"
+                className="rounded bg-gray-200/50 px-1 text-sm font-normal text-gray-800 transition hover:bg-gray-200/75 hover:no-underline"
+                size="xs"
+                onClick={() => {
+                  if (onBackClick && onBackClick() === false) return;
+                  goBack(backUrl);
+                }}
               >
-                <Link href="/">Home</Link>
+                <CareIcon icon="l-arrow-left" className="h-5 text-gray-700" />
+                <span className="pr-2">Back</span>
               </Button>
             </BreadcrumbItem>
-            {crumbs && crumbs.length > 1 && (
-              <>
-                {!showFullPath && (
-                  <li>
-                    <div className="flex items-center ml-[-2px]">
-                      <BreadcrumbSeparator className="text-gray-400" />
-                      <DropdownMenu>
-                        <DropdownMenuTrigger asChild>
+          )}
+          <BreadcrumbItem>
+            <Button
+              asChild
+              variant="link"
+              className="p-1 font-normal text-gray-800 hover:text-gray-700"
+            >
+              <Link href="/">Home</Link>
+            </Button>
+          </BreadcrumbItem>
+          {crumbs && crumbs.length > 1 && (
+            <>
+              {!showFullPath && (
+                <BreadcrumbItem>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button
+                        variant="link"
+                        className="h-auto p-0 font-light text-gray-500 hover:text-gray-700"
+                        onClick={() => setShowFullPath(true)}
+                      >
+                        •••
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="start">
+                      {crumbs.slice(0, -1).map((crumb, index) => (
+                        <DropdownMenuItem key={index}>
                           <Button
+                            asChild
                             variant="link"
-                            className="h-auto p-0 font-light text-gray-500 hover:text-gray-700"
-                            onClick={() => setShowFullPath(true)}
+                            className="p-1 font-normal text-gray-800 underline underline-offset-2 hover:text-gray-700"
                           >
-                            •••
+                            <Link href={crumb.uri}>{crumb.name}</Link>
                           </Button>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent align="start">
-                          {crumbs.slice(0, -1).map((crumb, index) => (
-                            <DropdownMenuItem key={index}>
-                              <Button
-                                asChild
-                                variant="link"
-                                className="p-1 font-normal text-gray-800 underline underline-offset-2 hover:text-gray-700"
-                              >
-                                <Link href={crumb.uri}>{crumb.name}</Link>
-                              </Button>
-                            </DropdownMenuItem>
-                          ))}
-                        </DropdownMenuContent>
-                      </DropdownMenu>
-                    </div>
-                  </li>
-                )}
-                {showFullPath && crumbs.slice(0, -1).map(renderCrumb)}
-              </>
-            )}
-            {crumbs?.length &&
-              renderCrumb(crumbs[crumbs.length - 1], crumbs.length - 1)}
-          </ol>
+                        </DropdownMenuItem>
+                      ))}
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </BreadcrumbItem>
+              )}
+              {showFullPath && crumbs.slice(0, -1).map(renderCrumb)}
+            </>
+          )}
+          {crumbs?.length &&
+            renderCrumb(crumbs[crumbs.length - 1], crumbs.length - 1)}
         </BreadcrumbList>
       </nav>
     </Breadcrumb>