Animated Select

1"use client";
2 
3import { AnimatePresence, motion } from "framer-motion";
4import { Check, ChevronDown } from "lucide-react";
5import { useState } from "react";
6 
7const options = ["React", "Vue", "Angular", "Svelte", "Next.js"];
8 
9export function AnimatedSelect() {
10  const [isOpen, setIsOpen] = useState(false);
11  const [selected, setSelected] = useState(options[0]);
12 
13  return (
14    <div className="relative w-full max-w-xs">
15      <motion.button
16        onClick={() => setIsOpen(!isOpen)}
17        className="flex w-full items-center justify-between rounded-lg border  bg-[var(--card-bg)] px-4 py-2 text-sm"
18        whileHover={{ scale: 1.01 }}
19        whileTap={{ scale: 0.99 }}
20      >
21        <span>{selected}</span>
22        <motion.div animate={{ rotate: isOpen ? 180 : 0 }}>
23          <ChevronDown className="h-4 w-4" />
24        </motion.div>
25      </motion.button>
26 
27      <AnimatePresence>
28        {isOpen && (
29          <motion.div
30            initial={{ opacity: 0, y: -10 }}
31            animate={{ opacity: 1, y: 0 }}
32            exit={{ opacity: 0, y: -10 }}
33            transition={{ duration: 0.2 }}
34            className="absolute top-full z-50 mt-2 w-full rounded-lg border  bg-[var(--card-bg)] py-2 shadow-lg"
35          >
36            {options.map((option, index) => (
37              <motion.button
38                key={option}
39                initial={{ opacity: 0, x: -10 }}
40                animate={{ opacity: 1, x: 0 }}
41                transition={{ delay: index * 0.05 }}
42                onClick={() => {
43                  setSelected(option);
44                  setIsOpen(false);
45                }}
46                className="flex w-full items-center justify-between px-4 py-2 text-left text-sm hover:bg-accent/10"
47                whileHover={{ x: 4 }}
48              >
49                <span>{option}</span>
50                {selected === option && (
51                  <Check className="h-4 w-4 text-accent" />
52                )}
53              </motion.button>
54            ))}
55          </motion.div>
56        )}
57      </AnimatePresence>
58    </div>
59  );
60}