openstatus.dev / openstatus
Openstatus www.openstatus.dev
fork atom

🍞 icon in breadcrum (#1347)

* 🔥 icon in breadcrum

* ci: apply automated fixes

* 🔥

* ci: apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

authored by

Thibault Le Ouay
autofix-ci[bot] and committed by
GitHub f4bcfd54 e53b530c

+84 -17
+10
apps/dashboard/src/app/(dashboard)/cli/breadcrumb.tsx
··· 1 + "use client"; 2 + 3 + import { NavBreadcrumb } from "@/components/nav/nav-breadcrumb"; 4 + import { Terminal } from "lucide-react"; 5 + 6 + export function Breadcrumb() { 7 + return ( 8 + <NavBreadcrumb items={[{ type: "page", label: "CLI", icon: Terminal }]} /> 9 + ); 10 + }
+2 -2
apps/dashboard/src/app/(dashboard)/cli/layout.tsx
··· 5 5 } from "@/components/nav/app-header"; 6 6 import { AppSidebarTrigger } from "@/components/nav/app-sidebar"; 7 7 8 - import { NavBreadcrumb } from "@/components/nav/nav-breadcrumb"; 8 + import { Breadcrumb } from "./breadcrumb"; 9 9 import { NavActions } from "./nav-actions"; 10 10 11 11 export default function Layout({ children }: { children: React.ReactNode }) { ··· 14 14 <AppHeader> 15 15 <AppHeaderContent> 16 16 <AppSidebarTrigger /> 17 - <NavBreadcrumb items={[{ type: "page", label: "CLI" }]} /> 17 + <Breadcrumb /> 18 18 </AppHeaderContent> 19 19 <AppHeaderActions> 20 20 <NavActions />
+8 -1
apps/dashboard/src/app/(dashboard)/monitors/(list)/breadcrumb.tsx
··· 1 + "use client"; 2 + 1 3 import { NavBreadcrumb } from "@/components/nav/nav-breadcrumb"; 4 + import { Activity } from "lucide-react"; 2 5 3 6 export function Breadcrumb() { 4 - return <NavBreadcrumb items={[{ type: "page", label: "Monitors" }]} />; 7 + return ( 8 + <NavBreadcrumb 9 + items={[{ type: "page", label: "Monitors", icon: Activity }]} 10 + /> 11 + ); 5 12 }
+2 -2
apps/dashboard/src/app/(dashboard)/monitors/[id]/breadcrumb.tsx
··· 3 3 import { NavBreadcrumb } from "@/components/nav/nav-breadcrumb"; 4 4 import { useTRPC } from "@/lib/trpc/client"; 5 5 import { useQuery } from "@tanstack/react-query"; 6 - import { Cog, LayoutGrid, Logs, Siren } from "lucide-react"; 6 + import { Activity, Cog, LayoutGrid, Logs, Siren } from "lucide-react"; 7 7 import { useParams } from "next/navigation"; 8 8 9 9 export function Breadcrumb() { ··· 18 18 return ( 19 19 <NavBreadcrumb 20 20 items={[ 21 - { type: "link", label: "Monitors", href: "/monitors" }, 21 + { type: "link", label: "Monitors", href: "/monitors", icon: Activity }, 22 22 { type: "page", label: monitor.name }, 23 23 { 24 24 type: "select",
+2
apps/dashboard/src/app/(dashboard)/monitors/create/breadcrumb.tsx
··· 1 1 "use client"; 2 2 3 3 import { NavBreadcrumb } from "@/components/nav/nav-breadcrumb"; 4 + import { Activity } from "lucide-react"; 4 5 5 6 export function Breadcrumb() { 6 7 return ( ··· 10 11 type: "link", 11 12 label: "Monitors", 12 13 href: "/monitors", 14 + icon: Activity, 13 15 }, 14 16 { type: "page", label: "Create Monitor" }, 15 17 ]}
+12
apps/dashboard/src/app/(dashboard)/notifications/breadcrumb.tsx
··· 1 + "use client"; 2 + 3 + import { NavBreadcrumb } from "@/components/nav/nav-breadcrumb"; 4 + import { Bell } from "lucide-react"; 5 + 6 + export function Breadcrumb() { 7 + return ( 8 + <NavBreadcrumb 9 + items={[{ type: "page", label: "Notifications", icon: Bell }]} 10 + /> 11 + ); 12 + }
+2 -2
apps/dashboard/src/app/(dashboard)/notifications/layout.tsx
··· 4 4 AppHeaderContent, 5 5 } from "@/components/nav/app-header"; 6 6 import { AppSidebarTrigger } from "@/components/nav/app-sidebar"; 7 - import { NavBreadcrumb } from "@/components/nav/nav-breadcrumb"; 8 7 import { HydrateClient, getQueryClient, trpc } from "@/lib/trpc/server"; 8 + import { Breadcrumb } from "./breadcrumb"; 9 9 import { NavActions } from "./nav-actions"; 10 10 11 11 export default async function Layout({ ··· 20 20 <AppHeader> 21 21 <AppHeaderContent> 22 22 <AppSidebarTrigger /> 23 - <NavBreadcrumb items={[{ type: "page", label: "Notifications" }]} /> 23 + <Breadcrumb /> 24 24 </AppHeaderContent> 25 25 <AppHeaderActions> 26 26 <NavActions />
+12
apps/dashboard/src/app/(dashboard)/overview/breadcrumb.tsx
··· 1 + "use client"; 2 + 3 + import { NavBreadcrumb } from "@/components/nav/nav-breadcrumb"; 4 + import { LayoutGrid } from "lucide-react"; 5 + 6 + export function Breadcrumb() { 7 + return ( 8 + <NavBreadcrumb 9 + items={[{ type: "page", label: "Overview", icon: LayoutGrid }]} 10 + /> 11 + ); 12 + }
+2 -2
apps/dashboard/src/app/(dashboard)/overview/layout.tsx
··· 5 5 } from "@/components/nav/app-header"; 6 6 import { AppSidebarTrigger } from "@/components/nav/app-sidebar"; 7 7 8 - import { NavBreadcrumb } from "@/components/nav/nav-breadcrumb"; 8 + import { Breadcrumb } from "./breadcrumb"; 9 9 import { NavActions } from "./nav-actions"; 10 10 11 11 export default function Layout({ children }: { children: React.ReactNode }) { ··· 14 14 <AppHeader> 15 15 <AppHeaderContent> 16 16 <AppSidebarTrigger /> 17 - <NavBreadcrumb items={[{ type: "page", label: "Overview" }]} /> 17 + <Breadcrumb /> 18 18 </AppHeaderContent> 19 19 <AppHeaderActions> 20 20 <NavActions />
+1 -1
apps/dashboard/src/app/(dashboard)/settings/general/breadcrumb.tsx
··· 7 7 return ( 8 8 <NavBreadcrumb 9 9 items={[ 10 - { type: "page", label: "Settings" }, 10 + { type: "page", label: "Settings", icon: Cog }, 11 11 { 12 12 type: "select", 13 13 items: [
+6 -1
apps/dashboard/src/app/(dashboard)/status-pages/(list)/breadcrumb.tsx
··· 1 1 "use client"; 2 2 3 3 import { NavBreadcrumb } from "@/components/nav/nav-breadcrumb"; 4 + import { PanelTop } from "lucide-react"; 4 5 5 6 export function Breadcrumb() { 6 - return <NavBreadcrumb items={[{ type: "page", label: "Status Pages" }]} />; 7 + return ( 8 + <NavBreadcrumb 9 + items={[{ type: "page", label: "Status Pages", icon: PanelTop }]} 10 + /> 11 + ); 7 12 }
+2 -1
apps/dashboard/src/app/(dashboard)/status-pages/[id]/breadcrumb.tsx
··· 3 3 import { NavBreadcrumb } from "@/components/nav/nav-breadcrumb"; 4 4 import { useTRPC } from "@/lib/trpc/client"; 5 5 import { useQuery } from "@tanstack/react-query"; 6 - import { Cog, Hammer, Megaphone, Users } from "lucide-react"; 6 + import { Cog, Hammer, Megaphone, PanelTop, Users } from "lucide-react"; 7 7 import { useParams } from "next/navigation"; 8 8 9 9 export function Breadcrumb() { ··· 22 22 type: "link", 23 23 label: "Status Pages", 24 24 href: "/status-pages", 25 + icon: PanelTop, 25 26 }, 26 27 { type: "page", label: statusPage.title }, 27 28 {
+2
apps/dashboard/src/app/(dashboard)/status-pages/create/breadcrumb.tsx
··· 1 1 "use client"; 2 2 3 3 import { NavBreadcrumb } from "@/components/nav/nav-breadcrumb"; 4 + import { PanelTop } from "lucide-react"; 4 5 5 6 export function Breadcrumb() { 6 7 return ( ··· 10 11 type: "link", 11 12 label: "Status Pages", 12 13 href: "/status-pages", 14 + icon: PanelTop, 13 15 }, 14 16 { type: "page", label: "Create Status Page" }, 15 17 ]}
+21 -5
apps/dashboard/src/components/nav/nav-breadcrumb.tsx
··· 26 26 type: "link"; 27 27 label: string; 28 28 href: string; 29 + icon?: LucideIcon; 29 30 } 30 31 | { 31 32 type: "page"; 32 33 label: string; 34 + icon?: LucideIcon; 33 35 } 34 36 | { 35 37 type: "select"; ··· 46 48 return ( 47 49 <Breadcrumb> 48 50 <BreadcrumbList> 51 + <BreadcrumbSeparator className="hidden md:block" /> 49 52 {items.map((item, i) => ( 50 53 <Fragment key={`${item.type}-${i}`}> 51 54 <BreadcrumbItem> 52 55 {item.type === "link" ? ( 53 56 <BreadcrumbLink className="hidden md:block" asChild> 54 - <Link href={item.href}>{item.label}</Link> 57 + <> 58 + {item.icon && <item.icon size={16} aria-hidden="true" />} 59 + <Link href={item.href} className="font-commit-mono"> 60 + {item.label} 61 + </Link> 62 + </> 55 63 </BreadcrumbLink> 56 64 ) : null} 57 65 {item.type === "page" ? ( 58 - <BreadcrumbPage className="hidden max-w-[120px] truncate md:block lg:max-w-[200px]"> 59 - {item.label} 66 + <BreadcrumbPage className=" hidden max-w-[120px] truncate font-commit-mono md:block lg:max-w-[200px] "> 67 + <span className="flex items-center gap-1.5"> 68 + {item.icon && <item.icon size={16} aria-hidden="true" />} 69 + 70 + {item.label} 71 + </span> 60 72 </BreadcrumbPage> 61 73 ) : null} 62 74 {item.type === "select" ? ( ··· 68 80 > 69 81 <SelectTrigger 70 82 id="select-option" 71 - className="text-foreground [&>span]:flex [&>span]:items-center [&>span]:gap-2 [&>span_svg]:shrink-0 [&>span_svg]:text-muted-foreground/80" 83 + className="font-commit-mono text-foreground [&>span]:flex [&>span]:items-center [&>span]:gap-2 [&>span_svg]:shrink-0 [&>span_svg]:text-muted-foreground/80" 72 84 aria-label="Select option" 73 85 > 74 86 <SelectValue placeholder="Select option" /> 75 87 </SelectTrigger> 76 88 <SelectContent> 77 89 {item.items.map((item, i) => ( 78 - <SelectItem key={i} value={item.value}> 90 + <SelectItem 91 + key={i} 92 + value={item.value} 93 + className="font-commit-mono" 94 + > 79 95 <item.icon size={16} aria-hidden="true" /> 80 96 {item.label} 81 97 </SelectItem>