refactor: breadcrumb icon

Author: didinele

apps/website/src/app/dashboard/_components/DashboardCrumbs.tsx

@@ -2,11 +2,13 @@
 
 import { useParams } from 'next/navigation';
 import { Breadcrumb } from '@/components/common/Breadcrumb';
+import { GuildIcon } from '@/components/common/GuildIcon';
 import { client } from '@/data/client';
 import { sortGuilds } from '@/utils/util';
 
 export interface DashboardCrumbSegment {
 	readonly href?: string;
+	readonly icon?: React.ReactNode;
 	readonly label: string;
 }
 
@@ -43,8 +45,8 @@ export function DashboardCrumbs({ segments }: DashboardCrumbProps) {
 				{
 					label: guild.name,
 					href: segments.length === 0 ? undefined : `/dashboard/${guild.id}`,
-					highlight: true,
-					...(guildOptions.length > 0 && { options: guildOptions }),
+					icon: <GuildIcon data={guild} disableLink hasBots />,
+					options: guildOptions,
 				},
 				...segments.map(({ href, ...rest }) => {
 					if (href) {

apps/website/src/components/common/Breadcrumb.tsx

@@ -12,6 +12,7 @@ export interface BreadcrumbOption {
 export interface BreadcrumbSegment {
 	readonly highlight?: boolean;
 	readonly href?: string | undefined;
+	readonly icon?: React.ReactNode;
 	readonly label: string;
 	readonly options?: readonly BreadcrumbOption[];
 }
@@ -32,14 +33,15 @@ export function Breadcrumb({ segments }: BreadcrumbProps) {
 						{hasOptions ? (
 							<BreadcrumbDropdown
 								highlight={segment.highlight}
+								icon={segment.icon}
 								isLast={isLast}
 								label={segment.label}
 								options={segment.options}
 							/>
 						) : segment.href ? (
 							<Link
 								className={cn(
-									'hover:text-primary dark:hover:text-primary-dark',
+									'flex items-center gap-2 hover:text-primary dark:hover:text-primary-dark',
 									isLast
 										? 'text-primary dark:text-primary-dark font-medium'
 										: 'text-secondary dark:text-secondary-dark',
@@ -49,6 +51,7 @@ export function Breadcrumb({ segments }: BreadcrumbProps) {
 								href={segment.href}
 								prefetch
 							>
+								{segment.icon}
 								{segment.label}
 							</Link>
 						) : (
@@ -60,6 +63,7 @@ export function Breadcrumb({ segments }: BreadcrumbProps) {
 									segment.highlight && 'italic',
 								)}
 							>
+								{segment.icon}
 								{segment.label}
 							</span>
 						)}

apps/website/src/components/common/BreadcrumbDropdown.tsx

@@ -10,12 +10,13 @@ import { cn, getGuildAcronym } from '@/utils/util';
 
 interface BreadcrumbDropdownProps {
 	readonly highlight?: boolean | undefined;
+	readonly icon?: React.ReactNode;
 	readonly isLast: boolean;
 	readonly label: string;
 	readonly options: readonly BreadcrumbOption[];
 }
 
-export function BreadcrumbDropdown({ label, options, isLast, highlight }: BreadcrumbDropdownProps) {
+export function BreadcrumbDropdown({ label, icon, options, isLast, highlight }: BreadcrumbDropdownProps) {
 	return (
 		<DropdownMenu.Root>
 			<DropdownMenu.Trigger asChild>
@@ -26,6 +27,7 @@ export function BreadcrumbDropdown({ label, options, isLast, highlight }: Breadc
 						highlight && 'italic',
 					)}
 				>
+					{icon}
 					{label}
 					<SvgChevronDown />
 				</Button>

apps/website/src/components/common/GuildIcon.tsx

@@ -1,21 +1,35 @@
 import type { MeGuild } from '@chatsift/api';
 import Image from 'next/image';
 import Link from 'next/link';
-import { cn, getGuildAcronym } from '@/utils/util';
+import type { PropsWithChildren } from 'react';
+import { getGuildAcronym } from '@/utils/util';
 
 export interface GuildIconProps {
 	readonly data: MeGuild;
 	readonly disableLink?: boolean;
 	readonly hasBots: boolean;
 }
 
+interface ParentProps extends PropsWithChildren {
+	readonly disableLink: boolean | undefined;
+	readonly url: string | undefined;
+}
+
+function Parent({ children, disableLink, url }: ParentProps) {
+	if (disableLink || !url) {
+		return <>{children}</>;
+	}
+
+	return <Link href={url}>{children}</Link>;
+}
+
 export function GuildIcon({ data, hasBots, disableLink }: GuildIconProps) {
 	const icon = data?.icon ? `https://cdn.discordapp.com/icons/${data.id}/${data.icon}.png` : null;
 	const url = hasBots ? `/dashboard/${data.id}` : undefined;
 
 	return (
 		<div className="flex flex-row items-center">
-			<Link className={cn((disableLink || !url) && 'pointer-events-none')} href={url ?? '#'}>
+			<Parent disableLink={disableLink} url={url}>
 				{icon ? (
 					<Image
 						alt="Guild icon"
@@ -29,7 +43,7 @@ export function GuildIcon({ data, hasBots, disableLink }: GuildIconProps) {
 						{getGuildAcronym(data.name)}
 					</p>
 				)}
-			</Link>
+			</Parent>
 		</div>
 	);
 }