Wifi Toggle

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
"use client";
 
import { forwardRef, useState, type ComponentPropsWithoutRef } from "react";
 
import { cn } from "@/lib/cn";
import { Wifi } from "lucide-react";
 
// iOS-style Wi-Fi card with a status dot, network label, and on/off switch.
export type WiFiToggleWidgetProps = Readonly<
  {
    // Network name shown when Wi-Fi is on.
    networkName?: string;
    // Initial toggle state when the widget first renders.
    defaultOn?: boolean;
  } & ComponentPropsWithoutRef<"div">
>;
 
// iOS-style Wi-Fi card with a status dot, network label, and on/off switch.
export const WiFiToggleWidget = forwardRef<
  HTMLDivElement,
  WiFiToggleWidgetProps
>(
  (
    { className, networkName = "Studio-5G", defaultOn = false, ...props },
    ref,
  ) => {
    const [on, setOn] = useState(defaultOn);
 
    return (
      <div
        ref={ref}
        data-slot="wifi-toggle-widget"
        className={cn(
          "flex h-44 w-44 flex-col overflow-hidden rounded-3xl border border-neutral-100 bg-white p-4 font-sans shadow-lg shadow-black/5 select-none",
          className,
        )}
        {...props}
      >
        <div className="flex items-center justify-between gap-2">
          <p className="text-[10px] font-semibold tracking-widest text-neutral-400 uppercase">
            Wi-Fi
          </p>
          {/* Green dot = connected, gray dot = off. */}
          <span
            aria-hidden
            className={cn(
              "h-2 w-2 shrink-0 rounded-full transition-colors",
              on ? "bg-emerald-500" : "bg-neutral-300",
            )}
          />
          <span className="sr-only">{on ? "Connected" : "Off"}</span>
        </div>
 
        {/* Icon and network details update based on the toggle state. */}
        <div className="flex flex-1 flex-col items-center justify-center gap-1 py-2">
          <div
            className={cn(
              "flex h-11 w-11 items-center justify-center rounded-full transition-colors",
              on ? "bg-neutral-100" : "bg-neutral-50",
            )}
          >
            <Wifi
              size={22}
              className={cn(
                "transition-colors",
                on ? "text-neutral-900" : "text-neutral-300",
              )}
            />
          </div>
          <p
            className={cn(
              "max-w-full truncate text-xs font-semibold",
              on ? "text-neutral-900" : "text-neutral-400",
            )}
          >
            {on ? networkName : "No network"}
          </p>
          <p className="text-[10px] text-neutral-400">
            {on ? "WPA3 · 5 GHz" : "Tap to connect"}
          </p>
        </div>
 
        {/* Bottom switch — slides right when Wi-Fi is on. */}
        <div className="flex justify-center">
          <button
            type="button"
            aria-label="Toggle Wi-Fi"
            aria-pressed={on}
            onClick={() => setOn(!on)}
            className={cn(
              "flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full p-0.5 transition-colors",
              on ? "bg-emerald-400" : "bg-neutral-200",
            )}
          >
            <span
              className={cn(
                "h-5 w-5 rounded-full bg-white shadow-sm transition-transform duration-200 ease-out",
                on ? "translate-x-5" : "translate-x-0",
              )}
            />
          </button>
        </div>
      </div>
    );
  },
);
 
WiFiToggleWidget.displayName = "WiFiToggleWidget";