1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
// @deno-types="npm:@types/react@18.2.60"import * as React from "react";
import { IS_BROWSER } from "$fresh/runtime.ts";import { Button, type ButtonProps } from "./button.tsx";import { useDarkMode } from "./use-dark-mode.ts";import { cn } from "./utils.ts";
export type ButtonDarkModeProps = ButtonProps;
export function ButtonDarkMode({ className, ...props }: ButtonDarkModeProps) {  const darkMode = useDarkMode();
  return (    <Button      variant="outline"      size="icon"      onClick={() => darkMode.value = !darkMode.value}      className={cn(className)}      {...props}      disabled={IS_BROWSER ? !!props.disabled : true}    >      <div        className={cn(          "mdi-white-balance-sunny h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0",          darkMode.value === true && "hidden",        )}      />      <div        className={cn(          "mdi-weather-night h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100",          !darkMode.value && "hidden",        )}      />      <span className="sr-only">Toggle dark mode</span>    </Button>  );}