Readout block

import {
  ObcTextboxAlignment,
  ObcTextboxFontWeight,
  ObcTextboxSize,
  ReadoutBlock,
  ReadoutDataQuality,
  ReadoutSize,
  ReadoutValueType,
} from "@bosunkit/instruments";
import { MapPin, Navigation, Waves } from "lucide-react";
import { useEffect, useState } from "react";
import type { CSSProperties, Dispatch, ReactElement, ReactNode, SetStateAction } from "react";

export const description: string =
  "A cockpit repeater built from bare blocks on a one-second feed: three sizes and a larger number size, the enhanced tone, three weights, marker icons, degrees with hinted zeros, reserved widths and alignment, a text position, an off value and both data quality marks.";

const CELL_STYLE: CSSProperties = {
  display: "grid",
  gap: 4,
  justifyItems: "end",
  padding: "10px 12px",
  borderRadius: 8,
  background: "var(--container-section-color)",
};
const CAPTION_STYLE: CSSProperties = { fontSize: 11, color: "var(--element-neutral-color)", justifySelf: "start" };

function Cell({ caption, children }: { caption: string; children: ReactNode }): ReactElement {
  return (
    <div style={CELL_STYLE}>
      <span style={CAPTION_STYLE}>{caption}</span>
      {children}
    </div>
  );
}

export default function Showcase(): ReactElement {
  const [step, setStep]: [number, Dispatch<SetStateAction<number>>] = useState<number>(0);

  useEffect((): (() => void) => {
    const timer: number = window.setInterval((): void => {
      setStep((previous: number): number => previous + 1);
    }, 1000);
    return (): void => {
      window.clearInterval(timer);
    };
  }, []);

  const heading: number = 58 + 3 * Math.sin(step / 4);
  const speed: number = 6.2 + 0.4 * Math.sin(step / 3);
  const depth: number = 9.6 + 0.8 * Math.sin(step / 5);
  const distance: number = 14.2 - (step % 60) * 0.02;

  return (
    <div
      style={{
        display: "grid",
        gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))",
        gap: 8,
        width: "100%",
        maxWidth: 600,
      }}
    >
      <Cell caption="Heading, autopilot in command">
        <ReadoutBlock
          value={heading}
          size={ReadoutSize.large}
          enhanced
          weight={ObcTextboxFontWeight.bold}
          hasDegree
          maxDigits={3}
          hintedZeros
          hasIcon
          icon={<Navigation size={18} aria-hidden />}
        />
      </Cell>
      <Cell caption="Speed over ground, kn">
        <ReadoutBlock
          value={speed}
          size={ReadoutSize.medium}
          weight={ObcTextboxFontWeight.semibold}
          fractionDigits={1}
          maxDigits={2}
          spaceReserver="00.0"
          alignment={ObcTextboxAlignment.Right}
        />
      </Cell>
      <Cell caption="Depth, m, large digits in a small block">
        <ReadoutBlock
          value={depth}
          size={ReadoutSize.small}
          valueSize={ObcTextboxSize.xl}
          fractionDigits={1}
          hasIcon
          icon={<Waves size={14} aria-hidden />}
        />
      </Cell>
      <Cell caption="Distance to Sóller, nmi">
        <ReadoutBlock
          value={distance}
          fractionDigits={2}
          maxDigits={3}
          hintedZeros
          alignment={ObcTextboxAlignment.Left}
        />
      </Cell>
      <Cell caption="Position, GPS">
        <ReadoutBlock
          value="39°47.6′N 2°41.9′E"
          valueType={ReadoutValueType.text}
          hasIcon
          icon={<MapPin size={14} aria-hidden />}
        />
      </Cell>
      <Cell caption="Radar range">
        <ReadoutBlock value={0} off offText="Standby" size={ReadoutSize.medium} />
      </Cell>
      <Cell caption="True wind, kn, sensor uncalibrated">
        <ReadoutBlock value={17.6} fractionDigits={1} dataQuality={ReadoutDataQuality.lowIntegrity} />
      </Cell>
      <Cell caption="Sea temperature, °C, no reading">
        <ReadoutBlock value={null} dataQuality={ReadoutDataQuality.invalid} />
      </Cell>
    </div>
  );
}

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

export const description: string = "The default block, a plain value, at its default size.";

export default function Value(): ReactElement {
  return (
    <ReadoutBlock value={12.4} fractionDigits={1} />
  );
}