diff options
Diffstat (limited to 'jb-ui/src/components/ui/magic-card.tsx')
| -rw-r--r-- | jb-ui/src/components/ui/magic-card.tsx | 70 |
1 files changed, 35 insertions, 35 deletions
diff --git a/jb-ui/src/components/ui/magic-card.tsx b/jb-ui/src/components/ui/magic-card.tsx index e6503d8..2b92e38 100644 --- a/jb-ui/src/components/ui/magic-card.tsx +++ b/jb-ui/src/components/ui/magic-card.tsx @@ -1,16 +1,16 @@ -import React, { useCallback, useEffect } from "react" -import { motion, useMotionTemplate, useMotionValue } from "motion/react" +import React, { useCallback, useEffect } from "react"; +import { motion, useMotionTemplate, useMotionValue } from "motion/react"; -import { cn } from "@/lib/utils" +import { cn } from "@/lib/utils"; interface MagicCardProps { - children?: React.ReactNode - className?: string - gradientSize?: number - gradientColor?: string - gradientOpacity?: number - gradientFrom?: string - gradientTo?: string + children?: React.ReactNode; + className?: string; + gradientSize?: number; + gradientColor?: string; + gradientOpacity?: number; + gradientFrom?: string; + gradientTo?: string; } export function MagicCard({ @@ -22,49 +22,49 @@ export function MagicCard({ gradientFrom = "#9E7AFF", gradientTo = "#FE8BBB", }: MagicCardProps) { - const mouseX = useMotionValue(-gradientSize) - const mouseY = useMotionValue(-gradientSize) + const mouseX = useMotionValue(-gradientSize); + const mouseY = useMotionValue(-gradientSize); const reset = useCallback(() => { - mouseX.set(-gradientSize) - mouseY.set(-gradientSize) - }, [gradientSize, mouseX, mouseY]) + mouseX.set(-gradientSize); + mouseY.set(-gradientSize); + }, [gradientSize, mouseX, mouseY]); const handlePointerMove = useCallback( (e: React.PointerEvent<HTMLDivElement>) => { - const rect = e.currentTarget.getBoundingClientRect() - mouseX.set(e.clientX - rect.left) - mouseY.set(e.clientY - rect.top) + const rect = e.currentTarget.getBoundingClientRect(); + mouseX.set(e.clientX - rect.left); + mouseY.set(e.clientY - rect.top); }, - [mouseX, mouseY] - ) + [mouseX, mouseY], + ); useEffect(() => { - reset() - }, [reset]) + reset(); + }, [reset]); useEffect(() => { const handleGlobalPointerOut = (e: PointerEvent) => { if (!e.relatedTarget) { - reset() + reset(); } - } + }; const handleVisibility = () => { if (document.visibilityState !== "visible") { - reset() + reset(); } - } + }; - window.addEventListener("pointerout", handleGlobalPointerOut) - window.addEventListener("blur", reset) - document.addEventListener("visibilitychange", handleVisibility) + window.addEventListener("pointerout", handleGlobalPointerOut); + window.addEventListener("blur", reset); + document.addEventListener("visibilitychange", handleVisibility); return () => { - window.removeEventListener("pointerout", handleGlobalPointerOut) - window.removeEventListener("blur", reset) - document.removeEventListener("visibilitychange", handleVisibility) - } - }, [reset]) + window.removeEventListener("pointerout", handleGlobalPointerOut); + window.removeEventListener("blur", reset); + document.removeEventListener("visibilitychange", handleVisibility); + }; + }, [reset]); return ( <div @@ -97,5 +97,5 @@ export function MagicCard({ /> <div className="relative">{children}</div> </div> - ) + ); } |
