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

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" className="object-contain p-1 group-hover:scale-110 transition-transform duration-300"
/> />
</div> </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, " ")} {name.replace(/-/g, " ")}
</span> </span>
</Link> </Link>

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

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