Fancy Theme Toggle

1"use client";
2 
3import { useCallback } from "react";
4 
5import { useTheme } from "next-themes";
6 
7import { CloudIcon, SparkleIcon } from "lucide-react";
8import { motion } from "motion/react";
9 
10export const ThemeToggle = () => {
11  const { setTheme, resolvedTheme } = useTheme();
12 
13  const toggleTheme = useCallback(() => {
14    setTheme(resolvedTheme === "dark" ? "light" : "dark");
15  }, [resolvedTheme, setTheme]);
16 
17  return (
18    <button
19      onClick={toggleTheme}
20      role="switch"
21      className="relative flex w-20 justify-start overflow-hidden rounded-full bg-linear-to-b from-blue-500 to-blue-300 p-1.5 shadow-[inset_0_2px_4px_rgba(0,0,0,0.3),inset_0_-2px_3px_rgba(0,0,0,0.1)] dark:justify-end dark:from-neutral-900 dark:to-neutral-800"
22    >
23      <Thumb />
24 
25      {resolvedTheme === "dark" ? <Stars /> : <Clouds />}
26    </button>
27  );
28};
29 
30const Thumb = () => {
31  return (
32    <motion.div
33      layout
34      transition={{
35        type: "spring",
36        stiffness: 420,
37        damping: 32,
38        mass: 0.6,
39      }}
40      className="relative size-7 rounded-full bg-linear-to-br from-yellow-300 to-yellow-400 shadow-[inset_1px_1px_2px_0px_rgba(255,255,255),0px_3px_9px_4px_rgba(0,0,0,0.141)] dark:from-gray-200 dark:to-gray-300 dark:after:absolute dark:after:bottom-1.5 dark:after:left-1 dark:after:size-3 dark:after:rounded-full dark:after:bg-gray-400 dark:after:shadow-[6px_-10px_0_-3.5px_var(--color-gray-400),10px_4px_0_-3px_var(--color-gray-400)] dark:after:content-['']"
41    />
42  );
43};
44 
45const Stars = () => {
46  return (
47    <motion.div
48      initial={{ y: "-100%" }}
49      animate={{ y: 0 }}
50      transition={{
51        duration: 0.2,
52        ease: "easeOut",
53      }}
54      className="absolute inset-0"
55    >
56      <SparkleIcon className="absolute top-2 left-2 size-2 fill-gray-400 stroke-0" />
57      <SparkleIcon className="absolute top-4 left-5 size-2.5 fill-gray-400 stroke-0" />
58      <SparkleIcon className="absolute top-2 left-10 size-1 fill-gray-400 stroke-0" />
59      <SparkleIcon className="absolute top-1 left-7 size-1 fill-gray-400 stroke-0" />
60      <SparkleIcon className="absolute bottom-2 left-2 size-1 fill-gray-400 stroke-0" />
61      <SparkleIcon className="absolute bottom-2 left-8 size-1 fill-gray-400 stroke-0" />
62      <SparkleIcon className="absolute bottom-1 left-5 size-1.5 fill-gray-400 stroke-0" />
63    </motion.div>
64  );
65};
66 
67const Clouds = () => {
68  return (
69    <motion.div
70      initial={{ y: "100%" }}
71      animate={{ y: 0 }}
72      transition={{
73// … truncated