andwati/dokploy
1
0
Fork 0
mirror of https://github.com/andwati/dokploy.git synced 2026-11-11 06:25:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(ui): apply Biome format to time badge and headers

Browse Source
This commit is contained in:
Aathil Felix
2025-11-01 19:09:58 +05:30
parent 0f100c7bc8
commit 53b66e41e2
3 changed files with 1485 additions and 1442 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/dokploy/components/dashboard/projects/show.tsx
+40 -25
View File
@@ -81,7 +81,7 @@ export const ShowProjects = () => {
const filtered = data.filter( const filtered = data.filter(
(project) => (project) =>
project.name.toLowerCase().includes(searchQuery.toLowerCase()) || project.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
project.description?.toLowerCase().includes(searchQuery.toLowerCase()) project.description?.toLowerCase().includes(searchQuery.toLowerCase()),
); );
// Then sort the filtered results // Then sort the filtered results
@@ -223,7 +223,7 @@ export const ShowProjects = () => {
env.postgres.length === 0 && env.postgres.length === 0 &&
env.redis.length === 0 && env.redis.length === 0 &&
env.applications.length === 0 && env.applications.length === 0 &&
env.compose.length === 0 env.compose.length === 0,
) )
.every(Boolean); .every(Boolean);
@@ -236,7 +236,7 @@ export const ShowProjects = () => {
env.postgres.length + env.postgres.length +
env.redis.length + env.redis.length +
env.applications.length + env.applications.length +
env.compose.length env.compose.length,
) )
.reduce((acc, curr) => acc + curr, 0); .reduce((acc, curr) => acc + curr, 0);
@@ -244,16 +244,18 @@ export const ShowProjects = () => {
.map( .map(
(env) => (env) =>
env.applications.length > 0 || env.applications.length > 0 ||
env.compose.length > 0 env.compose.length > 0,
) )
.some(Boolean); .some(Boolean);
return ( return (
<div <div
key={project.projectId} key={project.projectId}
className="w-full lg:max-w-md"> className="w-full lg:max-w-md"
>
<Link <Link
href={`/dashboard/project/${project.projectId}/environment/${project?.environments?.[0]?.environmentId}`}> href={`/dashboard/project/${project.projectId}/environment/${project?.environments?.[0]?.environmentId}`}
>
<Card className="group relative w-full h-full bg-transparent transition-colors hover:bg-border"> <Card className="group relative w-full h-full bg-transparent transition-colors hover:bg-border">
{haveServicesWithDomains ? ( {haveServicesWithDomains ? (
<DropdownMenu> <DropdownMenu>
@@ -261,15 +263,17 @@ export const ShowProjects = () => {
<Button <Button
className="absolute -right-3 -top-3 size-9 translate-y-1 rounded-full p-0 opacity-0 transition-all duration-200 group-hover:translate-y-0 group-hover:opacity-100" className="absolute -right-3 -top-3 size-9 translate-y-1 rounded-full p-0 opacity-0 transition-all duration-200 group-hover:translate-y-0 group-hover:opacity-100"
size="sm" size="sm"
variant="default"> variant="default"
>
<ExternalLinkIcon className="size-3.5" /> <ExternalLinkIcon className="size-3.5" />
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent <DropdownMenuContent
className="w-[200px] space-y-2 overflow-y-auto max-h-[400px]" className="w-[200px] space-y-2 overflow-y-auto max-h-[400px]"
onClick={(e) => e.stopPropagation()}> onClick={(e) => e.stopPropagation()}
>
{project.environments.some( {project.environments.some(
(env) => env.applications.length > 0 (env) => env.applications.length > 0,
) && ( ) && (
<DropdownMenuGroup> <DropdownMenuGroup>
<DropdownMenuLabel> <DropdownMenuLabel>
@@ -292,7 +296,8 @@ export const ShowProjects = () => {
{app.domains.map((domain) => ( {app.domains.map((domain) => (
<DropdownMenuItem <DropdownMenuItem
key={domain.domainId} key={domain.domainId}
asChild> asChild
>
<Link <Link
className="space-x-4 text-xs cursor-pointer justify-between" className="space-x-4 text-xs cursor-pointer justify-between"
target="_blank" target="_blank"
@@ -302,7 +307,8 @@ export const ShowProjects = () => {
: "http" : "http"
}://${domain.host}${ }://${domain.host}${
domain.path domain.path
}`}> }`}
>
<span className="truncate"> <span className="truncate">
{domain.host} {domain.host}
</span> </span>
@@ -312,12 +318,12 @@ export const ShowProjects = () => {
))} ))}
</DropdownMenuGroup> </DropdownMenuGroup>
</div> </div>
)) )),
)} )}
</DropdownMenuGroup> </DropdownMenuGroup>
)} )}
{project.environments.some( {project.environments.some(
(env) => env.compose.length > 0 (env) => env.compose.length > 0,
) && ( ) && (
<DropdownMenuGroup> <DropdownMenuGroup>
<DropdownMenuLabel> <DropdownMenuLabel>
@@ -338,7 +344,8 @@ export const ShowProjects = () => {
{comp.domains.map((domain) => ( {comp.domains.map((domain) => (
<DropdownMenuItem <DropdownMenuItem
key={domain.domainId} key={domain.domainId}
asChild> asChild
>
<Link <Link
className="space-x-4 text-xs cursor-pointer justify-between" className="space-x-4 text-xs cursor-pointer justify-between"
target="_blank" target="_blank"
@@ -348,7 +355,8 @@ export const ShowProjects = () => {
: "http" : "http"
}://${domain.host}${ }://${domain.host}${
domain.path domain.path
}`}> }`}
>
<span className="truncate"> <span className="truncate">
{domain.host} {domain.host}
</span> </span>
@@ -358,7 +366,7 @@ export const ShowProjects = () => {
))} ))}
</DropdownMenuGroup> </DropdownMenuGroup>
</div> </div>
)) )),
)} )}
</DropdownMenuGroup> </DropdownMenuGroup>
)} )}
@@ -385,31 +393,36 @@ export const ShowProjects = () => {
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
className="px-2"> className="px-2"
>
<MoreHorizontalIcon className="size-5" /> <MoreHorizontalIcon className="size-5" />
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent <DropdownMenuContent
className="w-[200px] space-y-2 overflow-y-auto max-h-[280px]" className="w-[200px] space-y-2 overflow-y-auto max-h-[280px]"
onClick={(e) => e.stopPropagation()}> onClick={(e) => e.stopPropagation()}
>
<DropdownMenuLabel className="font-normal"> <DropdownMenuLabel className="font-normal">
Actions Actions
</DropdownMenuLabel> </DropdownMenuLabel>
<div <div
onClick={(e) => e.stopPropagation()}> onClick={(e) => e.stopPropagation()}
>
<ProjectEnvironment <ProjectEnvironment
projectId={project.projectId} projectId={project.projectId}
/> />
</div> </div>
<div <div
onClick={(e) => e.stopPropagation()}> onClick={(e) => e.stopPropagation()}
>
<HandleProject <HandleProject
projectId={project.projectId} projectId={project.projectId}
/> />
</div> </div>
<div <div
onClick={(e) => e.stopPropagation()}> onClick={(e) => e.stopPropagation()}
>
{(auth?.role === "owner" || {(auth?.role === "owner" ||
auth?.canDeleteProjects) && ( auth?.canDeleteProjects) && (
<AlertDialog> <AlertDialog>
@@ -418,7 +431,8 @@ export const ShowProjects = () => {
className="w-full cursor-pointer space-x-3" className="w-full cursor-pointer space-x-3"
onSelect={(e) => onSelect={(e) =>
e.preventDefault() e.preventDefault()
}> }
>
<TrashIcon className="size-4" /> <TrashIcon className="size-4" />
<span>Delete</span> <span>Delete</span>
</DropdownMenuItem> </DropdownMenuItem>
@@ -458,18 +472,19 @@ export const ShowProjects = () => {
}) })
.then(() => { .then(() => {
toast.success( toast.success(
"Project deleted successfully" "Project deleted successfully",
); );
}) })
.catch(() => { .catch(() => {
toast.error( toast.error(
"Error deleting this project" "Error deleting this project",
); );
}) })
.finally(() => { .finally(() => {
utils.project.all.invalidate(); utils.project.all.invalidate();
}); });
}}> }}
>
Delete Delete
</AlertDialogAction> </AlertDialogAction>
</AlertDialogFooter> </AlertDialogFooter>
apps/dokploy/components/layouts/side.tsx
+81 -53
View File
@@ -381,7 +381,7 @@ const MENU: Menu = {
<HeartIcon <HeartIcon
className={cn( className={cn(
"text-red-500 fill-red-600 animate-heartbeat", "text-red-500 fill-red-600 animate-heartbeat",
className className,
)} )}
/> />
), ),
@@ -406,7 +406,7 @@ function createMenuForAuthUser(opts: {
: item.isEnabled({ : item.isEnabled({
auth: opts.auth, auth: opts.auth,
isCloud: opts.isCloud, isCloud: opts.isCloud,
}) }),
), ),
// Filter the settings items based on the user's role and permissions // Filter the settings items based on the user's role and permissions
// Calls the `isEnabled` function if it exists to determine if the item should be displayed // Calls the `isEnabled` function if it exists to determine if the item should be displayed
@@ -416,7 +416,7 @@ function createMenuForAuthUser(opts: {
: item.isEnabled({ : item.isEnabled({
auth: opts.auth, auth: opts.auth,
isCloud: opts.isCloud, isCloud: opts.isCloud,
}) }),
), ),
// Filter the help items based on the user's role and permissions // Filter the help items based on the user's role and permissions
// Calls the `isEnabled` function if it exists to determine if the item should be displayed // Calls the `isEnabled` function if it exists to determine if the item should be displayed
@@ -426,7 +426,7 @@ function createMenuForAuthUser(opts: {
: item.isEnabled({ : item.isEnabled({
auth: opts.auth, auth: opts.auth,
isCloud: opts.isCloud, isCloud: opts.isCloud,
}) }),
), ),
}; };
} }
@@ -462,7 +462,7 @@ function isActiveRoute(opts: {
*/ */
function findActiveNavItem( function findActiveNavItem(
navItems: NavItem[], navItems: NavItem[],
pathname: string pathname: string,
): SingleNavItem | undefined { ): SingleNavItem | undefined {
const found = navItems.find((item) => const found = navItems.find((item) =>
item.isSingle !== false item.isSingle !== false
@@ -470,8 +470,8 @@ function findActiveNavItem(
isActiveRoute({ itemUrl: item.url, pathname }) isActiveRoute({ itemUrl: item.url, pathname })
: // The current item is not single, so check if any of the sub items are active : // The current item is not single, so check if any of the sub items are active
item.items.some((item) => item.items.some((item) =>
isActiveRoute({ itemUrl: item.url, pathname }) isActiveRoute({ itemUrl: item.url, pathname }),
) ),
); );
if (found?.isSingle !== false) { if (found?.isSingle !== false) {
@@ -481,7 +481,7 @@ function findActiveNavItem(
// The found item is not single, so find the active sub item // The found item is not single, so find the active sub item
return found?.items.find((item) => return found?.items.find((item) =>
isActiveRoute({ itemUrl: item.url, pathname }) isActiveRoute({ itemUrl: item.url, pathname }),
); );
} }
@@ -535,8 +535,9 @@ function SidebarLogo() {
"flex gap-2", "flex gap-2",
state === "collapsed" state === "collapsed"
? "flex-col" ? "flex-col"
: "flex-row justify-between items-center" : "flex-row justify-between items-center",
)}> )}
>
{/* Organization Logo and Selector */} {/* Organization Logo and Selector */}
<SidebarMenuItem className={"w-full"}> <SidebarMenuItem className={"w-full"}>
<DropdownMenu> <DropdownMenu>
@@ -546,22 +547,25 @@ function SidebarLogo() {
className={cn( className={cn(
"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground", "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground",
state === "collapsed" && state === "collapsed" &&
"flex justify-center items-center p-2 h-10 w-10 mx-auto" "flex justify-center items-center p-2 h-10 w-10 mx-auto",
)}> )}
>
<div <div
className={cn( className={cn(
"flex items-center gap-2", "flex items-center gap-2",
state === "collapsed" && "justify-center" state === "collapsed" && "justify-center",
)}> )}
>
<div <div
className={cn( className={cn(
"flex items-center justify-center rounded-sm border", "flex items-center justify-center rounded-sm border",
"size-6" "size-6",
)}> )}
>
<Logo <Logo
className={cn( className={cn(
"transition-all", "transition-all",
state === "collapsed" ? "size-4" : "size-5" state === "collapsed" ? "size-4" : "size-5",
)} )}
logoUrl={activeOrganization?.logo || undefined} logoUrl={activeOrganization?.logo || undefined}
/> />
@@ -569,8 +573,9 @@ function SidebarLogo() {
<div <div
className={cn( className={cn(
"flex flex-col items-start", "flex flex-col items-start",
state === "collapsed" && "hidden" state === "collapsed" && "hidden",
)}> )}
>
<p className="text-sm font-medium leading-none"> <p className="text-sm font-medium leading-none">
{activeOrganization?.name ?? "Select Organization"} {activeOrganization?.name ?? "Select Organization"}
</p> </p>
@@ -585,7 +590,8 @@ function SidebarLogo() {
className="rounded-lg" className="rounded-lg"
align="start" align="start"
side={isMobile ? "bottom" : "right"} side={isMobile ? "bottom" : "right"}
sideOffset={4}> sideOffset={4}
>
<DropdownMenuLabel className="text-xs text-muted-foreground"> <DropdownMenuLabel className="text-xs text-muted-foreground">
Organizations Organizations
</DropdownMenuLabel> </DropdownMenuLabel>
@@ -598,13 +604,14 @@ function SidebarLogo() {
}); });
window.location.reload(); window.location.reload();
}} }}
className="w-full gap-2 p-2"> className="w-full gap-2 p-2"
>
<div className="flex flex-col gap-4">{org.name}</div> <div className="flex flex-col gap-4">{org.name}</div>
<div className="flex size-6 items-center justify-center rounded-sm border"> <div className="flex size-6 items-center justify-center rounded-sm border">
<Logo <Logo
className={cn( className={cn(
"transition-all", "transition-all",
state === "collapsed" ? "size-6" : "size-10" state === "collapsed" ? "size-6" : "size-10",
)} )}
logoUrl={org.logo ?? undefined} logoUrl={org.logo ?? undefined}
/> />
@@ -624,21 +631,23 @@ function SidebarLogo() {
.then(() => { .then(() => {
refetch(); refetch();
toast.success( toast.success(
"Organization deleted successfully" "Organization deleted successfully",
); );
}) })
.catch((error) => { .catch((error) => {
toast.error( toast.error(
error?.message || error?.message ||
"Error deleting organization" "Error deleting organization",
); );
}); });
}}> }}
>
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
className="group hover:bg-red-500/10" className="group hover:bg-red-500/10"
isLoading={isRemoving}> isLoading={isRemoving}
>
<Trash2 className="size-4 text-primary group-hover:text-red-500" /> <Trash2 className="size-4 text-primary group-hover:text-red-500" />
</Button> </Button>
</DialogAction> </DialogAction>
@@ -665,8 +674,9 @@ function SidebarLogo() {
size="icon" size="icon"
className={cn( className={cn(
"relative", "relative",
state === "collapsed" && "h-8 w-8 p-1.5 mx-auto" state === "collapsed" && "h-8 w-8 p-1.5 mx-auto",
)}> )}
>
<Bell className="size-4" /> <Bell className="size-4" />
{invitations && invitations.length > 0 && ( {invitations && invitations.length > 0 && (
<span className="absolute -top-0 -right-0 flex size-4 items-center justify-center rounded-full bg-blue-500 text-xs text-white"> <span className="absolute -top-0 -right-0 flex size-4 items-center justify-center rounded-full bg-blue-500 text-xs text-white">
@@ -678,7 +688,8 @@ function SidebarLogo() {
<DropdownMenuContent <DropdownMenuContent
align="start" align="start"
side={"right"} side={"right"}
className="w-80"> className="w-80"
>
<DropdownMenuLabel>Pending Invitations</DropdownMenuLabel> <DropdownMenuLabel>Pending Invitations</DropdownMenuLabel>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
{invitations && invitations.length > 0 ? ( {invitations && invitations.length > 0 ? (
@@ -686,7 +697,8 @@ function SidebarLogo() {
<div key={invitation.id} className="flex flex-col gap-2"> <div key={invitation.id} className="flex flex-col gap-2">
<DropdownMenuItem <DropdownMenuItem
className="flex flex-col items-start gap-1 p-3" className="flex flex-col items-start gap-1 p-3"
onSelect={(e) => e.preventDefault()}> onSelect={(e) => e.preventDefault()}
>
<div className="font-medium"> <div className="font-medium">
{invitation?.organization?.name} {invitation?.organization?.name}
</div> </div>
@@ -710,14 +722,15 @@ function SidebarLogo() {
if (error) { if (error) {
toast.error( toast.error(
error.message || "Error accepting invitation" error.message || "Error accepting invitation",
); );
} else { } else {
toast.success("Invitation accepted successfully"); toast.success("Invitation accepted successfully");
await refetchInvitations(); await refetchInvitations();
await refetch(); await refetch();
} }
}}> }}
>
<Button size="sm" variant="secondary"> <Button size="sm" variant="secondary">
Accept Invitation Accept Invitation
</Button> </Button>
@@ -741,7 +754,7 @@ function SidebarLogo() {
export default function Page({ children }: Props) { export default function Page({ children }: Props) {
const [defaultOpen, setDefaultOpen] = useState<boolean | undefined>( const [defaultOpen, setDefaultOpen] = useState<boolean | undefined>(
undefined undefined,
); );
const [isLoaded, setIsLoaded] = useState(false); const [isLoaded, setIsLoaded] = useState(false);
@@ -770,7 +783,7 @@ export default function Page({ children }: Props) {
const activeItem = findActiveNavItem( const activeItem = findActiveNavItem(
[...filteredHome, ...filteredSettings], [...filteredHome, ...filteredSettings],
pathname pathname,
); );
if (!isLoaded) { if (!isLoaded) {
@@ -791,7 +804,8 @@ export default function Page({ children }: Props) {
"--sidebar-width": "19.5rem", "--sidebar-width": "19.5rem",
"--sidebar-width-mobile": "19.5rem", "--sidebar-width-mobile": "19.5rem",
} as React.CSSProperties } as React.CSSProperties
}> }
>
<Sidebar collapsible="icon" variant="floating"> <Sidebar collapsible="icon" variant="floating">
<SidebarHeader> <SidebarHeader>
{/* <SidebarMenuButton {/* <SidebarMenuButton
@@ -810,7 +824,7 @@ export default function Page({ children }: Props) {
const isActive = isSingle const isActive = isSingle
? isActiveRoute({ itemUrl: item.url, pathname }) ? isActiveRoute({ itemUrl: item.url, pathname })
: item.items.some((item) => : item.items.some((item) =>
isActiveRoute({ itemUrl: item.url, pathname }) isActiveRoute({ itemUrl: item.url, pathname }),
); );
return ( return (
@@ -818,16 +832,19 @@ export default function Page({ children }: Props) {
key={item.title} key={item.title}
asChild asChild
defaultOpen={isActive} defaultOpen={isActive}
className="group/collapsible"> className="group/collapsible"
>
<SidebarMenuItem> <SidebarMenuItem>
{isSingle ? ( {isSingle ? (
<SidebarMenuButton <SidebarMenuButton
asChild asChild
tooltip={item.title} tooltip={item.title}
className={cn(isActive && "bg-border")}> className={cn(isActive && "bg-border")}
>
<Link <Link
href={item.url} href={item.url}
className="flex w-full items-center gap-2"> className="flex w-full items-center gap-2"
>
{item.icon && ( {item.icon && (
<item.icon <item.icon
className={cn(isActive && "text-primary")} className={cn(isActive && "text-primary")}
@@ -841,7 +858,8 @@ export default function Page({ children }: Props) {
<CollapsibleTrigger asChild> <CollapsibleTrigger asChild>
<SidebarMenuButton <SidebarMenuButton
tooltip={item.title} tooltip={item.title}
isActive={isActive}> isActive={isActive}
>
{item.icon && <item.icon />} {item.icon && <item.icon />}
<span>{item.title}</span> <span>{item.title}</span>
@@ -856,16 +874,18 @@ export default function Page({ children }: Props) {
<SidebarMenuSubItem key={subItem.title}> <SidebarMenuSubItem key={subItem.title}>
<SidebarMenuSubButton <SidebarMenuSubButton
asChild asChild
className={cn(isActive && "bg-border")}> className={cn(isActive && "bg-border")}
>
<Link <Link
href={subItem.url} href={subItem.url}
className="flex w-full items-center"> className="flex w-full items-center"
>
{subItem.icon && ( {subItem.icon && (
<span className="mr-2"> <span className="mr-2">
<subItem.icon <subItem.icon
className={cn( className={cn(
"h-4 w-4 text-muted-foreground", "h-4 w-4 text-muted-foreground",
isActive && "text-primary" isActive && "text-primary",
)} )}
/> />
</span> </span>
@@ -893,7 +913,7 @@ export default function Page({ children }: Props) {
const isActive = isSingle const isActive = isSingle
? isActiveRoute({ itemUrl: item.url, pathname }) ? isActiveRoute({ itemUrl: item.url, pathname })
: item.items.some((item) => : item.items.some((item) =>
isActiveRoute({ itemUrl: item.url, pathname }) isActiveRoute({ itemUrl: item.url, pathname }),
); );
return ( return (
@@ -901,16 +921,19 @@ export default function Page({ children }: Props) {
key={item.title} key={item.title}
asChild asChild
defaultOpen={isActive} defaultOpen={isActive}
className="group/collapsible"> className="group/collapsible"
>
<SidebarMenuItem> <SidebarMenuItem>
{isSingle ? ( {isSingle ? (
<SidebarMenuButton <SidebarMenuButton
asChild asChild
tooltip={item.title} tooltip={item.title}
className={cn(isActive && "bg-border")}> className={cn(isActive && "bg-border")}
>
<Link <Link
href={item.url} href={item.url}
className="flex w-full items-center gap-2"> className="flex w-full items-center gap-2"
>
{item.icon && ( {item.icon && (
<item.icon <item.icon
className={cn(isActive && "text-primary")} className={cn(isActive && "text-primary")}
@@ -924,7 +947,8 @@ export default function Page({ children }: Props) {
<CollapsibleTrigger asChild> <CollapsibleTrigger asChild>
<SidebarMenuButton <SidebarMenuButton
tooltip={item.title} tooltip={item.title}
isActive={isActive}> isActive={isActive}
>
{item.icon && <item.icon />} {item.icon && <item.icon />}
<span>{item.title}</span> <span>{item.title}</span>
@@ -939,16 +963,18 @@ export default function Page({ children }: Props) {
<SidebarMenuSubItem key={subItem.title}> <SidebarMenuSubItem key={subItem.title}>
<SidebarMenuSubButton <SidebarMenuSubButton
asChild asChild
className={cn(isActive && "bg-border")}> className={cn(isActive && "bg-border")}
>
<Link <Link
href={subItem.url} href={subItem.url}
className="flex w-full items-center"> className="flex w-full items-center"
>
{subItem.icon && ( {subItem.icon && (
<span className="mr-2"> <span className="mr-2">
<subItem.icon <subItem.icon
className={cn( className={cn(
"h-4 w-4 text-muted-foreground", "h-4 w-4 text-muted-foreground",
isActive && "text-primary" isActive && "text-primary",
)} )}
/> />
</span> </span>
@@ -978,7 +1004,8 @@ export default function Page({ children }: Props) {
href={item.url} href={item.url}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="flex w-full items-center gap-2"> className="flex w-full items-center gap-2"
>
<span className="mr-2"> <span className="mr-2">
<item.icon className="h-4 w-4" /> <item.icon className="h-4 w-4" />
</span> </span>
@@ -1027,7 +1054,8 @@ export default function Page({ children }: Props) {
<BreadcrumbLink asChild> <BreadcrumbLink asChild>
<Link <Link
href={activeItem?.url || "/"} href={activeItem?.url || "/"}
className="flex items-center gap-1.5"> className="flex items-center gap-1.5"
>
{activeItem?.title} {activeItem?.title}
</Link> </Link>
</BreadcrumbLink> </BreadcrumbLink>