1
npm i framer-motion

1
'use client';
2

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

6
type ToggleButtonProps = {
7
  options: Array<{
8
    icon: React.ReactNode;
9
    value: string;
10
  }>;
11
  defaultValue?: string;
12
  onChange?: (value: string) => void;
13
};
14

15
const ToggleButton = ({ options, defaultValue, onChange, ...props }: ToggleButtonProps) => {
16
  const [currentIndex, setCurrentIndex] = useState(
17
    options.findIndex((option) => option.value === defaultValue) || 0
18
  );
19

20
  const onClick = () => {
21
    const nextIndex = (currentIndex + 1) % options.length;
22
    setCurrentIndex(nextIndex);
23
    if (onChange) onChange(options[nextIndex].value);
24
  };
25

26
  return (
27
    <motion.div
28
      className="relative h-[64px] w-[64px] overflow-hidden rounded-full border-2 border-neutral-600 hover:border-neutral-200 transition-all hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-white/30"
29
      {...props}
30
      onClick={onClick}
31
      whileTap={{ scale: 0.9 }}
32
      transition={{ duration: 0.1, ease: 'backOut' }}
33
      role="button"
34
      tabIndex={0}
35
      onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ') && onClick()}
36
      aria-label="Toggle button"
37
    >
38
      <motion.div
39
        animate={{ y: -currentIndex * 64 }}
40
        transition={{ type: 'spring', stiffness: 300, damping: 20 }}
41
        className="flex flex-col pb-1"
42
        style={{ height: `${options.length * 64}px` }}
43
      >
44
        {options.map((option) => (
45
          <div key={option.value} className="h-[64px] w-full flex items-center justify-center">
46
            {option.icon}
47
          </div>
48
        ))}
49
      </motion.div>
50
    </motion.div>
51
  );
52
};
53

54
export default ToggleButton;