"use client"; import * as React from "react"; import { MinusIcon, PlusIcon, SunIcon, SunDimIcon, MoonIcon, } from "lucide-react"; import { motion, AnimatePresence } from "framer-motion"; import { Button } from "@/components/ui/button"; export function BrightnessControl() { const [brightness, setBrightness] = React.useState(3); const decreaseBrightness = () => { if (brightness > 0) { setBrightness((prev) => prev - 1); } }; const increaseBrightness = () => { if (brightness < 6) { setBrightness((prev) => prev + 1); } }; const getBrightnessIcon = () => { if (brightness === 0) return MoonIcon; if (brightness < 3) return SunDimIcon; return SunIcon; }; const dynamicOpacity = brightness === 0 ? 0.3 : 0.4 + (brightness / 6) * 0.6; const numberVariants = { initial: { opacity: 0, y: 20 }, animate: { opacity: dynamicOpacity, y: 0 }, exit: { opacity: 0, y: -20 }, transition: { duration: 0.2 }, }; const buttonVariants = { tap: { scale: 0.9 }, hover: { scale: 1.05 }, }; const Icon = getBrightnessIcon(); return (

Brightness Control

{brightness}

); }