1
npm i framer-motion

1
'use client';
2

3
import { motion } from 'framer-motion';
4
import Image from 'next/image';
5
import React, { useState } from 'react';
6

7
interface SpotlightItemType {
8
  name: string;
9
  logo: string;
10
}
11

12
interface SpotlightGridProps {
13
  items: SpotlightItemType[];
14
}
15

16
const SpotlightGrid = ({ items }: SpotlightGridProps) => {
17
  // * Randomly select an item to highlight when component mounts
18
  const randomIndex = Math.floor(Math.random() * items.length);
19
  const [hoveredItem, setHoveredItem] = useState<string>(items[randomIndex].name);
20

21
  return (
22
    <div className="w-full flex flex-col items-start justify-start gap-4">
23
      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 w-full sm:gap-0 gap-2 text-white/85">
24
        {items
25
          .sort((a, b) => a.name.localeCompare(b.name))
26
          .map((item) => {
27
            return (
28
              <div
29
                key={item.name}
30
                className="relative flex items-center justify-start group cursor-default"
31
              >
32
                <div
33
                  onMouseEnter={() => setHoveredItem(item.name)}
34
                  className="flex p-1 sm:p-2 items-center justify-center gap-1 z-10 relative"
35
                >
36
                  <div className="relative h-[12px] w-[12px] md:h-[16px] md:w-[16px]">
37
                    <Image src={item.logo || ''} alt={item.name} fill className="object-contain" />
38
                  </div>
39
                  <p className="truncate">{item.name}</p>
40
                  {hoveredItem === item.name && (
41
                    <motion.div
42
                      layout
43
                      layoutId="item-highlight"
44
                      style={{
45
                        boxShadow: '0px 0px 100px 10px #ffffff4c'
46
                      }}
47
                      className="absolute h-full z-0 rounded-md w-[calc(100%+30px)] pointer-events-none"
48
                    ></motion.div>
49
                  )}
50
                </div>
51
              </div>
52
            );
53
          })}
54
      </div>
55
    </div>
56
  );
57
};
58

59
export default SpotlightGrid;