gilles/dashboard-icons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' into feat/wordmark-icons

Browse Source
This commit is contained in:
Thomas Camlong
2025-04-29 17:09:20 +02:00
parent d1152dbaf6 3305a49a7e
commit 16f71353b2
269 changed files with 26106 additions and 25211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

532
web/src/components/icon-details.tsx
View File

@@ -1,14 +1,17 @@
"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 type { AuthorData, Icon } from "@/types/icons"
import { formatIconName } from "@/lib/utils"
import type { AuthorData, Icon, IconFile } from "@/types/icons"
import confetti from "canvas-confetti"
import { motion } from "framer-motion"
import { Check, Copy, Download, FileType, Github, Moon, PaletteIcon, Sun, Type } from "lucide-react"
import { ArrowRight, Check, Copy, Download, FileType, Github, Moon, PaletteIcon, Sun } from "lucide-react"
import dynamic from "next/dynamic"
import Image from "next/image"
import Link from "next/link"
import { useCallback, useState } from "react"
@@ -21,305 +24,10 @@ export type IconDetailsProps = {
icon: string
iconData: Icon
authorData: AuthorData
allIcons: IconFile
}
function IconVariant({
format,
iconName,
theme,
isWordmark = false,
iconData,
onCopy,
onDownload,
copiedVariants
}: {
format: string
iconName: string
theme?: "light" | "dark"
isWordmark?: boolean
iconData: Icon
onCopy: (url: string, variantKey: string, event?: React.MouseEvent) => void
onDownload: (event: React.MouseEvent, url: string, filename: string) => void
copiedVariants: Record<string, boolean>
}) {
let variantName = '';
if (isWordmark) {
if (theme && iconData.wordmark && typeof iconData.wordmark !== 'string') {
variantName = iconData.wordmark[theme] || `${iconName}_wordmark_${theme}`;
} else if (iconData.wordmark && typeof iconData.wordmark === 'string') {
variantName = iconData.wordmark;
} else {
variantName = `${iconName}_wordmark`;
}
} else {
if (theme && iconData.colors) {
variantName = iconData.colors[theme] || `${iconName}_${theme}`;
} else {
variantName = iconName;
}
}
const imageUrl = `${BASE_URL}/${format}/${variantName}.${format}`;
const githubUrl = `${REPO_PATH}/tree/main/${format}/${variantName}.${format}`;
const variantKey = `${format}-${theme || "default"}${isWordmark ? "-wordmark" : ""}`;
const isCopied = copiedVariants[variantKey] || false;
const btnCopied = copiedVariants[`btn-${variantKey}`] || false;
return (
<TooltipProvider 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) => onCopy(imageUrl, variantKey, e)}
>
<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 }}
>
{isCopied && (
<motion.div
initial={{ scale: 0.5, opacity: 0 }}
animate={{
scale: 1,
opacity: 1,
}}
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
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>
<div className="flex gap-2 mt-3 w-full justify-center">
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="outline"
size="icon"
className="h-8 w-8 rounded-lg cursor-pointer"
onClick={(e) => onDownload(e, imageUrl, `${iconName}.${format}`)}
>
<Download className="w-4 h-4" />
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Download icon file</p>
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="outline"
size="icon"
className="h-8 w-8 rounded-lg cursor-pointer"
onClick={(e) => onCopy(imageUrl, `btn-${variantKey}`, e)}
>
{btnCopied && <Check className="w-4 h-4 text-green-500" />}
{!btnCopied && <Copy className="w-4 h-4" />}
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Copy direct URL to clipboard</p>
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Button variant="outline" size="icon" className="h-8 w-8 rounded-lg" asChild>
<Link href={githubUrl} target="_blank" rel="noopener noreferrer">
<Github className="w-4 h-4" />
</Link>
</Button>
</TooltipTrigger>
<TooltipContent>
<p>View on GitHub</p>
</TooltipContent>
</Tooltip>
</div>
</div>
</MagicCard>
</TooltipProvider>
)
}
function IconVariantsSection({
availableFormats,
icon,
theme,
isWordmark = false,
iconData,
handleCopy,
handleDownload,
copiedVariants,
title,
iconElement
}: {
availableFormats: string[]
icon: string
theme?: "light" | "dark"
isWordmark?: boolean
iconData: Icon
handleCopy: (url: string, variantKey: string, event?: React.MouseEvent) => void
handleDownload: (event: React.MouseEvent, url: string, filename: string) => void
copiedVariants: Record<string, boolean>
title: string
iconElement: React.ReactNode
}) {
return (
<div>
<h3 className="text-lg font-semibold flex items-center gap-2">
{iconElement}
{title}
</h3>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 p-3 rounded-lg">
{availableFormats.map((format) => (
<IconVariant
key={format}
format={format}
iconName={icon}
theme={theme}
isWordmark={isWordmark}
iconData={iconData}
onCopy={handleCopy}
onDownload={handleDownload}
copiedVariants={copiedVariants}
/>
))}
</div>
</div>
)
}
function WordmarkSection({
iconData,
icon,
availableFormats,
handleCopy,
handleDownload,
copiedVariants
}: {
iconData: Icon
icon: string
availableFormats: string[]
handleCopy: (url: string, variantKey: string, event?: React.MouseEvent) => void
handleDownload: (event: React.MouseEvent, url: string, filename: string) => void
copiedVariants: Record<string, boolean>
}) {
if (!iconData.wordmark) return null;
const isStringWordmark = typeof iconData.wordmark === 'string';
const hasLightDarkVariants = !isStringWordmark && (iconData.wordmark.light || iconData.wordmark.dark);
return (
<div>
<h3 className="text-lg font-semibold flex items-center gap-2">
<Type className="w-4 h-4 text-green-500" />
Wordmark variants
</h3>
{(isStringWordmark || !hasLightDarkVariants) && (
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 p-3 rounded-lg">
{availableFormats.map((format) => (
<IconVariant
key={format}
format={format}
iconName={icon}
isWordmark={true}
iconData={iconData}
onCopy={handleCopy}
onDownload={handleDownload}
copiedVariants={copiedVariants}
/>
))}
</div>
)}
{hasLightDarkVariants && (
<div className="space-y-6">
{iconData.wordmark.light && (
<div>
<h4 className="text-md font-medium flex items-center gap-2 ml-4 mb-2">
<Sun className="w-3 h-3 text-amber-500" />
Light
</h4>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 p-3 rounded-lg">
{availableFormats.map((format) => (
<IconVariant
key={format}
format={format}
iconName={icon}
theme="light"
isWordmark={true}
iconData={iconData}
onCopy={handleCopy}
onDownload={handleDownload}
copiedVariants={copiedVariants}
/>
))}
</div>
</div>
)}
{iconData.wordmark.dark && (
<div>
<h4 className="text-md font-medium flex items-center gap-2 ml-4 mb-2">
<Moon className="w-3 h-3 text-indigo-500" />
Dark
</h4>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 p-3 rounded-lg">
{availableFormats.map((format) => (
<IconVariant
key={format}
format={format}
iconName={icon}
theme="dark"
isWordmark={true}
iconData={iconData}
onCopy={handleCopy}
onDownload={handleDownload}
copiedVariants={copiedVariants}
/>
))}
</div>
</div>
)}
</div>
)}
</div>
)
}
export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
export function IconDetails({ icon, iconData, authorData, allIcons }: IconDetailsProps) {
const authorName = authorData.name || authorData.login || ""
const iconColorVariants = iconData.colors
const iconWordmarkVariants = iconData.wordmark
@@ -425,23 +133,147 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
}
}
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) => handleCopy(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>
<div className="flex gap-2 mt-3 w-full justify-center">
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="outline"
size="icon"
className="h-8 w-8 rounded-lg cursor-pointer"
onClick={(e) => handleDownload(e, imageUrl, `${iconName}.${format}`)}
aria-label={`Download ${iconName} in ${format} format${theme ? ` (${theme} theme)` : ""}`}
>
<Download className="w-4 h-4" />
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Download icon file</p>
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="outline"
size="icon"
className="h-8 w-8 rounded-lg cursor-pointer"
onClick={(e) => handleCopy(imageUrl, `btn-${variantKey}`, e)}
aria-label={`Copy URL for ${iconName} in ${format} format${theme ? ` (${theme} theme)` : ""}`}
>
{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>
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Button variant="outline" size="icon" className="h-8 w-8 rounded-lg" asChild>
<Link
href={githubUrl}
target="_blank"
rel="noopener noreferrer"
aria-label={`View ${iconName} ${format} file on GitHub`}
>
<Github className="w-4 h-4" />
</Link>
</Button>
</TooltipTrigger>
<TooltipContent>
<p>View on GitHub</p>
</TooltipContent>
</Tooltip>
</div>
</div>
</MagicCard>
</TooltipProvider>
)
}
const formatedIconName = formatIconName(icon)
return (
<div className="container mx-auto pt-12 pb-14">
<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 ">
<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}/${icon}.${iconData.base}`}
width={96}
height={96}
alt={icon}
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">{icon}</CardTitle>
<CardTitle className="text-2xl font-bold capitalize text-center mb-2">
<h1>{formatedIconName}</h1>
</CardTitle>
</div>
</CardHeader>
<CardContent>
@@ -450,14 +282,14 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
<div className="space-y-2">
<div className="flex items-center gap-2">
<p className="text-sm">
<span className="font-medium">Updated on:</span> {formattedDate}
<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} />
<AvatarImage src={authorData.avatar_url} alt={`${authorName}'s avatar`} />
<AvatarFallback>{authorName ? authorName.slice(0, 2).toUpperCase() : "??"}</AvatarFallback>
</Avatar>
{authorData.html_url && (
@@ -480,7 +312,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
{iconData.categories && iconData.categories.length > 0 && (
<div>
<h3 className="text-sm font-semibold text-muted-foreground">Categories</h3>
<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">
@@ -501,7 +333,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
{iconData.aliases && iconData.aliases.length > 0 && (
<div>
<h3 className="text-sm font-semibold text-muted-foreground">Aliases</h3>
<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
@@ -518,23 +350,20 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
)}
<div>
<h3 className="text-sm font-semibold text-muted-foreground">About this icon</h3>
<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.length === 1 && (
`${availableFormats[0].toUpperCase()} format`
)}{" "}
{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>
Use the {icon} icon in your web applications, dashboards, or documentation to enhance visual communication and user
experience.
Perfect for adding to dashboards, app directories, documentation, or anywhere you need the {formatIconName(icon)}{" "}
logo.
</p>
</div>
</div>
@@ -546,7 +375,9 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
<div className="lg:col-span-2">
<Card className="h-full bg-background/50 shadow-lg">
<CardHeader>
<CardTitle>Icon variants</CardTitle>
<CardTitle>
<h2>Icon variants</h2>
</CardTitle>
<CardDescription>Click on any icon to copy its URL to your clipboard</CardDescription>
</CardHeader>
<CardContent>
@@ -613,7 +444,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
<CardContent>
<div className="space-y-6">
<div className="">
<h3 className="text-sm font-semibold text-muted-foreground">Base format</h3>
<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>
@@ -621,7 +452,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
</div>
<div className="">
<h3 className="text-sm font-semibold text-muted-foreground">Available formats</h3>
<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">
@@ -633,7 +464,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
{iconData.colors && (
<div className="">
<h3 className="text-sm font-semibold text-muted-foreground">Color variants</h3>
<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">
@@ -669,7 +500,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
)}
<div className="">
<h3 className="text-sm font-semibold text-muted-foreground">Source</h3>
<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" />
@@ -683,6 +514,63 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
</Card>
</div>
</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>
)
}