Brilliance menu

import {
  BrillianceMenu,
  ObcPalette,
  Readout,
  ReadoutPriority,
  ReadoutSize,
  type BrilliancePalette,
} from "@bosunkit/instruments";
import { useState } from "react";
import type { CSSProperties, Dispatch, ReactElement, SetStateAction } from "react";

export const description: string =
  "The menu drives a helm display beside it: choosing Night, Dusk, Day or Bright restyles the whole panel, and the slider and step buttons dim the readouts in steps of 1 and 10 percent.";

const PALETTE_NOTES: Record<BrilliancePalette, string> = {
  auto: "Auto: follows the system light or dark setting.",
  [ObcPalette.night]: "Night: amber on black, so the watch keeps its dark adaptation.",
  [ObcPalette.dusk]: "Dusk: dark surfaces for twilight and a dim saloon.",
  [ObcPalette.day]: "Day: light surfaces for the cockpit under cloud.",
  [ObcPalette.bright]: "Bright: full contrast for direct sunlight on the screen.",
};

const NOTE_STYLE: CSSProperties = { margin: 0, fontSize: 12, color: "var(--element-neutral-color)", maxWidth: 260 };

export default function Showcase(): ReactElement {
  const [palette, setPalette]: [BrilliancePalette, Dispatch<SetStateAction<BrilliancePalette>>] =
    useState<BrilliancePalette>(ObcPalette.dusk);
  const [brightness, setBrightness]: [number, Dispatch<SetStateAction<number>>] = useState<number>(62);

  // The display's backlight never goes fully dark: 0 percent still leaves a fifth of full brightness.
  const backlight: number = 0.2 + (0.8 * brightness) / 100;

  return (
    <div
      data-theme={palette === "auto" ? undefined : palette}
      style={{
        display: "flex",
        flexWrap: "wrap",
        gap: 20,
        alignItems: "flex-start",
        justifyContent: "center",
        padding: 16,
        borderRadius: 10,
        background: "var(--container-background-color)",
        color: "var(--element-active-color)",
      }}
    >
      <BrillianceMenu
        palette={palette}
        brightness={brightness}
        brightnessUnit="%"
        brightnessMax={100}
        brightnessMinorStep={1}
        brightnessMajorStep={10}
        showBrightness
        showPalette
        onBrightnessChange={setBrightness}
        onThemeSelect={setPalette}
        onReset={(): void => {
          setPalette("auto");
        }}
      />
      <div style={{ display: "grid", gap: 12 }}>
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(2, auto)",
            gap: "12px 24px",
            padding: 16,
            borderRadius: 8,
            background: "var(--container-section-color)",
            filter: `brightness(${backlight.toFixed(2)})`,
          }}
        >
          <Readout
            label="Depth"
            unit="m"
            src="Echosounder"
            value={12.4}
            fractionDigits={1}
            size={ReadoutSize.large}
            priority={ReadoutPriority.enhanced}
          />
          <Readout label="SOG" unit="kn" src="GPS" value={6.2} fractionDigits={1} size={ReadoutSize.large} />
          <Readout label="HDG" value={214} hasDegree src="Compass" size={ReadoutSize.medium} />
          <Readout label="TWS" unit="kn" src="Masthead" value={17.8} fractionDigits={1} size={ReadoutSize.medium} />
        </div>
        <p style={NOTE_STYLE}>{PALETTE_NOTES[palette]}</p>
        <p style={NOTE_STYLE}>Display at {brightness} %, set from the menu.</p>
      </div>
    </div>
  );
}

import { BrillianceMenu } from "@bosunkit/instruments";
import type { ReactElement } from "react";

export const description: string =
  "The menu holding its own brightness, starting at 75 percent: the slider and the step buttons move it.";

export default function ThreeQuarters(): ReactElement {
  return <BrillianceMenu defaultBrightness={75} />;
}