mirror of
https://github.com/walkxcode/dashboard-icons.git
synced 2025-10-27 05:29:03 +08:00
change icons-details styling
This commit is contained in:
Thomas Camlong
@@ -1,278 +1,338 @@
|
|||||||
"use client"
|
"use client";
|
||||||
|
|
||||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||||
import { Button } from "@/components/ui/button"
|
import { Button } from "@/components/ui/button";
|
||||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
import {
|
||||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
|
Card,
|
||||||
import { BASE_URL, REPO_PATH } from "@/constants"
|
CardContent,
|
||||||
import type { AuthorData, Icon } from "@/types/icons"
|
CardDescription,
|
||||||
import confetti from "canvas-confetti"
|
CardHeader,
|
||||||
import { motion } from "framer-motion"
|
CardTitle,
|
||||||
import { Check, Copy, Download, FileType, Github, Moon, PaletteIcon, Sun } from "lucide-react"
|
} from "@/components/ui/card";
|
||||||
import { useTheme } from "next-themes"
|
import {
|
||||||
import Image from "next/image"
|
Tooltip,
|
||||||
import Link from "next/link"
|
TooltipContent,
|
||||||
import { useCallback, useState } from "react"
|
TooltipProvider,
|
||||||
import { toast } from "sonner"
|
TooltipTrigger,
|
||||||
import { Carbon } from "./carbon"
|
} from "@/components/ui/tooltip";
|
||||||
|
import { BASE_URL, REPO_PATH } from "@/constants";
|
||||||
|
import type { AuthorData, Icon } from "@/types/icons";
|
||||||
|
import confetti from "canvas-confetti";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import {
|
||||||
|
Check,
|
||||||
|
Copy,
|
||||||
|
Download,
|
||||||
|
FileType,
|
||||||
|
Github,
|
||||||
|
Moon,
|
||||||
|
PaletteIcon,
|
||||||
|
Sun,
|
||||||
|
} from "lucide-react";
|
||||||
|
import { useTheme } from "next-themes";
|
||||||
|
import Image from "next/image";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { useCallback, useState } from "react";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import { Carbon } from "./carbon";
|
||||||
|
import { MagicCard } from "./magicui/magic-card";
|
||||||
|
|
||||||
export type IconDetailsProps = {
|
export type IconDetailsProps = {
|
||||||
icon: string
|
icon: string;
|
||||||
iconData: Icon
|
iconData: Icon;
|
||||||
authorData: AuthorData
|
authorData: AuthorData;
|
||||||
}
|
};
|
||||||
|
|
||||||
export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
|
export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
|
||||||
const { resolvedTheme } = useTheme()
|
const authorName = authorData.name || authorData.login || "";
|
||||||
const authorName = authorData.name || authorData.login || ""
|
const iconColorVariants = iconData.colors;
|
||||||
const iconColorVariants = iconData.colors
|
const formattedDate = new Date(iconData.update.timestamp).toLocaleDateString(
|
||||||
const formattedDate = new Date(iconData.update.timestamp).toLocaleDateString("en-GB", {
|
"en-GB",
|
||||||
day: "numeric",
|
{
|
||||||
month: "long",
|
day: "numeric",
|
||||||
year: "numeric",
|
month: "long",
|
||||||
})
|
year: "numeric",
|
||||||
|
},
|
||||||
|
);
|
||||||
const getAvailableFormats = () => {
|
const getAvailableFormats = () => {
|
||||||
switch (iconData.base) {
|
switch (iconData.base) {
|
||||||
case "svg":
|
case "svg":
|
||||||
return ["svg", "png", "webp"]
|
return ["svg", "png", "webp"];
|
||||||
case "png":
|
case "png":
|
||||||
return ["png", "webp"]
|
return ["png", "webp"];
|
||||||
default:
|
default:
|
||||||
return [iconData.base]
|
return [iconData.base];
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
const availableFormats = getAvailableFormats()
|
const availableFormats = getAvailableFormats();
|
||||||
const [copiedVariants, setCopiedVariants] = useState<Record<string, boolean>>({})
|
const [copiedVariants, setCopiedVariants] = useState<Record<string, boolean>>(
|
||||||
|
{},
|
||||||
|
);
|
||||||
|
|
||||||
// Launch confetti from the pointer position
|
// Launch confetti from the pointer position
|
||||||
const launchConfetti = useCallback((originX?: number, originY?: number) => {
|
const launchConfetti = useCallback((originX?: number, originY?: number) => {
|
||||||
const defaults = {
|
const defaults = {
|
||||||
startVelocity: 30,
|
startVelocity: 15,
|
||||||
spread: 360,
|
spread: 180,
|
||||||
ticks: 50,
|
ticks: 50,
|
||||||
zIndex: 0,
|
zIndex: 0,
|
||||||
disableForReducedMotion: true,
|
disableForReducedMotion: true,
|
||||||
colors: ["#ff0a54", "#ff477e", "#ff7096", "#ff85a1", "#fbb1bd", "#f9bec7"],
|
colors: [
|
||||||
}
|
"#ff0a54",
|
||||||
|
"#ff477e",
|
||||||
|
"#ff7096",
|
||||||
|
"#ff85a1",
|
||||||
|
"#fbb1bd",
|
||||||
|
"#f9bec7",
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
// If we have origin coordinates, use them
|
// If we have origin coordinates, use them
|
||||||
if (originX !== undefined && originY !== undefined) {
|
if (originX !== undefined && originY !== undefined) {
|
||||||
confetti({
|
confetti({
|
||||||
...defaults,
|
...defaults,
|
||||||
particleCount: 100,
|
particleCount: 50,
|
||||||
origin: { x: originX / window.innerWidth, y: originY / window.innerHeight },
|
origin: {
|
||||||
})
|
x: originX / window.innerWidth,
|
||||||
|
y: originY / window.innerHeight,
|
||||||
|
},
|
||||||
|
});
|
||||||
} else {
|
} else {
|
||||||
// Default to center of screen
|
// Default to center of screen
|
||||||
confetti({
|
confetti({
|
||||||
...defaults,
|
...defaults,
|
||||||
particleCount: 100,
|
particleCount: 50,
|
||||||
origin: { x: 0.5, y: 0.5 },
|
origin: { x: 0.5, y: 0.5 },
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
}, [])
|
}, []);
|
||||||
|
|
||||||
// Helper function to get the appropriate icon variant based on theme
|
const handleCopy = (
|
||||||
const getIconVariant = (iconName: string) => {
|
url: string,
|
||||||
// Check if the icon has theme variants
|
variantKey: string,
|
||||||
if (iconColorVariants) {
|
event?: React.MouseEvent,
|
||||||
// If in dark mode and a light variant exists, use the light variant
|
) => {
|
||||||
if (resolvedTheme === "dark" && iconColorVariants.light) {
|
navigator.clipboard.writeText(url);
|
||||||
return iconColorVariants.light
|
|
||||||
}
|
|
||||||
// If in light mode and a dark variant exists, use the dark variant
|
|
||||||
if (resolvedTheme === "light" && iconColorVariants.dark) {
|
|
||||||
return iconColorVariants.dark
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Fall back to the default name if no appropriate variant
|
|
||||||
return iconName
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleCopy = (url: string, variantKey: string, event?: React.MouseEvent) => {
|
|
||||||
navigator.clipboard.writeText(url)
|
|
||||||
setCopiedVariants((prev) => ({
|
setCopiedVariants((prev) => ({
|
||||||
...prev,
|
...prev,
|
||||||
[variantKey]: true,
|
[variantKey]: true,
|
||||||
}))
|
}));
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setCopiedVariants((prev) => ({
|
setCopiedVariants((prev) => ({
|
||||||
...prev,
|
...prev,
|
||||||
[variantKey]: false,
|
[variantKey]: false,
|
||||||
}))
|
}));
|
||||||
}, 2000)
|
}, 2000);
|
||||||
|
|
||||||
// Launch confetti from click position or center of screen
|
// Launch confetti from click position or center of screen
|
||||||
if (event) {
|
if (event) {
|
||||||
launchConfetti(event.clientX, event.clientY)
|
launchConfetti(event.clientX, event.clientY);
|
||||||
} else {
|
} else {
|
||||||
launchConfetti()
|
launchConfetti();
|
||||||
}
|
}
|
||||||
|
|
||||||
toast.success("URL copied", {
|
toast.success("URL copied", {
|
||||||
description: "The icon URL has been copied to your clipboard. Ready to use!",
|
description:
|
||||||
})
|
"The icon URL has been copied to your clipboard. Ready to use!",
|
||||||
}
|
});
|
||||||
|
};
|
||||||
|
|
||||||
const handleDownload = async (event: React.MouseEvent, url: string, filename: string) => {
|
const handleDownload = async (
|
||||||
event.preventDefault()
|
event: React.MouseEvent,
|
||||||
|
url: string,
|
||||||
|
filename: string,
|
||||||
|
) => {
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
// Launch confetti from download button position
|
// Launch confetti from download button position
|
||||||
launchConfetti(event.clientX, event.clientY)
|
launchConfetti(event.clientX, event.clientY);
|
||||||
|
|
||||||
try {
|
try {
|
||||||
// Show loading toast
|
// Show loading toast
|
||||||
toast.loading("Preparing download...")
|
toast.loading("Preparing download...");
|
||||||
|
|
||||||
// Fetch the file first as a blob
|
// Fetch the file first as a blob
|
||||||
const response = await fetch(url)
|
const response = await fetch(url);
|
||||||
const blob = await response.blob()
|
const blob = await response.blob();
|
||||||
|
|
||||||
// Create a blob URL and use it for download
|
// Create a blob URL and use it for download
|
||||||
const blobUrl = URL.createObjectURL(blob)
|
const blobUrl = URL.createObjectURL(blob);
|
||||||
const link = document.createElement("a")
|
const link = document.createElement("a");
|
||||||
link.href = blobUrl
|
link.href = blobUrl;
|
||||||
link.download = filename
|
link.download = filename;
|
||||||
document.body.appendChild(link)
|
document.body.appendChild(link);
|
||||||
link.click()
|
link.click();
|
||||||
|
|
||||||
// Clean up
|
// Clean up
|
||||||
document.body.removeChild(link)
|
document.body.removeChild(link);
|
||||||
setTimeout(() => URL.revokeObjectURL(blobUrl), 100)
|
setTimeout(() => URL.revokeObjectURL(blobUrl), 100);
|
||||||
|
|
||||||
toast.dismiss()
|
toast.dismiss();
|
||||||
toast.success("Download started", {
|
toast.success("Download started", {
|
||||||
description: "Your icon file is being downloaded and will be saved to your device.",
|
description:
|
||||||
})
|
"Your icon file is being downloaded and will be saved to your device.",
|
||||||
|
});
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Download error:", error)
|
console.error("Download error:", error);
|
||||||
toast.dismiss()
|
toast.dismiss();
|
||||||
toast.error("Download failed", {
|
toast.error("Download failed", {
|
||||||
description: "There was an error downloading the file. Please try again.",
|
description:
|
||||||
})
|
"There was an error downloading the file. Please try again.",
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
const renderVariant = (format: string, iconName: string, theme?: "light" | "dark") => {
|
const renderVariant = (
|
||||||
const variantName = theme && iconColorVariants?.[theme] ? iconColorVariants[theme] : iconName
|
format: string,
|
||||||
const url = `${BASE_URL}/${format}/${variantName}.${format}`
|
iconName: string,
|
||||||
const githubUrl = `${REPO_PATH}/tree/main/${format}/${iconName}.${format}`
|
theme?: "light" | "dark",
|
||||||
const variantKey = `${format}-${theme || "default"}`
|
) => {
|
||||||
const isCopied = copiedVariants[variantKey] || false
|
const variantName =
|
||||||
|
theme && iconColorVariants?.[theme] ? iconColorVariants[theme] : iconName;
|
||||||
|
const url = `${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 (
|
return (
|
||||||
<TooltipProvider key={variantKey}>
|
<TooltipProvider key={variantKey} delayDuration={500}>
|
||||||
<div className="flex flex-col items-center bg-background/90 dark:bg-background/50 rounded-lg p-4 border border-rose-100/50 dark:border-rose-950/50 shadow-sm hover:shadow-md transition-all">
|
<MagicCard>
|
||||||
<Tooltip>
|
<div className="flex flex-col items-center rounded-lg p-4 border border-border shadow-sm hover:shadow-md transition-all">
|
||||||
<TooltipTrigger asChild>
|
<Tooltip>
|
||||||
<motion.div
|
<TooltipTrigger asChild>
|
||||||
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(url, variantKey, e)}
|
|
||||||
>
|
|
||||||
<div className="absolute inset-0 border-2 border-transparent group-hover:border-primary/20 rounded-xl z-10 transition-colors" />
|
|
||||||
|
|
||||||
<motion.div
|
<motion.div
|
||||||
className="absolute inset-0 bg-primary/10 flex items-center justify-center z-20 rounded-xl"
|
className="relative w-28 h-28 mb-3 cursor-pointer rounded-xl overflow-hidden group"
|
||||||
initial={{ opacity: 0 }}
|
whileHover={{ scale: 1.05 }}
|
||||||
animate={{ opacity: isCopied ? 1 : 0 }}
|
whileTap={{ scale: 0.95 }}
|
||||||
transition={{ duration: 0.2 }}
|
onClick={(e) => handleCopy(url, variantKey, e)}
|
||||||
>
|
>
|
||||||
|
<div className="absolute inset-0 border-2 border-transparent group-hover:border-primary/20 rounded-xl z-10 transition-colors" />
|
||||||
|
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ scale: 0.5, opacity: 0 }}
|
className="absolute inset-0 bg-primary/10 flex items-center justify-center z-20 rounded-xl"
|
||||||
animate={{ scale: isCopied ? 1 : 0.5, opacity: isCopied ? 1 : 0 }}
|
initial={{ opacity: 0 }}
|
||||||
transition={{ type: "spring", stiffness: 300, damping: 20 }}
|
animate={{ opacity: isCopied ? 1 : 0 }}
|
||||||
|
transition={{ duration: 0.2 }}
|
||||||
>
|
>
|
||||||
<Check className="w-8 h-8 text-primary" />
|
<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>
|
</motion.div>
|
||||||
|
|
||||||
|
<Image
|
||||||
|
src={url}
|
||||||
|
alt={`${iconName} in ${format} format${theme ? ` (${theme} theme)` : ""}`}
|
||||||
|
fill
|
||||||
|
className="object-contain p-4"
|
||||||
|
/>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
<Image
|
|
||||||
src={url}
|
|
||||||
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) => handleDownload(e, url, `${iconName}.${format}`)}
|
|
||||||
>
|
|
||||||
<Download className="w-4 h-4" />
|
|
||||||
</Button>
|
|
||||||
</TooltipTrigger>
|
</TooltipTrigger>
|
||||||
<TooltipContent>
|
<TooltipContent>
|
||||||
<p>Download icon file</p>
|
<p>Click to copy direct URL to clipboard</p>
|
||||||
</TooltipContent>
|
</TooltipContent>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
|
|
||||||
<Tooltip>
|
<p className="text-sm font-medium">{format.toUpperCase()}</p>
|
||||||
<TooltipTrigger asChild>
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="icon"
|
|
||||||
className="h-8 w-8 rounded-lg cursor-pointer"
|
|
||||||
onClick={(e) => handleCopy(url, `btn-${variantKey}`, e)}
|
|
||||||
>
|
|
||||||
{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>
|
<div className="flex gap-2 mt-3 w-full justify-center">
|
||||||
<TooltipTrigger asChild>
|
<Tooltip>
|
||||||
<Button variant="outline" size="icon" className="h-8 w-8 rounded-lg" asChild>
|
<TooltipTrigger asChild>
|
||||||
<Link href={githubUrl} target="_blank" rel="noopener noreferrer">
|
<Button
|
||||||
<Github className="w-4 h-4" />
|
variant="outline"
|
||||||
</Link>
|
size="icon"
|
||||||
</Button>
|
className="h-8 w-8 rounded-lg cursor-pointer"
|
||||||
</TooltipTrigger>
|
onClick={(e) =>
|
||||||
<TooltipContent>
|
handleDownload(e, url, `${iconName}.${format}`)
|
||||||
<p>View on GitHub</p>
|
}
|
||||||
</TooltipContent>
|
>
|
||||||
</Tooltip>
|
<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(url, `btn-${variantKey}`, e)}
|
||||||
|
>
|
||||||
|
{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"
|
||||||
|
>
|
||||||
|
<Github className="w-4 h-4" />
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
</TooltipTrigger>
|
||||||
|
<TooltipContent>
|
||||||
|
<p>View on GitHub</p>
|
||||||
|
</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</MagicCard>
|
||||||
</TooltipProvider>
|
</TooltipProvider>
|
||||||
)
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="container mx-auto px-4 py-8">
|
<div className="container mx-auto px-4 py-8">
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
|
<div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
|
||||||
{/* Left Column: Icon Info and Author */}
|
{/* Left Column: Icon Info and Author */}
|
||||||
<div className="lg:col-span-1">
|
<div className="lg:col-span-1">
|
||||||
<Card className="h-full backdrop-blur-sm bg-background/95 dark:bg-background/80 border shadow-lg">
|
<Card className="h-full backdrop-blur-sm border shadow-lg">
|
||||||
<CardHeader className="pb-4">
|
<CardHeader className="pb-4">
|
||||||
<div className="flex flex-col items-center">
|
<div className="flex flex-col items-center">
|
||||||
<div className="relative w-32 h-32 bg-background/90 rounded-xl overflow-hidden border flex items-center justify-center p-3 mb-4">
|
<div className="relative w-32 h-32 rounded-xl overflow-hidden border flex items-center justify-center p-3 ">
|
||||||
<Image
|
<Image
|
||||||
src={`${BASE_URL}/${iconData.base}/${getIconVariant(icon)}.${iconData.base}`}
|
src={`${BASE_URL}/${iconData.base}/${icon}.${iconData.base}`}
|
||||||
width={96}
|
width={96}
|
||||||
height={96}
|
height={96}
|
||||||
alt={icon}
|
alt={icon}
|
||||||
className="w-full h-full object-contain"
|
className="w-full h-full object-contain"
|
||||||
/>
|
/>
|
||||||
</div>
|
</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">
|
||||||
|
{icon}
|
||||||
|
</CardTitle>
|
||||||
</div>
|
</div>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
@@ -281,15 +341,23 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
|
|||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<p className="text-sm">
|
<p className="text-sm">
|
||||||
<span className="font-medium">Updated on:</span> {formattedDate}
|
<span className="font-medium">Updated on:</span>{" "}
|
||||||
|
{formattedDate}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<p className="text-sm font-medium">By:</p>
|
<p className="text-sm font-medium">By:</p>
|
||||||
<Avatar className="h-5 w-5 border">
|
<Avatar className="h-5 w-5 border">
|
||||||
<AvatarImage src={authorData.avatar_url} alt={authorName} />
|
<AvatarImage
|
||||||
<AvatarFallback>{authorName ? authorName.slice(0, 2).toUpperCase() : "??"}</AvatarFallback>
|
src={authorData.avatar_url}
|
||||||
|
alt={authorName}
|
||||||
|
/>
|
||||||
|
<AvatarFallback>
|
||||||
|
{authorName
|
||||||
|
? authorName.slice(0, 2).toUpperCase()
|
||||||
|
: "??"}
|
||||||
|
</AvatarFallback>
|
||||||
</Avatar>
|
</Avatar>
|
||||||
{authorData.html_url ? (
|
{authorData.html_url ? (
|
||||||
<Link
|
<Link
|
||||||
@@ -310,7 +378,9 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
|
|||||||
|
|
||||||
{iconData.categories && iconData.categories.length > 0 && (
|
{iconData.categories && iconData.categories.length > 0 && (
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
<h3 className="text-sm font-semibold text-muted-foreground">Categories</h3>
|
<h3 className="text-sm font-semibold text-muted-foreground">
|
||||||
|
Categories
|
||||||
|
</h3>
|
||||||
<div className="flex flex-wrap gap-2">
|
<div className="flex flex-wrap gap-2">
|
||||||
{iconData.categories.map((category) => (
|
{iconData.categories.map((category) => (
|
||||||
<Link
|
<Link
|
||||||
@@ -320,7 +390,10 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
|
|||||||
>
|
>
|
||||||
{category
|
{category
|
||||||
.split("-")
|
.split("-")
|
||||||
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
|
.map(
|
||||||
|
(word) =>
|
||||||
|
word.charAt(0).toUpperCase() + word.slice(1),
|
||||||
|
)
|
||||||
.join(" ")}
|
.join(" ")}
|
||||||
</Link>
|
</Link>
|
||||||
))}
|
))}
|
||||||
@@ -330,7 +403,9 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
|
|||||||
|
|
||||||
{iconData.aliases && iconData.aliases.length > 0 && (
|
{iconData.aliases && iconData.aliases.length > 0 && (
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
<h3 className="text-sm font-semibold text-muted-foreground">Aliases</h3>
|
<h3 className="text-sm font-semibold text-muted-foreground">
|
||||||
|
Aliases
|
||||||
|
</h3>
|
||||||
<div className="flex flex-wrap gap-2">
|
<div className="flex flex-wrap gap-2">
|
||||||
{iconData.aliases.map((alias) => (
|
{iconData.aliases.map((alias) => (
|
||||||
<span
|
<span
|
||||||
@@ -342,7 +417,10 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
|
|||||||
</span>
|
</span>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
<p className="text-[10px] text-muted-foreground mt-1">These aliases can be used to find this icon in search results.</p>
|
<p className="text-[10px] text-muted-foreground mt-1">
|
||||||
|
These aliases can be used to find this icon in search
|
||||||
|
results.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
@@ -352,34 +430,42 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
|
|||||||
|
|
||||||
{/* Middle Column: Icon variants */}
|
{/* Middle Column: Icon variants */}
|
||||||
<div className="lg:col-span-2">
|
<div className="lg:col-span-2">
|
||||||
<Card className="h-full backdrop-blur-sm bg-background/95 dark:bg-background/80 border shadow-lg">
|
<Card className="h-full backdrop-blur-sm bg-card shadow-lg">
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<CardTitle>Icon variants</CardTitle>
|
<CardTitle>Icon variants</CardTitle>
|
||||||
<CardDescription>Click on any icon to copy its URL to your clipboard</CardDescription>
|
<CardDescription>
|
||||||
|
Click on any icon to copy its URL to your clipboard
|
||||||
|
</CardDescription>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
{!iconData.colors ? (
|
{!iconData.colors ? (
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
|
||||||
{availableFormats.map((format) => renderVariant(format, icon))}
|
{availableFormats.map((format) =>
|
||||||
|
renderVariant(format, icon),
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="space-y-10">
|
<div className="space-y-10">
|
||||||
<div>
|
<div>
|
||||||
<h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
|
<h3 className="text-lg font-semibold flex items-center gap-2">
|
||||||
<Sun className="w-4 h-4 text-amber-500" />
|
<Sun className="w-4 h-4 text-amber-500" />
|
||||||
Light theme
|
Light theme
|
||||||
</h3>
|
</h3>
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 p-3 rounded-lg bg-background/50 dark:bg-background/30 border border-rose-100 dark:border-rose-950/40">
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 p-3 rounded-lg ">
|
||||||
{availableFormats.map((format) => renderVariant(format, icon, "light"))}
|
{availableFormats.map((format) =>
|
||||||
|
renderVariant(format, icon, "light"),
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
|
<h3 className="text-lg font-semibold flex items-center gap-2">
|
||||||
<Moon className="w-4 h-4 text-indigo-500" />
|
<Moon className="w-4 h-4 text-indigo-500" />
|
||||||
Dark theme
|
Dark theme
|
||||||
</h3>
|
</h3>
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 p-3 rounded-lg bg-background/50 dark:bg-background/30 border border-rose-100 dark:border-rose-950/40">
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 p-3 rounded-lg ">
|
||||||
{availableFormats.map((format) => renderVariant(format, icon, "dark"))}
|
{availableFormats.map((format) =>
|
||||||
|
renderVariant(format, icon, "dark"),
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -390,29 +476,33 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
|
|||||||
|
|
||||||
{/* Right Column: Technical details */}
|
{/* Right Column: Technical details */}
|
||||||
<div className="lg:col-span-1">
|
<div className="lg:col-span-1">
|
||||||
<Card className="h-full backdrop-blur-sm bg-background/95 dark:bg-background/80 border shadow-lg">
|
<Card className="h-full backdrop-blur-sm border shadow-lg">
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<CardTitle>Technical details</CardTitle>
|
<CardTitle>Technical details</CardTitle>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
<div className="space-y-6">
|
<div className="space-y-6">
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
<h3 className="text-sm font-semibold text-muted-foreground">Base format</h3>
|
<h3 className="text-sm font-semibold text-muted-foreground">
|
||||||
|
Base format
|
||||||
|
</h3>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<FileType className="w-4 h-4 text-blue-500" />
|
<FileType className="w-4 h-4 text-blue-500" />
|
||||||
<div className="px-3 py-1.5 bg-background/80 dark:bg-background/50 border border-border rounded-lg text-sm font-medium">
|
<div className="px-3 py-1.5 border border-border rounded-lg text-sm font-medium">
|
||||||
{iconData.base.toUpperCase()}
|
{iconData.base.toUpperCase()}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
<h3 className="text-sm font-semibold text-muted-foreground">Available formats</h3>
|
<h3 className="text-sm font-semibold text-muted-foreground">
|
||||||
|
Available formats
|
||||||
|
</h3>
|
||||||
<div className="flex flex-wrap gap-2">
|
<div className="flex flex-wrap gap-2">
|
||||||
{availableFormats.map((format) => (
|
{availableFormats.map((format) => (
|
||||||
<div
|
<div
|
||||||
key={format}
|
key={format}
|
||||||
className="px-3 py-1.5 bg-background/80 dark:bg-background/50 border border-border rounded-lg text-xs font-medium"
|
className="px-3 py-1.5 border border-border rounded-lg text-xs font-medium"
|
||||||
>
|
>
|
||||||
{format.toUpperCase()}
|
{format.toUpperCase()}
|
||||||
</div>
|
</div>
|
||||||
@@ -422,25 +512,37 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
|
|||||||
|
|
||||||
{iconData.colors && (
|
{iconData.colors && (
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
<h3 className="text-sm font-semibold text-muted-foreground">Color variants</h3>
|
<h3 className="text-sm font-semibold text-muted-foreground">
|
||||||
|
Color variants
|
||||||
|
</h3>
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
{Object.entries(iconData.colors).map(([theme, variant]) => (
|
{Object.entries(iconData.colors).map(
|
||||||
<div key={theme} className="flex items-center gap-2">
|
([theme, variant]) => (
|
||||||
<PaletteIcon className="w-4 h-4 text-purple-500" />
|
<div key={theme} className="flex items-center gap-2">
|
||||||
<span className="capitalize font-medium text-sm">{theme}:</span>
|
<PaletteIcon className="w-4 h-4 text-purple-500" />
|
||||||
<code className="bg-background/80 dark:bg-background/50 border border-border px-2 py-0.5 rounded-lg text-xs">
|
<span className="capitalize font-medium text-sm">
|
||||||
{variant}
|
{theme}:
|
||||||
</code>
|
</span>
|
||||||
</div>
|
<code className=" border border-border px-2 py-0.5 rounded-lg text-xs">
|
||||||
))}
|
{variant}
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
<h3 className="text-sm font-semibold text-muted-foreground">Source</h3>
|
<h3 className="text-sm font-semibold text-muted-foreground">
|
||||||
|
Source
|
||||||
|
</h3>
|
||||||
<Button variant="outline" className="w-full" asChild>
|
<Button variant="outline" className="w-full" asChild>
|
||||||
<Link href={`${REPO_PATH}/blob/main/meta/${icon}.json`} target="_blank" rel="noopener noreferrer">
|
<Link
|
||||||
|
href={`${REPO_PATH}/blob/main/meta/${icon}.json`}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
<Github className="w-4 h-4 mr-2" />
|
<Github className="w-4 h-4 mr-2" />
|
||||||
View on GitHub
|
View on GitHub
|
||||||
</Link>
|
</Link>
|
||||||
@@ -453,5 +555,5 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user