VHF channel input

import { VhfChannelInput } from "@bosunkit/components/vhf-channel-input";
import { useState, type Dispatch, type ReactElement, type SetStateAction } from "react";

export const description: string =
  "A marina's entry: the channel the harbour office works on and the one it keeps a watch on. Each takes a number or " +
  "a designator, steps through the channels with the arrow keys and writes the frequencies under it.";

export default function Showcase(): ReactElement {
  const [working, setWorking]: [string, Dispatch<SetStateAction<string>>] = useState<string>("80");
  const [watch, setWatch]: [string, Dispatch<SetStateAction<string>>] = useState<string>("16");
  return (
    <div style={{ width: "100%", display: "flex", flexWrap: "wrap", gap: "var(--space-lg)" }}>
      <VhfChannelInput label="Harbour office" value={working} onValueChange={setWorking} />
      <VhfChannelInput label="Watch kept on" purpose="monitored" value={watch} onValueChange={setWatch} />
    </div>
  );
}

import { VhfChannelInput } from "@bosunkit/components/vhf-channel-input";
import type { ReactElement } from "react";

export const description: string = "Empty: the hint says what the field takes.";

export default function Empty(): ReactElement {
  return <VhfChannelInput label="Working channel" hint="A number such as 72, or M1 for a UK marina" />;
}

import { VhfChannelInput } from "@bosunkit/components/vhf-channel-input";
import type { ReactElement } from "react";

export const description: string =
  "A single-frequency channel writes its one frequency and, where the Radio Regulations set it aside, what for.";

export default function Simplex(): ReactElement {
  return <VhfChannelInput label="Bridge to bridge" purpose="monitored" defaultValue="13" />;
}

import { VhfChannelInput } from "@bosunkit/components/vhf-channel-input";
import type { ReactElement } from "react";

export const description: string =
  "A two-frequency channel writes the ship's frequency and the coast station's, 4.6 MHz above it.";

export default function Duplex(): ReactElement {
  return <VhfChannelInput label="Coast station" defaultValue="24" />;
}

import { VhfChannelInput } from "@bosunkit/components/vhf-channel-input";
import type { ReactElement } from "react";

export const description: string =
  "A four-digit designator names one side of a two-frequency channel used alone: 1022, typed as 1022 or as the US 22A, " +
  "is 22's ship frequency.";

export default function SimplexDesignator(): ReactElement {
  return <VhfChannelInput label="Coast Guard working" defaultValue="22A" />;
}

import { VhfChannelInput } from "@bosunkit/components/vhf-channel-input";
import type { ReactElement } from "react";

export const description: string =
  "Channel 16 as a working channel is questioned: it is kept for distress, safety and calling. As a monitored channel " +
  "it is taken without a question.";

export default function Questioned(): ReactElement {
  return <VhfChannelInput label="Working channel" defaultValue="16" />;
}

import { VhfChannelInput } from "@bosunkit/components/vhf-channel-input";
import type { ReactElement } from "react";

export const description: string =
  "A channel that carries no voice, 70 for digital selective calling or an AIS channel, is refused, and so is text " +
  "that names no channel; the text stays.";

export default function Invalid(): ReactElement {
  return (
    <VhfChannelInput
      label="Working channel"
      defaultValue="70"
      error="Channel 70 carries digital selective calls only, never voice. Choose a voice channel, such as 72."
    />
  );
}

import { VhfChannelInput } from "@bosunkit/components/vhf-channel-input";
import type { ReactElement } from "react";

export const description: string = "Disabled: dimmed, and takes no input.";

export default function Disabled(): ReactElement {
  return <VhfChannelInput label="Working channel" disabled />;
}