Skip to content
design
Components

Vessel overview

The vessel at the top of the situation board, her profile and particulars, closing to one line.

On this page

Hanse 460 Design Berret-Racoupeau Built 2021–present

WLLWL 13.05 mLOA 14.60 mDraft 2.25 m
Length overall
14.60 m
Beam
4.79 m
Draft
2.25 m
Air draft
21.90 m
Displacement
12,560 kg
Althea, a Hanse 460 by Berret-Racoupeau, at the top of the situation board.
Code
import { VesselOverview } from "@bosunkit/components/vessel-overview";
import { HANSE_2021 } from "@bosunkit/components/vessel-profile";
import type { ReactElement } from "react";

export const description: string =
  "Althea, a Hanse 460, at the top of the situation board: her name over her model, MMSI and call sign, and her " +
  "profile in the water, dimensioned, with her principal particulars listed beside it.";

export default function Showcase(): ReactElement {
  return (
    <VesselOverview
      name="Althea"
      model="Hanse 460"
      designer="Berret-Racoupeau"
      modelYears="2021–present"
      mmsi="244123456"
      callSign="PDAX"
      outline={HANSE_2021}
      proportions={{ lengthOverall: 14.6, waterlineLength: 13.05, draft: 2.25 }}
      dimensions={{
        lengthOverall: "14.60 m",
        waterlineLength: "13.05 m",
        draft: "2.25 m",
        beam: "4.79 m",
        airDraft: "21.90 m",
        displacement: "12,560 kg",
      }}
    />
  );
}

The vessel overview is the situation board's first element. Her name heads it in display type, with her MMSI and call sign on its line, since they are hers, and under it her model with its designer and the years it was built. Open, her vessel profile is drawn in the water from her outline at her own particulars, with her length overall, waterline length, draft and freeboard dimensioned on the drawing, and her length overall, beam, draft, air draft and displacement listed beside it on a wide board, under it on a narrow one, each label in small capitals over its value in large figures. The name is the button that opens and closes the profile. Closed, a line under the model keeps her length overall, draft and air draft, so the alerts under it move up without losing what the crew check against a depth or a bridge.

The profile keeps to a share of the screen's height, so the alerts stay in view under it. The overview keeps its open state, open at first, or the board keeps it through open and onOpenChange, so a crew member who closes it finds it closed on the next visit. The name, the model, its designer and years, the MMSI, the call sign and every particular come from the caller as display text in the crew's language; the overview translates only the labels.

Examples

Collapsed

Hanse 460 Design Berret-Racoupeau Built 2021–present

LOA 14.60 m · Draft 2.25 m · Air draft 21.90 m

Closed, the overview keeps her name with her length overall, draft and air draft, and her model, MMSI and call sign under it.
Code
import { VesselOverview } from "@bosunkit/components/vessel-overview";
import { HANSE_2021 } from "@bosunkit/components/vessel-profile";
import type { ReactElement } from "react";

export const description: string =
  "Closed, the overview keeps her name with her length overall, draft and air draft, and her model, MMSI and call " +
  "sign under it.";

export default function Collapsed(): ReactElement {
  return (
    <VesselOverview
      name="Althea"
      model="Hanse 460"
      designer="Berret-Racoupeau"
      modelYears="2021–present"
      mmsi="244123456"
      callSign="PDAX"
      defaultOpen={false}
      outline={HANSE_2021}
      proportions={{ lengthOverall: 14.6, waterlineLength: 13.05, draft: 2.25 }}
      dimensions={{
        lengthOverall: "14.60 m",
        waterlineLength: "13.05 m",
        draft: "2.25 m",
        beam: "4.79 m",
        airDraft: "21.90 m",
        displacement: "12,560 kg",
      }}
    />
  );
}

A catamaran

Leopard 46 Design Simonis Voogd Built 2024–present

WLLWL 13.42 mLOA 13.90 mDraft 1.65 m
Length overall
13.90 m
Beam
7.35 m
Draft
1.65 m
Air draft
22.90 m
Displacement
17,656 kg
A Leopard 46 drawn from the sailing catamaran outline, at her length overall, waterline length and draft from the vessel catalog.
Code
import { VesselOverview } from "@bosunkit/components/vessel-overview";
import { SAILING_CATAMARAN } from "@bosunkit/components/vessel-profile";
import type { ReactElement } from "react";

export const description: string =
  "A Leopard 46 drawn from the sailing catamaran outline, at her length overall, waterline length and draft from " +
  "the vessel catalog.";

export default function Catamaran(): ReactElement {
  return (
    <VesselOverview
      name="Wind Dancer"
      model="Leopard 46"
      designer="Simonis Voogd"
      modelYears="2024–present"
      mmsi="235098765"
      callSign="2ABC4"
      outline={SAILING_CATAMARAN}
      proportions={{ lengthOverall: 13.9, waterlineLength: 13.42, draft: 1.65 }}
      dimensions={{
        lengthOverall: "13.90 m",
        waterlineLength: "13.42 m",
        draft: "1.65 m",
        beam: "7.35 m",
        airDraft: "22.90 m",
        displacement: "17,656 kg",
      }}
    />
  );
}

Props

PropTypeDefaultDescription
namerequiredstring–The vessel's name, as the crew calls her ("Althea").
modelstring | undefined–Her builder and model, as display text ("Hanse 460").
designerstring | undefined–Who designed her model, as display text ("Berret-Racoupeau"): written on the model's line.
modelYearsstring | undefined–The years her model was built, as display text ("2021–present"): written on the model's line.
mmsistring | undefined–Her MMSI, as display text ("244123456"): written on her name's line, open or closed.
callSignstring | undefined–Her call sign, as display text ("PDAX"): written on her name's line, open or closed.
outlineVesselOutline | undefined–Her shape's or her range's outline, one of VESSEL_OUTLINES; the profile's default when unset.
proportionsVesselProportions | undefined–Her particulars as numbers in meters, which stretch the outline to her proportions.
frameLengthnumber | undefined–The length in meters the drawing's hull span stands for; her own length overall by default.
dimensionsVesselProfileDimensions | undefined–Her particulars as display text with their units, in the crew's language. Open, her length overall, waterline length, draft and freeboard are dimensioned on the drawing, and her length overall, beam, draft, air draft and displacement listed beside it; closed, her length overall, draft and air draft are written on her name's line.
openboolean | undefined–Whether the profile is open, for a caller that keeps the state.
defaultOpenboolean | undefinedtrueWhether the profile starts open, when the overview keeps the state itself; open by default.
onOpenChange((open: boolean) => void) | undefined–Called with the new state when the crew opens or closes the profile, so the board can remember it.
headingLevel2 | 3 | 4 | undefined2The level of the heading that names her, for the page's outline; 2 by default.
testIdstring | undefined–Becomes data-testid on the root, and <testId>--toggle on the button that opens and closes the profile.
classNamestring | undefined–Classes added to the root's own.
  • Vessel profile: the drawing the overview opens, and the outline for each hull shape.
  • Collapsible: the region the overview opens and closes.