focus-cards

1"use client";
2 
3import React, { useState } from "react";
4import { cn } from "@/lib/utils";
5 
6export const Card = React.memo(
7  ({
8    card,
9    index,
10    hovered,
11    setHovered,
12  }: {
13    card: any;
14    index: number;
15    hovered: number | null;
16    setHovered: React.Dispatch<React.SetStateAction<number | null>>;
17  }) => (
18    <div
19      onMouseEnter={() => setHovered(index)}
20      onMouseLeave={() => setHovered(null)}
21      className={cn(
22        "rounded-lg relative bg-gray-100 dark:bg-neutral-900 overflow-hidden h-60 md:h-96 w-full transition-all duration-300 ease-out",
23        hovered !== null && hovered !== index && "blur-sm scale-[0.98]"
24      )}
25    >
26      <img
27        src={card.src}
28        alt={card.title}
29        className="object-cover absolute inset-0"
30      />
31      <div
32        className={cn(
33          "absolute inset-0 bg-black/50 flex items-end py-8 px-4 transition-opacity duration-300",
34          hovered === index ? "opacity-100" : "opacity-0"
35        )}
36      >
37        <div className="text-xl md:text-2xl font-medium bg-clip-text text-transparent bg-gradient-to-b from-neutral-50 to-neutral-200">
38          {card.title}
39        </div>
40      </div>
41    </div>
42  )
43);
44 
45Card.displayName = "Card";
46 
47type Card = {
48  title: string;
49  src: string;
50};
51 
52export function FocusCards({ cards }: { cards: Card[] }) {
53  const [hovered, setHovered] = useState<number | null>(null);
54 
55  return (
56    <div className="grid grid-cols-1 md:grid-cols-3 gap-10 max-w-5xl mx-auto md:px-8 w-full">
57      {cards.map((card, index) => (
58        <Card
59          key={card.title}
60          card={card}
61          index={index}
62          hovered={hovered}
63          setHovered={setHovered}
64        />
65      ))}
66    </div>
67  );
68}