opensource/dashboard-icons
1
0
Fork 0
mirror of https://github.com/walkxcode/dashboard-icons.git synced 2025-06-28 23:40:21 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

styling

Browse Source
This commit is contained in:
Thomas Camlong 2025-04-18 18:17:39 +02:00
parent 8c0d46330a
commit f7f464e3c4
No known key found for this signature in database
GPG Key ID: A678F374F428457B
1 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,6 +9,7 @@ import type { AuthorData, Icon } from "@/types/icons"
import confetti from "canvas-confetti" import confetti from "canvas-confetti"
import { motion } from "framer-motion" import { motion } from "framer-motion"
import { Check, Copy, Download, FileType, Github, Moon, PaletteIcon, Sun } from "lucide-react" import { Check, Copy, Download, FileType, Github, Moon, PaletteIcon, Sun } from "lucide-react"
import { useTheme } from "next-themes"
import Image from "next/image" import Image from "next/image"
import Link from "next/link" import Link from "next/link"
import { useCallback, useState } from "react" import { useCallback, useState } from "react"
@ -51,7 +52,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
startVelocity: 15, startVelocity: 15,
spread: 180, spread: 180,
ticks: 50, ticks: 50,
zIndex: 0, zIndex: 20,
disableForReducedMotion: true, disableForReducedMotion: true,
colors: ["#ff0a54", "#ff477e", "#ff7096", "#ff85a1", "#fbb1bd", "#f9bec7"], colors: ["#ff0a54", "#ff477e", "#ff7096", "#ff85a1", "#fbb1bd", "#f9bec7"],
} }
@ -141,6 +142,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
} }
const renderVariant = (format: string, iconName: string, theme?: "light" | "dark") => { const renderVariant = (format: string, iconName: string, theme?: "light" | "dark") => {
const { resolvedTheme } = useTheme()
const variantName = theme && iconColorVariants?.[theme] ? iconColorVariants[theme] : iconName const variantName = theme && iconColorVariants?.[theme] ? iconColorVariants[theme] : iconName
const imageUrl = `${BASE_URL}/${format}/${variantName}.${format}` const imageUrl = `${BASE_URL}/${format}/${variantName}.${format}`
const githubUrl = `${REPO_PATH}/tree/main/${format}/${iconName}.${format}` const githubUrl = `${REPO_PATH}/tree/main/${format}/${iconName}.${format}`
@ -149,7 +151,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
return ( return (
<TooltipProvider key={variantKey} delayDuration={500}> <TooltipProvider key={variantKey} delayDuration={500}>
<MagicCard className="rounded-md"> <MagicCard gradientColor={resolvedTheme === "dark" ? "#262626" : "#D9D9D955"} className="p-0 rounded-md">
<div className="flex flex-col items-center p-4 transition-all"> <div className="flex flex-col items-center p-4 transition-all">
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
@ -255,7 +257,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
<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 bg-background/80 border shadow-lg"> <Card className="h-full bg-background/50 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 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 ">
@ -367,7 +369,7 @@ 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 bg-background/80 shadow-lg"> <Card className="h-full bg-background/50 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>
@ -405,7 +407,7 @@ 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 bg-background/80 border shadow-lg"> <Card className="h-full bg-background/50 border shadow-lg">
<CardHeader> <CardHeader>
<CardTitle>Technical details</CardTitle> <CardTitle>Technical details</CardTitle>
</CardHeader> </CardHeader>