Animated Radio

1"use client";
2 
3import { motion } from "framer-motion";
4import { useState } from "react";
5 
6const options = ["Daily", "Weekly", "Monthly", "Never"];
7 
8export function AnimatedRadio() {
9  const [selected, setSelected] = useState("Weekly");
10 
11  return (
12    <div className="space-y-3">
13      <p className="text-sm font-medium">Email frequency</p>
14      {options.map((option) => (
15        <label key={option} className="flex cursor-pointer items-center gap-3">
16          <motion.div
17            className="relative flex h-6 w-6 items-center justify-center rounded-full border-2"
18            style={{
19              borderColor:
20                selected === option
21                  ? "rgb(var(--accent))"
22                  : "rgb(var(--border))",
23            }}
24            whileHover={{ scale: 1.1 }}
25            whileTap={{ scale: 0.95 }}
26            onClick={() => setSelected(option)}
27          >
28            <motion.div
29              initial={false}
30              animate={{
31                scale: selected === option ? 1 : 0,
32              }}
33              transition={{ type: "spring", stiffness: 500, damping: 30 }}
34              className="h-3 w-3 rounded-full"
35              style={{ backgroundColor: "rgb(var(--accent))" }}
36            />
37          </motion.div>
38          <span className="text-sm">{option}</span>
39        </label>
40      ))}
41    </div>
42  );
43}