8-bit Retro Mode Switcher

1"use client";
2 
3import * as React from "react";
4 
5import { useTheme } from "next-themes";
6 
7import { Button } from "@/components/ui/8bit/button";
8import { cn } from "@/lib/utils";
9 
10interface RetroModeSwitcherProps {
11  className?: string;
12}
13 
14export function RetroModeSwitcher({ className }: RetroModeSwitcherProps) {
15  const { setTheme, resolvedTheme } = useTheme();
16 
17  const toggleTheme = React.useCallback(() => {
18    setTheme(resolvedTheme === "dark" ? "light" : "dark");
19  }, [resolvedTheme, setTheme]);
20 
21  return (
22    <Button
23      variant="ghost"
24      className="group/toggle h-8 w-8 px-0"
25      onClick={toggleTheme}
26    >
27      <svg
28        width="50"
29        height="50"
30        viewBox="0 0 256 256"
31        fill="currentColor"
32        xmlns="http://www.w3.org/2000/svg"
33        stroke="currentColor"
34        strokeWidth="0.25"
35        className={cn("size-8 hidden [html.dark_&]:block", className)}
36        aria-label="sun-dim"
37      >
38        <rect x="120" y="88" width="14" height="14" rx="1"></rect>
39        <rect x="104" y="88" width="14" height="14" rx="1"></rect>
40        <rect x="88" y="104" width="14" height="14" rx="1"></rect>
41        <rect x="88" y="120" width="14" height="14" rx="1"></rect>
42        <rect x="88" y="136" width="14" height="14" rx="1"></rect>
43        <rect x="136" y="88" width="14" height="14" rx="1"></rect>
44        <rect x="120" y="152" width="14" height="14" rx="1"></rect>
45        <rect x="104" y="152" width="14" height="14" rx="1"></rect>
46        <rect x="136" y="152" width="14" height="14" rx="1"></rect>
47        <rect x="152" y="104" width="14" height="14" rx="1"></rect>
48        <rect x="168" y="72" width="14" height="14" rx="1"></rect>
49        <rect x="168" y="168" width="14" height="14" rx="1"></rect>
50        <rect x="72" y="168" width="14" height="14" rx="1"></rect>
51        <rect x="72" y="72" width="14" height="14" rx="1"></rect>
52        <rect x="120" y="56" width="14" height="14" rx="1"></rect>
53        <rect x="56" y="120" width="14" height="14" rx="1"></rect>
54        <rect x="120" y="184" width="14" height="14" rx="1"></rect>
55        <rect x="184" y="120" width="14" height="14" rx="1"></rect>
56        <rect x="40" y="120" width="14" height="14" rx="1"></rect>
57        <rect x="120" y="40" width="14" height="14" rx="1"></rect>
58        <rect x="120" y="200" width="14" height="14" rx="1"></rect>
59        <rect x="184" y="184" width="14" height="14" rx="1"></rect>
60        <rect x="56" y="184" width="14" height="14" rx="1"></rect>
61// … truncated