feat(web): add support for community icons in icon card

Update IconCard component to handle both regular icons and community-submitted icons. Community icons use HTTP URLs as image source and link to /community/:name instead of /icons/:name for proper routing
This commit is contained in:
Thomas Camlong
2025-10-01 18:22:42 +02:00
parent fc39fd12c9
commit db893d4f97

View File

@@ -7,12 +7,20 @@ import type { Icon } from "@/types/icons"
export function IconCard({ name, data: iconData, matchedAlias }: { name: string; data: Icon; matchedAlias?: string }) {
const formatedIconName = formatIconName(name)
const isCommunityIcon = iconData.base.startsWith("http")
const imageUrl = isCommunityIcon
? iconData.base
: `${BASE_URL}/${iconData.base}/${iconData.colors?.light || name}.${iconData.base}`
const linkHref = isCommunityIcon ? `/community/${name}` : `/icons/${name}`
return (
<MagicCard className="rounded-md shadow-md">
<Link prefetch={false} href={`/icons/${name}`} className="group flex flex-col items-center p-3 sm:p-4 cursor-pointer">
<Link prefetch={false} href={linkHref} className="group flex flex-col items-center p-3 sm:p-4 cursor-pointer">
<div className="relative h-16 w-16 mb-2">
<Image
src={`${BASE_URL}/${iconData.base}/${iconData.colors?.light || name}.${iconData.base}`}
src={imageUrl}
alt={`${name} icon`}
fill
className="object-contain p-1 group-hover:scale-110 transition-transform duration-300"