chore: breadcrumbs ui component (#2458)

* chore: swap breadcrumbs component with plane/ui component

* chore: breadcrumb refactor

web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect } from "react";
 
 import { useRouter } from "next/router";
+import Link from "next/link";
 
 import useSWR, { mutate } from "swr";
 
@@ -16,8 +17,7 @@ import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
 import { IssueDetailsSidebar, IssueMainContent } from "components/issues";
 // ui
 import { EmptyState } from "components/common";
-import { Breadcrumbs } from "components/breadcrumbs";
-import { Loader } from "@plane/ui";
+import { Breadcrumbs, Loader } from "@plane/ui";
 // images
 import emptyIssue from "public/empty-state/issue.svg";
 // types
@@ -120,11 +120,18 @@ const IssueDetailsPage: NextPage = () => {
   return (
     <ProjectAuthorizationWrapper
       breadcrumbs={
-        <Breadcrumbs>
+        <Breadcrumbs onBack={() => router.back()}>
           <Breadcrumbs.BreadcrumbItem
-            title={`${truncateText(issueDetails?.project_detail.name ?? "Project", 32)} Issues`}
-            link={`/${workspaceSlug}/projects/${projectId as string}/issues`}
-            linkTruncate
+            link={
+              <Link href={`/${workspaceSlug}/projects/${projectId as string}/issues`}>
+                <a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
+                  <p className="truncate">{`${truncateText(
+                    issueDetails?.project_detail.name ?? "Project",
+                    32
+                  )} Issues`}</p>
+                </a>
+              </Link>
+            }
           />
           <Breadcrumbs.BreadcrumbItem
             title={`Issue ${issueDetails?.project_detail.identifier ?? "Project"}-${