mirror of
https://github.com/walkxcode/dashboard-icons.git
synced 2025-06-28 15:30:22 +08:00
feat(icon-components): Improve image loading/error handling and add WebP support across icon-related components
This commit is contained in:
Bjorn Lammers
parent
968c696bc7
commit
9d2a35489f
@ -33,7 +33,7 @@ export async function generateMetadata({ params, searchParams }: Props, parent:
|
||||
|
||||
console.debug(`Generated metadata for ${icon} by ${authorName} (${authorData.html_url}) updated at ${updateDate.toLocaleString()}`)
|
||||
|
||||
const iconImageUrl = `${BASE_URL}/png/${icon}.png`
|
||||
const iconPreviewImageUrl = `${BASE_URL}/webp/${icon}.webp`
|
||||
const pageUrl = `${WEB_URL}/icons/${icon}`
|
||||
const formattedIconName = icon
|
||||
.split("-")
|
||||
@ -43,7 +43,11 @@ export async function generateMetadata({ params, searchParams }: Props, parent:
|
||||
return {
|
||||
title: `${formattedIconName} Icon | Dashboard Icons`,
|
||||
description: `Download the ${formattedIconName} icon in SVG, PNG, and WEBP formats for FREE. Part of a collection of ${totalIcons} curated icons for services, applications and tools, designed specifically for dashboards and app directories.`,
|
||||
assets: [iconImageUrl],
|
||||
assets: [
|
||||
`${BASE_URL}/svg/${icon}.svg`,
|
||||
`${BASE_URL}/png/${icon}.png`,
|
||||
`${BASE_URL}/webp/${icon}.webp`,
|
||||
],
|
||||
keywords: [
|
||||
`${formattedIconName} icon`,
|
||||
`${formattedIconName} icon download`,
|
||||
@ -57,7 +61,7 @@ export async function generateMetadata({ params, searchParams }: Props, parent:
|
||||
"app directory",
|
||||
],
|
||||
icons: {
|
||||
icon: iconImageUrl,
|
||||
icon: iconPreviewImageUrl,
|
||||
},
|
||||
abstract: `Download the ${formattedIconName} icon in SVG, PNG, and WEBP formats for FREE. Part of a collection of ${totalIcons} curated icons for services, applications and tools, designed specifically for dashboards and app directories.`,
|
||||
openGraph: {
|
||||
@ -70,17 +74,18 @@ export async function generateMetadata({ params, searchParams }: Props, parent:
|
||||
modifiedTime: updateDate.toISOString(),
|
||||
section: "Icons",
|
||||
tags: [formattedIconName, "dashboard icon", "service icon", "application icon", "tool icon", "web dashboard", "app directory"],
|
||||
images: [iconPreviewImageUrl],
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image",
|
||||
title: `${formattedIconName} Icon | Dashboard Icons`,
|
||||
description: `Download the ${formattedIconName} icon in SVG, PNG, and WEBP formats for FREE. Part of a collection of ${totalIcons} curated icons for services, applications and tools, designed specifically for dashboards and app directories.`,
|
||||
images: [iconImageUrl],
|
||||
images: [iconPreviewImageUrl],
|
||||
},
|
||||
alternates: {
|
||||
canonical: pageUrl,
|
||||
media: {
|
||||
png: iconImageUrl,
|
||||
png: `${BASE_URL}/png/${icon}.png`,
|
||||
svg: `${BASE_URL}/svg/${icon}.svg`,
|
||||
webp: `${BASE_URL}/webp/${icon}.webp`,
|
||||
},
|
||||
|
||||
@ -4,6 +4,8 @@ import type { Icon } from "@/types/icons"
|
||||
import Image from "next/image"
|
||||
import Link from "next/link"
|
||||
import { useState } from "react"
|
||||
import { AlertTriangle } from "lucide-react"
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
|
||||
|
||||
export function IconCard({
|
||||
name,
|
||||
@ -15,33 +17,54 @@ export function IconCard({
|
||||
matchedAlias?: string
|
||||
}) {
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
const [hasError, setHasError] = useState(false)
|
||||
|
||||
// Construct URLs for both WebP and the original format
|
||||
const webpSrc = `${BASE_URL}/webp/${name}.webp`
|
||||
const originalSrc = `${BASE_URL}/${iconData.base}/${name}.${iconData.base}`
|
||||
|
||||
const handleLoadingComplete = () => {
|
||||
setIsLoading(false)
|
||||
setHasError(false)
|
||||
}
|
||||
|
||||
const handleError = () => {
|
||||
setIsLoading(false)
|
||||
setHasError(true)
|
||||
}
|
||||
|
||||
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">
|
||||
<div className="relative h-16 w-16 mb-2">
|
||||
{isLoading && (
|
||||
<div className="relative h-16 w-16 mb-2 flex items-center justify-center">
|
||||
{isLoading && !hasError && (
|
||||
<div className="absolute inset-0 bg-gray-200 dark:bg-gray-700 animate-pulse rounded" />
|
||||
)}
|
||||
{/* Use <picture> tag for WebP support with fallback */}
|
||||
{hasError ? (
|
||||
<TooltipProvider delayDuration={300}>
|
||||
<Tooltip>
|
||||
<TooltipTrigger aria-label="Image loading error">
|
||||
<AlertTriangle className="h-8 w-8 text-red-500 cursor-help" />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="bottom">
|
||||
<p>Image failed to load, likely due to size limits. Please raise an issue on GitHub.</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
) : (
|
||||
<picture>
|
||||
<source srcSet={webpSrc} type="image/webp" />
|
||||
<source srcSet={originalSrc} type={`image/${iconData.base === 'svg' ? 'svg+xml' : iconData.base}`} />
|
||||
{/* next/image as the img fallback and for optimization */}
|
||||
<Image
|
||||
src={originalSrc} // Fallback src for next/image
|
||||
src={originalSrc}
|
||||
alt={`${name} icon`}
|
||||
fill
|
||||
className={`object-contain p-1 group-hover:scale-110 transition-transform duration-300 ${isLoading ? 'opacity-0' : 'opacity-100 transition-opacity duration-500'}`}
|
||||
onLoadingComplete={() => setIsLoading(false)}
|
||||
// Add sizes prop for responsive optimization if needed, e.g.,
|
||||
// sizes="(max-width: 640px) 50vw, (max-width: 1280px) 33vw, 16.6vw"
|
||||
className={`object-contain p-1 group-hover:scale-110 transition-transform duration-300 ${isLoading || hasError ? 'opacity-0' : 'opacity-100 transition-opacity duration-500'}`}
|
||||
onLoadingComplete={handleLoadingComplete}
|
||||
onError={handleError}
|
||||
/>
|
||||
</picture>
|
||||
)}
|
||||
</div>
|
||||
<span className="text-xs sm:text-sm text-center truncate w-full capitalize group- dark:group-hover:text-primary transition-colors duration-200 font-medium">
|
||||
{name.replace(/-/g, " ")}
|
||||
|
||||
@ -9,7 +9,7 @@ import { BASE_URL, REPO_PATH } from "@/constants"
|
||||
import type { AuthorData, Icon, IconFile } from "@/types/icons"
|
||||
import confetti from "canvas-confetti"
|
||||
import { motion } from "framer-motion"
|
||||
import { ArrowRight, Check, Copy, Download, FileType, Github, Moon, PaletteIcon, Sun } from "lucide-react"
|
||||
import { ArrowRight, Check, Copy, Download, FileType, Github, Moon, PaletteIcon, Sun, AlertTriangle } from "lucide-react"
|
||||
import Image from "next/image"
|
||||
import Link from "next/link"
|
||||
import { useCallback, useState } from "react"
|
||||
@ -26,6 +26,10 @@ export type IconDetailsProps = {
|
||||
}
|
||||
|
||||
export function IconDetails({ icon, iconData, authorData, allIcons }: IconDetailsProps) {
|
||||
// Add state for the main preview icon
|
||||
const [isPreviewLoading, setIsPreviewLoading] = useState(true)
|
||||
const [hasPreviewError, setHasPreviewError] = useState(false)
|
||||
|
||||
const authorName = authorData.name || authorData.login || ""
|
||||
const iconColorVariants = iconData.colors
|
||||
const formattedDate = new Date(iconData.update.timestamp).toLocaleDateString("en-GB", {
|
||||
@ -142,13 +146,44 @@ export function IconDetails({ icon, iconData, authorData, allIcons }: IconDetail
|
||||
}
|
||||
}
|
||||
|
||||
// Handlers for main preview icon
|
||||
const handlePreviewLoadingComplete = () => {
|
||||
setIsPreviewLoading(false)
|
||||
setHasPreviewError(false)
|
||||
}
|
||||
|
||||
const handlePreviewError = () => {
|
||||
setIsPreviewLoading(false)
|
||||
setHasPreviewError(true)
|
||||
}
|
||||
|
||||
// URLs for main preview icon
|
||||
const previewWebpSrc = `${BASE_URL}/webp/${icon}.webp`
|
||||
const previewOriginalSrc = `${BASE_URL}/${iconData.base}/${icon}.${iconData.base}`
|
||||
const previewOriginalFormat = iconData.base
|
||||
|
||||
const renderVariant = (format: string, iconName: string, theme?: "light" | "dark") => {
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
const [hasError, setHasError] = useState(false)
|
||||
|
||||
const variantName = theme && iconColorVariants?.[theme] ? iconColorVariants[theme] : iconName
|
||||
const imageUrl = `${BASE_URL}/${format}/${variantName}.${format}`
|
||||
const githubUrl = `${REPO_PATH}/tree/main/${format}/${iconName}.${format}`
|
||||
const originalFormat = iconData.base
|
||||
const originalImageUrl = `${BASE_URL}/${originalFormat}/${variantName}.${originalFormat}`
|
||||
const webpImageUrl = `${BASE_URL}/webp/${variantName}.webp`
|
||||
const githubUrl = `${REPO_PATH}/tree/main/${originalFormat}/${iconName}.${originalFormat}`
|
||||
const variantKey = `${format}-${theme || "default"}`
|
||||
const isCopied = copiedVariants[variantKey] || false
|
||||
|
||||
const handleLoadingComplete = () => {
|
||||
setIsLoading(false)
|
||||
setHasError(false)
|
||||
}
|
||||
|
||||
const handleError = () => {
|
||||
setIsLoading(false)
|
||||
setHasError(true)
|
||||
}
|
||||
|
||||
return (
|
||||
<TooltipProvider key={variantKey} delayDuration={500}>
|
||||
<MagicCard className="p-0 rounded-md">
|
||||
@ -156,50 +191,65 @@ export function IconDetails({ icon, iconData, authorData, allIcons }: IconDetail
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<motion.div
|
||||
className="relative w-28 h-28 mb-3 cursor-pointer rounded-xl overflow-hidden group"
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
onClick={(e) => handleCopy(imageUrl, variantKey, e)}
|
||||
aria-label={`Copy ${format.toUpperCase()} URL for ${iconName}${theme ? ` (${theme} theme)` : ""}`}
|
||||
className="relative w-28 h-28 mb-3 cursor-pointer rounded-xl overflow-hidden group flex items-center justify-center"
|
||||
whileHover={{ scale: hasError ? 1 : 1.05 }}
|
||||
whileTap={{ scale: hasError ? 1 : 0.95 }}
|
||||
onClick={(e) => !hasError && handleCopy(format === 'webp' ? webpImageUrl : originalImageUrl, variantKey, e)}
|
||||
aria-label={hasError ? "Image failed to load" : `Copy ${format.toUpperCase()} URL for ${iconName}${theme ? ` (${theme} theme)` : ""}`}
|
||||
>
|
||||
<div className="absolute inset-0 border-2 border-transparent group-hover:border-primary/20 rounded-xl z-10 transition-colors" />
|
||||
|
||||
{isLoading && !hasError && (
|
||||
<div className="absolute inset-0 bg-gray-200 dark:bg-gray-700 animate-pulse rounded-xl z-10" />
|
||||
)}
|
||||
{hasError ? (
|
||||
<AlertTriangle className="h-12 w-12 text-red-500 z-10 cursor-help" />
|
||||
) : (
|
||||
<>
|
||||
<div className="absolute inset-0 border-2 border-transparent group-hover:border-primary/20 rounded-xl z-10 transition-colors pointer-events-none" />
|
||||
<motion.div
|
||||
className="absolute inset-0 bg-primary/10 flex items-center justify-center z-20 rounded-xl"
|
||||
className="absolute inset-0 bg-primary/10 flex items-center justify-center z-20 rounded-xl pointer-events-none"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: isCopied ? 1 : 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
<motion.div
|
||||
initial={{ scale: 0.5, opacity: 0 }}
|
||||
animate={{
|
||||
scale: isCopied ? 1 : 0.5,
|
||||
opacity: isCopied ? 1 : 0,
|
||||
}}
|
||||
transition={{
|
||||
type: "spring",
|
||||
stiffness: 300,
|
||||
damping: 20,
|
||||
}}
|
||||
animate={{ scale: isCopied ? 1 : 0.5, opacity: isCopied ? 1 : 0 }}
|
||||
transition={{ type: "spring", stiffness: 300, damping: 20 }}
|
||||
>
|
||||
<Check className="w-8 h-8 text-primary" />
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
|
||||
<picture>
|
||||
<source srcSet={webpImageUrl} type="image/webp" />
|
||||
<source srcSet={originalImageUrl} type={`image/${originalFormat === 'svg' ? 'svg+xml' : originalFormat}`} />
|
||||
<Image
|
||||
src={imageUrl}
|
||||
src={originalImageUrl}
|
||||
alt={`${iconName} in ${format} format${theme ? ` (${theme} theme)` : ""}`}
|
||||
fill
|
||||
className="object-contain p-4"
|
||||
className={`object-contain p-4 transition-opacity duration-500 ${isLoading || hasError ? 'opacity-0' : 'opacity-100'}`}
|
||||
onLoadingComplete={handleLoadingComplete}
|
||||
onError={handleError}
|
||||
/>
|
||||
</picture>
|
||||
</>
|
||||
)}
|
||||
</motion.div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>Click to copy direct URL to clipboard</p>
|
||||
<p>
|
||||
{hasError
|
||||
? "Image failed to load, likely due to size limits. Please raise an issue on GitHub."
|
||||
: isCopied
|
||||
? "URL Copied!"
|
||||
: "Click to copy direct URL to clipboard"}
|
||||
</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
<p className="text-sm font-medium">{format.toUpperCase()}</p>
|
||||
<p className="text-sm font-medium capitalize">
|
||||
{format.toUpperCase()} {theme && `(${theme})`}
|
||||
</p>
|
||||
|
||||
<div className="flex gap-2 mt-3 w-full justify-center">
|
||||
<Tooltip>
|
||||
@ -208,14 +258,15 @@ export function IconDetails({ icon, iconData, authorData, allIcons }: IconDetail
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="h-8 w-8 rounded-lg cursor-pointer"
|
||||
onClick={(e) => handleDownload(e, imageUrl, `${iconName}.${format}`)}
|
||||
onClick={(e) => !hasError && handleDownload(e, format === 'webp' ? webpImageUrl : originalImageUrl, `${variantName}.${format}`)}
|
||||
aria-label={`Download ${iconName} in ${format} format${theme ? ` (${theme} theme)` : ""}`}
|
||||
disabled={hasError}
|
||||
>
|
||||
<Download className="w-4 h-4" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>Download icon file</p>
|
||||
<p>{hasError ? "Download unavailable" : "Download icon file"}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
@ -225,14 +276,15 @@ export function IconDetails({ icon, iconData, authorData, allIcons }: IconDetail
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="h-8 w-8 rounded-lg cursor-pointer"
|
||||
onClick={(e) => handleCopy(imageUrl, `btn-${variantKey}`, e)}
|
||||
onClick={(e) => !hasError && handleCopy(format === 'webp' ? webpImageUrl : originalImageUrl, `btn-${variantKey}`, e)}
|
||||
aria-label={`Copy URL for ${iconName} in ${format} format${theme ? ` (${theme} theme)` : ""}`}
|
||||
disabled={hasError}
|
||||
>
|
||||
{copiedVariants[`btn-${variantKey}`] ? <Check className="w-4 h-4 text-green-500" /> : <Copy className="w-4 h-4" />}
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>Copy direct URL to clipboard</p>
|
||||
<p>{hasError ? "Copy unavailable" : isCopied ? "URL Copied!" : "Copy direct URL to clipboard"}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
@ -243,7 +295,7 @@ export function IconDetails({ icon, iconData, authorData, allIcons }: IconDetail
|
||||
href={githubUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label={`View ${iconName} ${format} file on GitHub`}
|
||||
aria-label={`View ${iconName} ${originalFormat} file on GitHub`}
|
||||
>
|
||||
<Github className="w-4 h-4" />
|
||||
</Link>
|
||||
@ -268,14 +320,37 @@ export function IconDetails({ icon, iconData, authorData, allIcons }: IconDetail
|
||||
<Card className="h-full bg-background/50 border shadow-lg">
|
||||
<CardHeader className="pb-4">
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="relative w-32 h-32 rounded-xl overflow-hidden border flex items-center justify-center p-3">
|
||||
{/* Apply loading/error handling to the main preview icon */}
|
||||
<div className="relative w-32 h-32 rounded-xl overflow-hidden border flex items-center justify-center p-3 mb-4">
|
||||
{isPreviewLoading && !hasPreviewError && (
|
||||
<div className="absolute inset-0 bg-gray-200 dark:bg-gray-700 animate-pulse rounded-xl" />
|
||||
)}
|
||||
{hasPreviewError ? (
|
||||
<TooltipProvider delayDuration={300}>
|
||||
<Tooltip>
|
||||
<TooltipTrigger aria-label="Preview image loading error">
|
||||
<AlertTriangle className="h-16 w-16 text-red-500 cursor-help" />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="bottom">
|
||||
<p>Preview failed to load, likely due to size limits. Please raise an issue.</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
) : (
|
||||
<picture>
|
||||
<source srcSet={previewWebpSrc} type="image/webp" />
|
||||
<source srcSet={previewOriginalSrc} type={`image/${previewOriginalFormat === 'svg' ? 'svg+xml' : previewOriginalFormat}`} />
|
||||
<Image
|
||||
src={`${BASE_URL}/${iconData.base}/${icon}.${iconData.base}`}
|
||||
width={96}
|
||||
height={96}
|
||||
alt={`High quality ${icon.replace(/-/g, " ")} icon in ${iconData.base.toUpperCase()} format`}
|
||||
className="w-full h-full object-contain"
|
||||
src={previewOriginalSrc}
|
||||
alt={`High quality ${icon.replace(/-/g, " ")} icon preview`}
|
||||
fill // Use fill instead of width/height for parent relative sizing
|
||||
className={`object-contain transition-opacity duration-500 ${isPreviewLoading || hasPreviewError ? 'opacity-0' : 'opacity-100'}`}
|
||||
onLoadingComplete={handlePreviewLoadingComplete}
|
||||
onError={handlePreviewError}
|
||||
priority // Prioritize loading the main icon
|
||||
/>
|
||||
</picture>
|
||||
)}
|
||||
</div>
|
||||
<CardTitle className="text-2xl font-bold capitalize text-center mb-2">
|
||||
<h1>{icon.replace(/-/g, " ")}</h1>
|
||||
|
||||
@ -5,9 +5,11 @@ import { BASE_URL } from "@/constants"
|
||||
import { cn } from "@/lib/utils"
|
||||
import type { Icon, IconWithName } from "@/types/icons"
|
||||
import { format, isToday, isYesterday } from "date-fns"
|
||||
import { ArrowRight, Clock, ExternalLink } from "lucide-react"
|
||||
import { ArrowRight, Clock, ExternalLink, AlertTriangle } from "lucide-react"
|
||||
import Image from "next/image"
|
||||
import Link from "next/link"
|
||||
import { useState } from "react"
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
|
||||
|
||||
function formatIconDate(timestamp: string): string {
|
||||
const date = new Date(timestamp)
|
||||
@ -78,6 +80,24 @@ function RecentIconCard({
|
||||
name: string
|
||||
data: Icon
|
||||
}) {
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
const [hasError, setHasError] = useState(false)
|
||||
|
||||
// Construct URLs
|
||||
const webpSrc = `${BASE_URL}/webp/${name}.webp`
|
||||
const originalSrc = `${BASE_URL}/${data.base}/${name}.${data.base}`
|
||||
const originalFormat = data.base
|
||||
|
||||
const handleLoadingComplete = () => {
|
||||
setIsLoading(false)
|
||||
setHasError(false)
|
||||
}
|
||||
|
||||
const handleError = () => {
|
||||
setIsLoading(false)
|
||||
setHasError(true)
|
||||
}
|
||||
|
||||
return (
|
||||
<Link
|
||||
prefetch={false}
|
||||
@ -87,17 +107,43 @@ function RecentIconCard({
|
||||
"transition-all duration-300 hover:shadow-lg hover:shadow-rose-500/5 relative overflow-hidden hover-lift",
|
||||
"w-36 mx-2",
|
||||
)}
|
||||
aria-label={`View details for ${name.replace(/-/g, " ")} icon`}
|
||||
>
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-rose-500/5 to-transparent opacity-0 hover:opacity-100 transition-opacity duration-300" />
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-rose-500/5 to-transparent opacity-0 hover:opacity-100 transition-opacity duration-300 pointer-events-none" />
|
||||
|
||||
<div className="relative h-12 w-12 sm:h-16 sm:w-16 mb-2">
|
||||
{/* Image container with loading/error handling */}
|
||||
<div className="relative h-12 w-12 sm:h-16 sm:w-16 mb-2 flex items-center justify-center">
|
||||
{isLoading && !hasError && (
|
||||
<div className="absolute inset-0 bg-gray-200 dark:bg-gray-700 animate-pulse rounded" />
|
||||
)}
|
||||
{hasError ? (
|
||||
<TooltipProvider delayDuration={300}>
|
||||
<Tooltip>
|
||||
<TooltipTrigger aria-label="Image loading error">
|
||||
<AlertTriangle className="h-6 w-6 sm:h-8 sm:w-8 text-red-500 cursor-help" />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="bottom">
|
||||
<p>Image failed to load. Please raise an issue.</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
) : (
|
||||
<picture>
|
||||
<source srcSet={webpSrc} type="image/webp" />
|
||||
<source srcSet={originalSrc} type={`image/${originalFormat === 'svg' ? 'svg+xml' : originalFormat}`} />
|
||||
<Image
|
||||
src={`${BASE_URL}/${data.base}/${name}.${data.base}`}
|
||||
src={originalSrc}
|
||||
alt={`${name} icon`}
|
||||
fill
|
||||
className="object-contain p-1 hover:scale-110 transition-transform duration-300"
|
||||
className={`object-contain p-1 transition-opacity duration-500 group-hover:scale-110 ${isLoading || hasError ? 'opacity-0' : 'opacity-100'}`}
|
||||
onLoadingComplete={handleLoadingComplete}
|
||||
onError={handleError}
|
||||
// No priority needed for marquee items
|
||||
/>
|
||||
</picture>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<span className="text-xs sm:text-sm text-center truncate w-full capitalize dark:hover:text-rose-400 transition-colors duration-200 font-medium">
|
||||
{name.replace(/-/g, " ")}
|
||||
</span>
|
||||
@ -108,8 +154,8 @@ function RecentIconCard({
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="absolute top-2 right-2 opacity-0 hover:opacity-100 transition-opacity duration-200">
|
||||
<ExternalLink className="w-3 h-3 " />
|
||||
<div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
|
||||
<ExternalLink className="w-3 h-3 text-muted-foreground" />
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user