Dial frame

import { DialFrame } from "@bosunkit/components/dial-frame";
import {
  Compass,
  CompassDirection,
  Priority,
  RateOfTurn,
  Rudder,
  SpeedGauge,
  Wind,
  WindVariant,
} from "@bosunkit/instruments";
import type { ReactElement } from "react";

export const description: string =
  "Five dials from the helm on passage to Audierne, each in a frame of one face size with its label, value and " +
  "source under it, so the row lines up across the faces whatever the captions hold.";

export default function Showcase(): ReactElement {
  return (
    <div
      style={{
        display: "grid",
        gridTemplateColumns: "repeat(auto-fit, minmax(9em, 1fr))",
        gap: "var(--space-md)",
        width: "100%",
      }}
    >
      <DialFrame label="Heading" value="196°" source="Compass">
        <Compass
          heading={196}
          courseOverGround={200}
          headingSetpoint={196}
          direction={CompassDirection.NorthUp}
          priority={Priority.enhanced}
        />
      </DialFrame>
      <DialFrame label="True wind" value="18 kn" source="Masthead">
        <Wind
          variant={WindVariant.medium}
          priority={Priority.enhanced}
          currentWindSpeedKnots={18}
          currentWindFromDirection={245}
          vesselHeadingDeg={196}
        />
      </DialFrame>
      <DialFrame label="Speed over ground" value="6.4 kn" source="GPS">
        <SpeedGauge speed={6.4} maxSpeed={10} tickmarkInterval={2} showLabels />
      </DialFrame>
      <DialFrame label="Rate of turn" value="4°/min" source="Compass">
        <RateOfTurn rateOfTurnDegreesPerMinute={4} />
      </DialFrame>
      <DialFrame label="Rudder" value="3° S" source="Autopilot">
        <Rudder angle={3} maxAngle={35} showLabels />
      </DialFrame>
    </div>
  );
}

import { DialFrame } from "@bosunkit/components/dial-frame";
import { Compass, CompassDirection, Priority, Rudder } from "@bosunkit/instruments";
import type { ReactElement } from "react";

export const description: string =
  "Two dials with a fixed 8em face, side by side in a wide row: the faces stay 8em whatever the row's width.";

export default function FaceSize(): ReactElement {
  return (
    <div style={{ display: "flex", flexWrap: "wrap", gap: "var(--space-md)", width: "100%" }}>
      <DialFrame label="Heading" value="196°" source="Compass" faceSize="8em">
        <Compass heading={196} direction={CompassDirection.NorthUp} priority={Priority.enhanced} />
      </DialFrame>
      <DialFrame label="Rudder" value="3° S" source="Autopilot" faceSize="8em">
        <Rudder angle={3} maxAngle={35} />
      </DialFrame>
    </div>
  );
}

import { DialFrame } from "@bosunkit/components/dial-frame";
import { DepthActual } from "@bosunkit/instruments";
import type { ReactElement } from "react";

export const description: string =
  "The caption's three parts: the depth dial with its label alone, with its source, and with its value; in a narrow " +
  "frame the value moves under the label.";

export default function Caption(): ReactElement {
  return (
    <div
      style={{
        display: "grid",
        gridTemplateColumns: "repeat(3, minmax(6em, 10em))",
        gap: "var(--space-md)",
        width: "100%",
      }}
    >
      <DialFrame label="Depth">
        <DepthActual depth={12.4} draft={2.2} maxDepth={40} />
      </DialFrame>
      <DialFrame label="Depth" source="Sounder">
        <DepthActual depth={12.4} draft={2.2} maxDepth={40} />
      </DialFrame>
      <DialFrame label="Depth" source="Sounder" value="12.4 m">
        <DepthActual depth={12.4} draft={2.2} maxDepth={40} />
      </DialFrame>
    </div>
  );
}