Hover Effect

1import { cn } from "@/lib/utils"
2import { AnimatePresence, motion } from "motion/react"
3 
4import { useState } from "react"
5 
6export const HoverEffect = ({
7  items,
8  className,
9}: {
10  items: {
11    title: string
12    description: string
13    link: string
14  }[]
15  className?: string
16}) => {
17  let [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
18 
19  return (
20    <div
21      className={cn(
22        "grid grid-cols-1 py-10 md:grid-cols-2 lg:grid-cols-3",
23        className,
24      )}
25    >
26      {items.map((item, idx) => (
27        <a
28          href={item?.link}
29          key={item?.link}
30          className="group relative block h-full w-full p-2"
31          onMouseEnter={() => setHoveredIndex(idx)}
32          onMouseLeave={() => setHoveredIndex(null)}
33        >
34          <AnimatePresence>
35            {hoveredIndex === idx && (
36              <motion.span
37                className="absolute inset-0 block h-full w-full rounded-3xl bg-neutral-200 dark:bg-slate-800/[0.8]"
38                layoutId="hoverBackground"
39                initial={{ opacity: 0 }}
40                animate={{
41                  opacity: 1,
42                  transition: { duration: 0.15 },
43                }}
44                exit={{
45                  opacity: 0,
46                  transition: { duration: 0.15, delay: 0.2 },
47                }}
48              />
49            )}
50          </AnimatePresence>
51          <Card>
52            <CardTitle>{item.title}</CardTitle>
53            <CardDescription>{item.description}</CardDescription>
54          </Card>
55        </a>
56      ))}
57    </div>
58  )
59}
60 
61export const Card = ({
62  className,
63  children,
64}: {
65  className?: string
66  children: React.ReactNode
67}) => {
68  return (
69    <div
70      className={cn(
71        "relative z-20 h-full w-full overflow-hidden rounded-2xl border border-transparent bg-black p-4 group-hover:border-slate-700 dark:border-white/[0.2]",
72        className,
73      )}
74    >
75      <div className="relative z-50">
76        <div className="p-4">{children}</div>
77      </div>
78    </div>
79  )
80}
81export const CardTitle = ({
82  className,
83  children,
84}: {
85  className?: string
86  children: React.ReactNode
87}) => {
88  return (
89    <h4 className={cn("mt-4 font-bold tracking-wide text-zinc-100", className)}>
90      {children}
91    </h4>
92  )
93}
94export const CardDescription = ({
95  className,
96  children,
97}: {
98  className?: string
99  children: React.ReactNode
100}) => {
101  return (
102    <p
103      className={cn(
104// … truncated