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

fix(web): update hover text color in IconCard and improve MagicCard mouse event handling

Browse Source
This commit is contained in:
Bjorn Lammers 2025-04-23 04:24:00 +02:00
parent 889db39ab3
commit 920e98dc66
2 changed files with 16 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/app/icons/components/icon-search.tsx
View File

@ -551,7 +551,7 @@ function IconCard({
className="object-contain p-1 group-hover:scale-110 transition-transform duration-300"
/>
</div>
<span className="text-xs sm:text-sm text-center truncate w-full capitalize group- dark:group-hover:text-rose-400 transition-colors duration-200 font-medium">
<span className="text-xs sm:text-sm text-center truncate w-full capitalize group-hover:text-rose-500 dark:group-hover:text-rose-400 transition-colors duration-200 font-medium">
{name.replace(/-/g, " ")}
</span>
</Link>

26
web/src/components/magicui/magic-card.tsx
View File

@ -2,7 +2,7 @@
import { motion, useMotionTemplate, useMotionValue } from "motion/react"
import type React from "react"
import { useCallback, useEffect, useRef } from "react"
import { useCallback, useEffect, useRef, useState } from "react"
import { cn } from "@/lib/utils"
@ -28,6 +28,7 @@ export function MagicCard({
const cardRef = useRef<HTMLDivElement>(null)
const mouseX = useMotionValue(-gradientSize)
const mouseY = useMotionValue(-gradientSize)
const [isMounted, setIsMounted] = useState(false)
const handleMouseMove = useCallback(
(e: MouseEvent) => {
@ -60,6 +61,14 @@ export function MagicCard({
}, [handleMouseMove, mouseX, gradientSize, mouseY])
useEffect(() => {
setIsMounted(true)
mouseX.set(-gradientSize)
mouseY.set(-gradientSize)
}, [gradientSize, mouseX, mouseY])
useEffect(() => {
if (!isMounted) return
document.addEventListener("mousemove", handleMouseMove)
document.addEventListener("mouseout", handleMouseOut)
document.addEventListener("mouseenter", handleMouseEnter)
@ -69,22 +78,17 @@ export function MagicCard({
document.removeEventListener("mouseout", handleMouseOut)
document.removeEventListener("mouseenter", handleMouseEnter)
}
}, [handleMouseEnter, handleMouseMove, handleMouseOut])
useEffect(() => {
mouseX.set(-gradientSize)
mouseY.set(-gradientSize)
}, [gradientSize, mouseX, mouseY])
}, [isMounted, handleMouseEnter, handleMouseMove, handleMouseOut])
return (
<div ref={cardRef} className={cn("group relative rounded-[inherit]", className)}>
<div className={cn("group relative rounded-[inherit]", className)}>
<motion.div
className="pointer-events-none absolute inset-0 rounded-[inherit] bg-border duration-300 group-hover:opacity-100"
style={{
background: useMotionTemplate`
radial-gradient(${gradientSize}px circle at ${mouseX}px ${mouseY}px,
${gradientFrom},
${gradientTo},
${gradientFrom},
${gradientTo},
var(--border) 100%
)
`,
@ -100,7 +104,7 @@ export function MagicCard({
opacity: gradientOpacity,
}}
/>
<div className="relative">{children}</div>
<div ref={cardRef} className="relative">{children}</div>
</div>
)
}