card-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 md:grid-cols-2  lg:grid-cols-3  py-10",
23        className
24      )}
25    >
26      {items.map((item, idx) => (
27        <a
28          href={item?.link}
29          key={item?.link}
30          className="relative group  block p-2 h-full w-full"
31          onMouseEnter={() => setHoveredIndex(idx)}
32          onMouseLeave={() => setHoveredIndex(null)}
33        >
34          <AnimatePresence>
35            {hoveredIndex === idx && (
36              <motion.span
37                className="absolute inset-0 h-full w-full bg-neutral-200 dark:bg-slate-800/[0.8] block  rounded-3xl"
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        "rounded-2xl h-full w-full p-4 overflow-hidden bg-black border border-transparent dark:border-white/[0.2] group-hover:border-slate-700 relative z-20",
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("text-zinc-100 font-bold tracking-wide mt-4", 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