WiFi network list

import {
  WifiNetworkList,
  type WifiConnectRequest,
  type WifiConnectResult,
} from "@bosunkit/components/wifi-network-list";
import { useState, type Dispatch, type ReactElement, type SetStateAction } from "react";
import { NETWORKS } from "./networks";

export const description: string =
  "Choose a network to see its details, type its password and choose its DNS; this example connects nothing.";

/** A connection that succeeds after a moment and changes nothing. */
function pretendConnect(): Promise<WifiConnectResult> {
  return new Promise<WifiConnectResult>((resolve: (result: WifiConnectResult) => void): void => {
    setTimeout((): void => {
      resolve({ status: "connected" });
    }, 800);
  });
}

export default function Showcase(): ReactElement {
  const [last, setLast]: [string, Dispatch<SetStateAction<string>>] = useState<string>("nothing yet");
  return (
    <div style={{ display: "grid", gap: "var(--space-sm)", maxInlineSize: "36rem" }}>
      <WifiNetworkList
        networks={NETWORKS}
        connectAction={(request: WifiConnectRequest): Promise<WifiConnectResult> => {
          setLast(`connect to ${request.ssid} with DNS ${request.dns.mode}`);
          return pretendConnect();
        }}
        disconnectAction={(ssid: string): Promise<void> => {
          setLast(`disconnect from ${ssid}`);
          return Promise.resolve();
        }}
        forgetAction={(ssid: string): Promise<void> => {
          setLast(`forget ${ssid}`);
          return Promise.resolve();
        }}
        onAutoJoinChange={(ssid: string, on: boolean): void => {
          setLast(`join ${ssid} automatically: ${String(on)}`);
        }}
        rescanAction={(): Promise<void> => new Promise<void>((resolve: () => void): void => void setTimeout(resolve, 1200))}
      />
      <p style={{ margin: 0, color: "var(--text-dim)" }}>The page receives: {last}</p>
    </div>
  );
}

import { WifiNetworkList, type WifiConnectResult } from "@bosunkit/components/wifi-network-list";
import type { ReactElement } from "react";
import { NETWORKS } from "./networks";

export const description: string =
  "A connection bosund refuses: choose Marina Guest, type a password and connect to see the reason under the field.";

export default function Refused(): ReactElement {
  return (
    <div style={{ maxInlineSize: "36rem" }}>
      <WifiNetworkList
        networks={NETWORKS}
        connectAction={(): Promise<WifiConnectResult> =>
          Promise.resolve({
            status: "rejected",
            message: "Marina Guest didn't accept that password. Check it with the marina office and try again.",
          })
        }
      />
    </div>
  );
}

import { WifiNetworkList } from "@bosunkit/components/wifi-network-list";
import type { ReactElement } from "react";

export const description: string = "A scan that found nothing: it says so and offers to scan again.";

export default function Empty(): ReactElement {
  return (
    <div style={{ maxInlineSize: "36rem" }}>
      <WifiNetworkList networks={[]} rescanAction={(): Promise<void> => Promise.resolve()} />
    </div>
  );
}