small visual enhancements to icons

src/app/[orgId]/settings/resources/[resourceId]/layout.tsx

@@ -8,13 +8,21 @@ import { AxiosResponse } from "axios";
 import { redirect } from "next/navigation";
 import { authCookieHeader } from "@app/api/cookies";
 import { SidebarSettings } from "@app/components/SidebarSettings";
-import Link from "next/link";
-import { ArrowLeft, Cloud, Settings, Shield } from "lucide-react";
+import {  Cloud, Settings, Shield } from "lucide-react";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 import { GetOrgResponse } from "@server/routers/org";
 import OrgProvider from "@app/providers/OrgProvider";
 import { cache } from "react";
 import ResourceInfoBox from "./components/ResourceInfoBox";
+import {
+    Breadcrumb,
+    BreadcrumbItem,
+    BreadcrumbLink,
+    BreadcrumbList,
+    BreadcrumbPage,
+    BreadcrumbSeparator,
+} from "@app/components/ui/breadcrumb";
+import Link from "next/link";
 
 interface ResourceLayoutProps {
     children: React.ReactNode;
@@ -31,7 +39,7 @@ export default async function ResourceLayout(props: ResourceLayoutProps) {
     try {
         const res = await internal.get<AxiosResponse<GetResourceResponse>>(
             `/resource/${params.resourceId}`,
-            await authCookieHeader()
+            await authCookieHeader(),
         );
         resource = res.data.data;
     } catch {
@@ -60,8 +68,8 @@ export default async function ResourceLayout(props: ResourceLayoutProps) {
         const getOrg = cache(async () =>
             internal.get<AxiosResponse<GetOrgResponse>>(
                 `/org/${params.orgId}`,
-                await authCookieHeader()
-            )
+                await authCookieHeader(),
+            ),
         );
         const res = await getOrg();
         org = res.data.data;
@@ -94,15 +102,17 @@ export default async function ResourceLayout(props: ResourceLayoutProps) {
     return (
         <>
             <div className="mb-4">
-                <Link
-                    href="../../"
-                    className="text-muted-foreground hover:underline"
-                >
-                    <div className="flex flex-row items-center gap-1">
-                        <ArrowLeft className="w-4 h-4" />{" "}
-                        <span>All Resources</span>
-                    </div>
-                </Link>
+                <Breadcrumb>
+                    <BreadcrumbList>
+                        <BreadcrumbItem>
+                            <Link href="../">Resources</Link>
+                        </BreadcrumbItem>
+                        <BreadcrumbSeparator />
+                        <BreadcrumbItem>
+                            <BreadcrumbPage>{resource.name}</BreadcrumbPage>
+                        </BreadcrumbItem>
+                    </BreadcrumbList>
+                </Breadcrumb>
             </div>
 
             <SettingsSectionTitle
@@ -112,10 +122,7 @@ export default async function ResourceLayout(props: ResourceLayoutProps) {
 
             <OrgProvider org={org}>
                 <ResourceProvider resource={resource} authInfo={authInfo}>
-                    <SidebarSettings
-                        sidebarNavItems={sidebarNavItems}
-                        limitWidth={false}
-                    >
+                    <SidebarSettings sidebarNavItems={sidebarNavItems}>
                         <div className="mb-8 lg:max-w-2xl">
                             <ResourceInfoBox />
                         </div>