chore: breadcrumbs ui component (#2458)

* chore: swap breadcrumbs component with plane/ui component

* chore: breadcrumb refactor

web/pages/[workspaceSlug]/settings/exports.tsx

@@ -1,4 +1,5 @@
 import { useRouter } from "next/router";
+import Link from "next/link";
 
 import useSWR from "swr";
 
@@ -10,7 +11,7 @@ import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy";
 import ExportGuide from "components/exporter/guide";
 import { SettingsSidebar } from "components/project";
 // ui
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+import { BreadcrumbItem, Breadcrumbs } from "@plane/ui";
 // types
 import type { NextPage } from "next";
 // fetch-keys
@@ -32,11 +33,15 @@ const ImportExport: NextPage = () => {
   return (
     <WorkspaceAuthorizationLayout
       breadcrumbs={
-        <Breadcrumbs>
+        <Breadcrumbs onBack={() => router.back()}>
           <BreadcrumbItem
-            title={`${truncateText(activeWorkspace?.name ?? "Workspace", 32)}`}
-            link={`/${workspaceSlug}`}
-            linkTruncate
+            link={
+              <Link href={`/${workspaceSlug}`}>
+                <a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
+                  <p className="truncate">{`${truncateText(activeWorkspace?.name ?? "Workspace", 32)}`}</p>
+                </a>
+              </Link>
+            }
           />
           <BreadcrumbItem title="Export Settings" unshrinkTitle />
         </Breadcrumbs>