728 lines
24 KiB
TypeScript
728 lines
24 KiB
TypeScript
"use client"
|
|
|
|
import { IconsGrid } from "@/components/icon-grid"
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
|
|
import { BASE_URL, REPO_PATH } from "@/constants"
|
|
import { formatIconName } from "@/lib/utils"
|
|
import type { AuthorData, Icon, IconFile } from "@/types/icons"
|
|
import confetti from "canvas-confetti"
|
|
import { motion } from "framer-motion"
|
|
import { ArrowRight, Check, FileType, Github, Moon, PaletteIcon, Sun, Type } from "lucide-react"
|
|
import Image from "next/image"
|
|
import Link from "next/link"
|
|
import type React from "react"
|
|
import { useCallback, useState } from "react"
|
|
import { toast } from "sonner"
|
|
import { Carbon } from "./carbon"
|
|
import { IconActions } from "./icon-actions"
|
|
import { MagicCard } from "./magicui/magic-card"
|
|
import { Badge } from "./ui/badge"
|
|
|
|
type RenderVariantFn = (
|
|
format: string,
|
|
iconName: string,
|
|
theme?: "light" | "dark"
|
|
) => React.ReactNode
|
|
|
|
type IconVariantsSectionProps = {
|
|
title: string
|
|
description: string
|
|
iconElement: React.ReactNode
|
|
aavailableFormats: string[]
|
|
icon: string
|
|
iconData: Icon
|
|
handleCopy: (url: string, variantKey: string, event?: React.MouseEvent) => void
|
|
handleDownload: (event: React.MouseEvent, url: string, filename: string) => Promise<void>
|
|
copiedVariants: Record<string, boolean>
|
|
theme?: "light" | "dark"
|
|
renderVariant: RenderVariantFn
|
|
}
|
|
|
|
function IconVariantsSection({
|
|
title,
|
|
description,
|
|
iconElement,
|
|
aavailableFormats,
|
|
icon,
|
|
iconData,
|
|
theme,
|
|
renderVariant,
|
|
}: IconVariantsSectionProps) {
|
|
const iconName = theme && iconData.colors?.[theme] ? iconData.colors[theme] : icon
|
|
return (
|
|
<div>
|
|
<h3 className="text-lg font-semibold flex items-center gap-2 mb-1">
|
|
{iconElement}
|
|
{title}
|
|
</h3>
|
|
<p className="text-sm text-muted-foreground mb-4">{description}</p>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
|
|
{aavailableFormats.map((format) => renderVariant(format, iconName, theme))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
type WordmarkSectionProps = {
|
|
iconData: Icon
|
|
icon: string
|
|
aavailableFormats: string[]
|
|
handleCopy: (url: string, variantKey: string, event?: React.MouseEvent) => void
|
|
handleDownload: (event: React.MouseEvent, url: string, filename: string) => Promise<void>
|
|
copiedVariants: Record<string, boolean>
|
|
renderVariant: RenderVariantFn
|
|
}
|
|
|
|
function WordmarkSection({
|
|
iconData,
|
|
aavailableFormats,
|
|
renderVariant,
|
|
}: WordmarkSectionProps) {
|
|
if (!iconData.wordmark) return null
|
|
|
|
return (
|
|
<div>
|
|
<h3 className="text-lg font-semibold flex items-center gap-2 mb-1">
|
|
<Type className="w-4 h-4 text-green-500" />
|
|
Wordmark Variants
|
|
</h3>
|
|
<p className="text-sm text-muted-foreground mb-4">
|
|
Icon variants that include the brand name. Click to copy URL.
|
|
</p>
|
|
<div className="space-y-6">
|
|
{iconData.wordmark.light && (
|
|
<div>
|
|
<h4 className="text-md font-medium flex items-center gap-2 mb-3">
|
|
<Sun className="w-4 h-4 text-amber-500" />
|
|
Light Theme Wordmark
|
|
</h4>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
|
|
{aavailableFormats.map((format) => {
|
|
if (!iconData.wordmark?.light) return null
|
|
return renderVariant(format, iconData.wordmark.light, "light")
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
{iconData.wordmark.dark && (
|
|
<div>
|
|
<h4 className="text-md font-medium flex items-center gap-2 mb-3">
|
|
<Moon className="w-4 h-4 text-indigo-500" />
|
|
Dark Theme Wordmark
|
|
</h4>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
|
|
{aavailableFormats.map((format) => {
|
|
if (!iconData.wordmark?.dark) return null
|
|
return renderVariant(format, iconData.wordmark.dark, "dark")
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export type IconDetailsProps = {
|
|
icon: string
|
|
iconData: Icon
|
|
authorData: AuthorData
|
|
allIcons: IconFile
|
|
}
|
|
|
|
export function IconDetails({ icon, iconData, authorData, allIcons }: IconDetailsProps) {
|
|
const authorName = authorData.name || authorData.login || ""
|
|
const iconColorVariants = iconData.colors
|
|
const iconWordmarkVariants = iconData.wordmark
|
|
const formattedDate = new Date(iconData.update.timestamp).toLocaleDateString("en-GB", {
|
|
day: "numeric",
|
|
month: "long",
|
|
year: "numeric",
|
|
})
|
|
|
|
const getAvailableFormats = () => {
|
|
switch (iconData.base) {
|
|
case "svg":
|
|
return ["svg", "png", "webp"]
|
|
case "png":
|
|
return ["png", "webp"]
|
|
default:
|
|
return [iconData.base]
|
|
}
|
|
}
|
|
|
|
const availableFormats = getAvailableFormats()
|
|
const [copiedVariants, setCopiedVariants] = useState<Record<string, boolean>>({})
|
|
const [copiedUrlKey, setCopiedUrlKey] = useState<string | null>(null)
|
|
const [copiedImageKey, setCopiedImageKey] = useState<string | null>(null)
|
|
|
|
const launchConfetti = useCallback((originX?: number, originY?: number) => {
|
|
if (typeof confetti !== "function") return
|
|
|
|
const defaults = {
|
|
startVelocity: 15,
|
|
spread: 180,
|
|
ticks: 50,
|
|
zIndex: 20,
|
|
disableForReducedMotion: true,
|
|
colors: ["#ff0a54", "#ff477e", "#ff7096", "#ff85a1", "#fbb1bd", "#f9bec7"],
|
|
}
|
|
|
|
if (originX !== undefined && originY !== undefined) {
|
|
confetti({
|
|
...defaults,
|
|
particleCount: 50,
|
|
origin: {
|
|
x: originX / window.innerWidth,
|
|
y: originY / window.innerHeight,
|
|
},
|
|
})
|
|
} else {
|
|
confetti({
|
|
...defaults,
|
|
particleCount: 50,
|
|
origin: { x: 0.5, y: 0.5 },
|
|
})
|
|
}
|
|
}, [])
|
|
|
|
const handleCopyUrl = (url: string, variantKey: string, event?: React.MouseEvent) => {
|
|
navigator.clipboard.writeText(url)
|
|
setCopiedUrlKey(variantKey)
|
|
setTimeout(() => {
|
|
setCopiedUrlKey(null)
|
|
}, 2000)
|
|
|
|
if (event) {
|
|
launchConfetti(event.clientX, event.clientY)
|
|
} else {
|
|
launchConfetti()
|
|
}
|
|
|
|
toast.success("URL copied", {
|
|
description: "The icon URL has been copied to your clipboard. Ready to use!",
|
|
})
|
|
}
|
|
|
|
const handleCopyImage = async (
|
|
imageUrl: string,
|
|
format: string,
|
|
variantKey: string,
|
|
event?: React.MouseEvent
|
|
) => {
|
|
try {
|
|
toast.loading("Copying image...")
|
|
|
|
if (format === 'svg') {
|
|
const response = await fetch(imageUrl)
|
|
if (!response.ok) {
|
|
throw new Error(`Failed to fetch SVG: ${response.statusText}`)
|
|
}
|
|
const svgText = await response.text()
|
|
|
|
await navigator.clipboard.writeText(svgText)
|
|
|
|
setCopiedImageKey(variantKey)
|
|
setTimeout(() => {
|
|
setCopiedImageKey(null)
|
|
}, 2000)
|
|
|
|
if (event) {
|
|
launchConfetti(event.clientX, event.clientY)
|
|
} else {
|
|
launchConfetti()
|
|
}
|
|
|
|
toast.dismiss()
|
|
toast.success("SVG Markup Copied", {
|
|
description: "The SVG code has been copied to your clipboard.",
|
|
})
|
|
|
|
} else if (format === 'png' || format === 'webp') {
|
|
const mimeType = `image/${format}`
|
|
const response = await fetch(imageUrl)
|
|
if (!response.ok) {
|
|
throw new Error(`Failed to fetch image: ${response.statusText}`)
|
|
}
|
|
const blob = await response.blob()
|
|
|
|
if (!blob) {
|
|
throw new Error('Failed to generate image blob')
|
|
}
|
|
|
|
await navigator.clipboard.write([new ClipboardItem({ [mimeType]: blob })]);
|
|
|
|
setCopiedImageKey(variantKey)
|
|
setTimeout(() => {
|
|
setCopiedImageKey(null)
|
|
}, 2000)
|
|
|
|
if (event) {
|
|
launchConfetti(event.clientX, event.clientY)
|
|
} else {
|
|
launchConfetti()
|
|
}
|
|
|
|
toast.dismiss()
|
|
toast.success("Image copied", {
|
|
description: `The ${format.toUpperCase()} image has been copied to your clipboard.`,
|
|
})
|
|
|
|
} else {
|
|
throw new Error(`Unsupported format for image copy: ${format}`)
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error("Copy error:", error)
|
|
toast.dismiss()
|
|
let description = "Could not copy. Check console for details."
|
|
if (error instanceof Error) {
|
|
description = error.message
|
|
}
|
|
toast.error("Copy failed", { description })
|
|
}
|
|
}
|
|
|
|
const handleDownload = async (event: React.MouseEvent, url: string, filename: string) => {
|
|
event.preventDefault()
|
|
launchConfetti(event.clientX, event.clientY)
|
|
|
|
try {
|
|
toast.loading("Preparing download...")
|
|
const response = await fetch(url)
|
|
const blob = await response.blob()
|
|
const blobUrl = URL.createObjectURL(blob)
|
|
const link = document.createElement("a")
|
|
link.href = blobUrl
|
|
link.download = filename
|
|
document.body.appendChild(link)
|
|
link.click()
|
|
document.body.removeChild(link)
|
|
setTimeout(() => URL.revokeObjectURL(blobUrl), 100)
|
|
|
|
toast.dismiss()
|
|
toast.success("Download started", {
|
|
description: "Your icon file is being downloaded and will be saved to your device.",
|
|
})
|
|
} catch (error) {
|
|
console.error("Download error:", error)
|
|
toast.dismiss()
|
|
toast.error("Download failed", {
|
|
description: "There was an error downloading the file. Please try again.",
|
|
})
|
|
}
|
|
}
|
|
|
|
const renderVariant = (format: string, iconName: string, theme?: "light" | "dark") => {
|
|
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 variantKey = `${format}-${theme || "default"}`
|
|
const isCopied = copiedVariants[variantKey] || false
|
|
|
|
return (
|
|
<TooltipProvider key={variantKey} delayDuration={500}>
|
|
<MagicCard className="p-0 rounded-md">
|
|
<div className="flex flex-col items-center p-4 transition-all">
|
|
<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) => handleCopyUrl(imageUrl, variantKey, e)}
|
|
aria-label={`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" />
|
|
|
|
<motion.div
|
|
className="absolute inset-0 bg-primary/10 flex items-center justify-center z-20 rounded-xl"
|
|
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,
|
|
}}
|
|
>
|
|
<Check className="w-8 h-8 text-primary" />
|
|
</motion.div>
|
|
</motion.div>
|
|
|
|
<Image
|
|
src={imageUrl}
|
|
alt={`${iconName} in ${format} format${theme ? ` (${theme} theme)` : ""}`}
|
|
fill
|
|
loading="eager"
|
|
className="object-contain p-4"
|
|
/>
|
|
</motion.div>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p>Click to copy direct URL to clipboard</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
|
|
<p className="text-sm font-medium">{format.toUpperCase()}</p>
|
|
|
|
<IconActions
|
|
imageUrl={imageUrl}
|
|
githubUrl={githubUrl}
|
|
iconName={iconName}
|
|
format={format}
|
|
variantKey={variantKey}
|
|
copiedUrlKey={copiedUrlKey}
|
|
copiedImageKey={copiedImageKey}
|
|
handleDownload={handleDownload}
|
|
handleCopyUrl={handleCopyUrl}
|
|
handleCopyImage={handleCopyImage}
|
|
/>
|
|
</div>
|
|
</MagicCard>
|
|
</TooltipProvider>
|
|
)
|
|
}
|
|
|
|
const formatedIconName = formatIconName(icon)
|
|
|
|
return (
|
|
<main className="container mx-auto pt-12 pb-14 px-4 sm:px-6 lg:px-8">
|
|
<div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
|
|
<div className="lg:col-span-1">
|
|
<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">
|
|
<Image
|
|
src={`${BASE_URL}/${iconData.base}/${iconData.colors?.light || icon}.${iconData.base}`}
|
|
width={96}
|
|
height={96}
|
|
placeholder="empty"
|
|
alt={`High quality ${formatedIconName} icon in ${iconData.base.toUpperCase()} format`}
|
|
className="w-full h-full object-contain"
|
|
/>
|
|
</div>
|
|
<CardTitle className="text-2xl font-bold capitalize text-center mb-2">
|
|
<h1>{formatedIconName}</h1>
|
|
</CardTitle>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
<div>
|
|
<div className="space-y-2">
|
|
<div className="flex items-center gap-2">
|
|
<p className="text-sm">
|
|
<span className="font-medium">Updated on:</span> <time dateTime={iconData.update.timestamp}>{formattedDate}</time>
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<div className="flex items-center gap-2">
|
|
<p className="text-sm font-medium">By:</p>
|
|
<Avatar className="h-5 w-5 border">
|
|
<AvatarImage src={authorData.avatar_url} alt={`${authorName}'s avatar`} />
|
|
<AvatarFallback>{authorName ? authorName.slice(0, 2).toUpperCase() : "??"}</AvatarFallback>
|
|
</Avatar>
|
|
{authorData.html_url && (
|
|
<Link
|
|
href={authorData.html_url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-primary hover:underline text-sm"
|
|
>
|
|
{authorName}
|
|
</Link>
|
|
)}
|
|
{!authorData.html_url && (
|
|
<span className="text-sm">{authorName}</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{iconData.categories && iconData.categories.length > 0 && (
|
|
<div>
|
|
<h3 className="text-sm font-semibold text-muted-foreground mb-2">Categories</h3>
|
|
<div className="flex flex-wrap gap-2">
|
|
{iconData.categories.map((category) => (
|
|
<Link key={category} href={`/icons?category=${encodeURIComponent(category)}`} className="cursor-pointer">
|
|
<Badge
|
|
variant="outline"
|
|
className="inline-flex items-center border border-primary/20 hover:border-primary px-2.5 py-0.5 text-sm"
|
|
>
|
|
{category
|
|
.split("-")
|
|
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
|
|
.join(" ")}
|
|
</Badge>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{iconData.aliases && iconData.aliases.length > 0 && (
|
|
<div>
|
|
<h3 className="text-sm font-semibold text-muted-foreground mb-2">Aliases</h3>
|
|
<div className="flex flex-wrap gap-2">
|
|
{iconData.aliases.map((alias) => (
|
|
<Badge
|
|
variant="outline"
|
|
key={alias}
|
|
className="inline-flex items-center px-2.5 py-1 text-xs"
|
|
title={`This icon can also be found by searching for "${alias}"`}
|
|
>
|
|
{alias}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div>
|
|
<h3 className="text-sm font-semibold text-muted-foreground mb-2">About this icon</h3>
|
|
<div className="text-xs text-muted-foreground space-y-2">
|
|
<p>
|
|
Available in{" "}
|
|
{availableFormats.length > 1
|
|
? `${availableFormats.length} formats (${availableFormats.map((f) => f.toUpperCase()).join(", ")}) `
|
|
: `${availableFormats[0].toUpperCase()} format `}
|
|
with a base format of {iconData.base.toUpperCase()}.
|
|
{iconData.colors && " Includes both light and dark theme variants for better integration with different UI designs."}
|
|
{iconData.wordmark && " Wordmark variants are also available for enhanced branding options."}
|
|
</p>
|
|
<p>
|
|
Perfect for adding to dashboards, app directories, documentation, or anywhere you need the {formatIconName(icon)}{" "}
|
|
logo.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
<div className="lg:col-span-2">
|
|
<Card className="h-full bg-background/50 shadow-lg">
|
|
<CardHeader>
|
|
<CardTitle>
|
|
<h2>Icon variants</h2>
|
|
</CardTitle>
|
|
<CardDescription>Click on any icon to copy its URL to your clipboard</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-10">
|
|
{!iconData.colors && (
|
|
<IconVariantsSection
|
|
title="Default"
|
|
description="Standard icon versions. Click to copy URL."
|
|
iconElement={<FileType className="w-4 h-4 text-blue-500" />}
|
|
aavailableFormats={availableFormats}
|
|
icon={icon}
|
|
iconData={iconData}
|
|
handleCopy={handleCopyUrl}
|
|
handleDownload={handleDownload}
|
|
copiedVariants={copiedVariants}
|
|
renderVariant={renderVariant}
|
|
/>
|
|
)}
|
|
|
|
{iconData.colors && (
|
|
<>
|
|
<IconVariantsSection
|
|
title="Light theme"
|
|
description="Icon variants optimized for light backgrounds (typically lighter icon colors). Click to copy URL."
|
|
iconElement={<Sun className="w-4 h-4 text-amber-500" />}
|
|
aavailableFormats={availableFormats}
|
|
icon={icon}
|
|
theme="light"
|
|
iconData={iconData}
|
|
handleCopy={handleCopyUrl}
|
|
handleDownload={handleDownload}
|
|
copiedVariants={copiedVariants}
|
|
renderVariant={renderVariant}
|
|
/>
|
|
|
|
<IconVariantsSection
|
|
title="Dark theme"
|
|
description="Icon variants optimized for dark backgrounds (typically darker icon colors). Click to copy URL."
|
|
iconElement={<Moon className="w-4 h-4 text-indigo-500" />}
|
|
aavailableFormats={availableFormats}
|
|
icon={icon}
|
|
theme="dark"
|
|
iconData={iconData}
|
|
handleCopy={handleCopyUrl}
|
|
handleDownload={handleDownload}
|
|
copiedVariants={copiedVariants}
|
|
renderVariant={renderVariant}
|
|
/>
|
|
</>
|
|
)}
|
|
|
|
{iconData.wordmark && (
|
|
<WordmarkSection
|
|
iconData={iconData}
|
|
icon={icon}
|
|
aavailableFormats={availableFormats}
|
|
handleCopy={handleCopyUrl}
|
|
handleDownload={handleDownload}
|
|
copiedVariants={copiedVariants}
|
|
renderVariant={renderVariant}
|
|
/>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
<div className="lg:col-span-1">
|
|
<Card className="h-full bg-background/50 border shadow-lg">
|
|
<CardHeader>
|
|
<CardTitle>Technical details</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-6">
|
|
<div className="">
|
|
<h3 className="text-sm font-semibold text-muted-foreground mb-2">Base format</h3>
|
|
<div className="flex items-center gap-2">
|
|
<FileType className="w-4 h-4 text-blue-500" />
|
|
<div className="px-3 py-1.5 border border-border rounded-lg text-sm font-medium">{iconData.base.toUpperCase()}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="">
|
|
<h3 className="text-sm font-semibold text-muted-foreground mb-2">Available formats</h3>
|
|
<div className="flex flex-wrap gap-2">
|
|
{availableFormats.map((format) => (
|
|
<div key={format} className="px-3 py-1.5 border border-border rounded-lg text-xs font-medium">
|
|
{format.toUpperCase()}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{iconData.colors && (
|
|
<div className="">
|
|
<h3 className="text-sm font-semibold text-muted-foreground mb-2">Color variants</h3>
|
|
<div className="space-y-2">
|
|
{Object.entries(iconData.colors).map(([theme, variant]) => (
|
|
<div key={theme} className="flex items-center gap-2">
|
|
<PaletteIcon className="w-4 h-4 text-purple-500" />
|
|
<span className="capitalize font-medium text-sm">{theme}:</span>
|
|
<code className=" border border-border px-2 py-0.5 rounded-lg text-xs">{variant}</code>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{iconData.wordmark && (
|
|
<div className="">
|
|
<h3 className="text-sm font-semibold text-muted-foreground">Wordmark variants</h3>
|
|
<div className="space-y-2">
|
|
{iconData.wordmark.light && (
|
|
<div className="flex items-center gap-2">
|
|
<Type className="w-4 h-4 text-green-500" />
|
|
<span className="capitalize font-medium text-sm">Light:</span>
|
|
<code className="border border-border px-2 py-0.5 rounded-lg text-xs">{iconData.wordmark.light}</code>
|
|
</div>
|
|
)}
|
|
{iconData.wordmark.dark && (
|
|
<div className="flex items-center gap-2">
|
|
<Type className="w-4 h-4 text-green-500" />
|
|
<span className="capitalize font-medium text-sm">Dark:</span>
|
|
<code className="border border-border px-2 py-0.5 rounded-lg text-xs">{iconData.wordmark.dark}</code>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="">
|
|
<h3 className="text-sm font-semibold text-muted-foreground mb-2">Source</h3>
|
|
<Button variant="outline" className="w-full" asChild>
|
|
<Link href={`${REPO_PATH}/blob/main/meta/${icon}.json`} target="_blank" rel="noopener noreferrer">
|
|
<Github className="w-4 h-4 mr-2" />
|
|
View on GitHub
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
<Carbon />
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
{iconData.categories &&
|
|
iconData.categories.length > 0 &&
|
|
(() => {
|
|
const MAX_RELATED_ICONS = 16
|
|
const currentCategories = iconData.categories || []
|
|
|
|
const relatedIconsWithScore = Object.entries(allIcons)
|
|
.map(([name, data]) => {
|
|
if (name === icon) return null // Exclude the current icon
|
|
|
|
const otherCategories = data.categories || []
|
|
const commonCategories = currentCategories.filter((cat) => otherCategories.includes(cat))
|
|
const score = commonCategories.length
|
|
|
|
return score > 0 ? { name, data, score } : null
|
|
})
|
|
.filter((item): item is { name: string; data: Icon; score: number } => item !== null) // Type guard
|
|
.sort((a, b) => b.score - a.score) // Sort by score DESC
|
|
|
|
const topRelatedIcons = relatedIconsWithScore.slice(0, MAX_RELATED_ICONS)
|
|
|
|
const viewMoreUrl = `/icons?${currentCategories.map((cat) => `category=${encodeURIComponent(cat)}`).join("&")}`
|
|
|
|
if (topRelatedIcons.length === 0) return null
|
|
|
|
return (
|
|
<section className="container mx-auto mt-12" aria-labelledby="related-icons-title">
|
|
<Card className="bg-background/50 border shadow-lg">
|
|
<CardHeader>
|
|
<CardTitle>
|
|
<h2 id="related-icons-title">Related Icons</h2>
|
|
</CardTitle>
|
|
<CardDescription>
|
|
Other icons from {currentCategories.map((cat) => cat.replace(/-/g, " ")).join(", ")} categories
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<IconsGrid filteredIcons={topRelatedIcons} matchedAliases={{}} />
|
|
{relatedIconsWithScore.length > MAX_RELATED_ICONS && (
|
|
<div className="mt-6 text-center">
|
|
<Button
|
|
asChild
|
|
variant="link"
|
|
className="text-muted-foreground hover:text-primary transition-colors duration-200 hover:no-underline"
|
|
>
|
|
<Link href={viewMoreUrl} className="no-underline">
|
|
View all related icons
|
|
<ArrowRight className="ml-2 h-4 w-4" />
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</section>
|
|
)
|
|
})()}
|
|
</main>
|
|
)
|
|
}
|