1
npm i framer-motion

1
'use client';
2

3
import React from 'react';
4
import { motion } from 'framer-motion';
5

6
interface MagnetTabsProps {
7
  slug: string;
8
  options: string[];
9
  onSelect: (option: string) => void;
10
  activeTab: string;
11
}
12

13
const MagnetTabs = ({ slug, options, onSelect, activeTab }: MagnetTabsProps) => {
14
  const [hovered, setHovered] = React.useState<string | undefined>(undefined);
15

16
  return (
17
    <div className="flex items-start justify-start">
18
      <ul className="flex border-[1px] border-black/10 border-b-0">
19
        {options.map((option) => {
20
          const isActive = activeTab === option;
21
          return (
22
            <li
23
              onMouseEnter={() => setHovered(option)}
24
              onMouseLeave={() => setHovered(undefined)}
25
              key={slug + option}
26
              onClick={() => onSelect(option)}
27
              className="relative cursor-pointer shrink-0"
28
            >
29
              <p
30
                className={`z-10 relative px-2 py-1 transition-all ${
31
                  isActive ? 'opacity-100' : 'opacity-50 hover:opacity-100'
32
                }`}
33
              >
34
                {option}
35
              </p>
36

37
              {isActive && (
38
                <motion.div
39
                  layout
40
                  layoutId={slug + 'magnet'}
41
                  transition={{ duration: 0.3, ease: 'backOut' }}
42
                  className="w-full h-1 absolute bottom-full left-0 bg-red-500 rounded-sm"
43
                />
44
              )}
45

46
              {(hovered === option || (hovered === undefined && isActive)) && (
47
                <motion.div
48
                  layout
49
                  layoutId={slug + 'tab-bar-highlight'}
50
                  transition={{ duration: 0.3, ease: 'backOut' }}
51
                  className="w-full h-full absolute bottom-0 left-0 bg-white/10 rounded-sm"
52
                />
53
              )}
54
            </li>
55
          );
56
        })}
57
      </ul>
58
    </div>
59
  );
60
};
61

62
export default MagnetTabs;