chore: breadcrumbs ui component (#2458)

* chore: swap breadcrumbs component with plane/ui component

* chore: breadcrumb refactor

web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx

@@ -1,5 +1,7 @@
 import React from "react";
 import { useRouter } from "next/router";
+import Link from "next/link";
+
 import useSWR, { mutate } from "swr";
 // services
 import { ProjectService } from "services/project";
@@ -12,8 +14,7 @@ import useUserAuth from "hooks/use-user-auth";
 // components
 import { SettingsSidebar } from "components/project";
 // ui
-import { ContrastIcon, DiceIcon, ToggleSwitch } from "@plane/ui";
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+import { BreadcrumbItem, Breadcrumbs, ContrastIcon, DiceIcon, ToggleSwitch } from "@plane/ui";
 // icons
 import { FileText, Inbox, Layers } from "lucide-react";
 // types
@@ -140,11 +141,15 @@ const FeaturesSettings: NextPage = () => {
   return (
     <ProjectAuthorizationWrapper
       breadcrumbs={
-        <Breadcrumbs>
+        <Breadcrumbs onBack={() => router.back()}>
           <BreadcrumbItem
-            title={`${truncateText(projectDetails?.name ?? "Project", 32)}`}
-            link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
-            linkTruncate
+            link={
+              <Link href={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}>
+                <a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
+                  <p className="truncate">{`${truncateText(projectDetails?.name ?? "Project", 32)}`}</p>
+                </a>
+              </Link>
+            }
           />
           <BreadcrumbItem title="Features Settings" unshrinkTitle />
         </Breadcrumbs>