Torch Face

1
2
3
4
5
6
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
"use client";
 
import { forwardRef, useState, type ComponentPropsWithoutRef } from "react";
 
import { cn } from "@/lib/cn";
import { Flashlight } from "lucide-react";
 
// Flashlight face widget — tap the mascot dial to toggle the torch on or off.
const MASCOT = "#FACC15";
const ACCENT = "#FDE047";
const DIAL = { cx: 88, cy: 84, r: 56 } as const;
 
type TorchMascotProps = Readonly<{
  on: boolean;
}>;
 
function TorchMascot({ on }: TorchMascotProps) {
  return (
    <g aria-hidden>
      <circle cx="88" cy="142" r="58" fill={MASCOT} />
      {on ? (
        <>
          <line
            x1="64"
            y1="121"
            x2="72"
            y2="123"
            stroke="white"
            strokeWidth="2.2"
            strokeLinecap="round"
          />
          <line
            x1="112"
            y1="121"
            x2="104"
            y2="123"
            stroke="white"
            strokeWidth="2.2"
            strokeLinecap="round"
          />
        </>
      ) : (
        <>
          <circle cx="68" cy="122" r="5" fill="white" />
          <circle cx="108" cy="122" r="5" fill="white" />
          <circle cx="69" cy="123" r="2.2" fill="#1C1C1E" />
          <circle cx="109" cy="123" r="2.2" fill="#1C1C1E" />
        </>
      )}
      {on ? (
        <ellipse cx="88" cy="139" rx="6" ry="4.5" fill="white" />
      ) : (
        <path
          d="M76 138 Q88 146 100 138"
          stroke="white"
          strokeWidth="2.2"
          fill="none"
          strokeLinecap="round"
        />
      )}
    </g>
  );
}
 
export type TorchFaceWidgetProps = Readonly<
  {
    defaultOn?: boolean;
  } & ComponentPropsWithoutRef<"button">
>;
 
export const TorchFaceWidget = forwardRef<
  HTMLButtonElement,
  TorchFaceWidgetProps
>(({ className, defaultOn = false, onClick, ...props }, ref) => {
  const [on, setOn] = useState(defaultOn);
 
  return (
    <button
      ref={ref}
      type="button"
      aria-pressed={on}
      aria-label={on ? "Turn torch off" : "Turn torch on"}
      data-slot="torch-face-widget"
      onClick={(event) => {
        setOn((prev) => !prev);
        onClick?.(event);
      }}
      className={cn(
        "relative h-44 w-44 max-w-full cursor-pointer overflow-hidden rounded-[1.75rem] bg-black font-sans shadow-lg shadow-black/5 select-none",
        className,
      )}
      {...props}
    >
      <svg
        viewBox="0 0 176 176"
        className="absolute inset-0 h-full w-full"
        aria-hidden
      >
        <rect width="176" height="176" fill="#000" />
        <TorchMascot on={on} />
        <circle
          cx={DIAL.cx}
          cy={DIAL.cy}
          r={DIAL.r}
          fill="none"
          stroke={on ? ACCENT : "white"}
          strokeWidth="1.5"
          opacity={on ? 0.45 : 0.25}
        />
      </svg>
 
      <span className="absolute top-3.5 right-3.5 z-10" aria-hidden>
        <Flashlight size={14} color={on ? ACCENT : "#FFFFFF66"} />
      </span>
 
      <p
        className={cn(
          "absolute inset-x-0 top-[34%] z-10 text-center text-base leading-none font-semibold",
          on ? "text-white" : "text-white/40",
        )}
      >
        {on ? "On" : "Off"}
      </p>
    </button>
  );
});
 
TorchFaceWidget.displayName = "TorchFaceWidget";