Vessel profile

import { Badge } from "@bosunkit/components/badge";
import { Card } from "@bosunkit/components/card";
import { DescriptionList, type DescriptionListItem } from "@bosunkit/components/description-list";
import { VesselProfile, type VesselProfileDimensions } from "@bosunkit/components/vessel-profile";
import { Anchor } from "lucide-react";
import type { ReactElement } from "react";

export const description: string =
  "The vessel page of SV Althea, a Hanse 460: her profile drawn across the page with her lengths, draft, beam, air " +
  "draft and displacement on it, and under it her identity beside the stores the drawing cannot show.";

/** What a side view can carry: the lengths and the draft as dimension lines, the rest in the strip under the hull. */
const DIMENSIONS: VesselProfileDimensions = {
  lengthOverall: "14.60 m",
  waterlineLength: "13.05 m",
  draft: "2.25 m",
  beam: "4.79 m",
  airDraft: "21.90 m",
  displacement: "12,560 kg",
};

/** Her fixed figures no drawing shows, as terms and values with no source: they are not live readings. */
const STORES: readonly DescriptionListItem[] = [
  { term: "Fuel", value: "300 L" },
  { term: "Water", value: "500 L" },
  { term: "House bank", value: "360 Ah" },
  { term: "Chain", value: "80 m" },
];

/** The identity card's names and numbers. */
const IDENTITY: readonly DescriptionListItem[] = [
  { term: "Model", value: "Hanse 460" },
  { term: "MMSI", value: "224 123 456" },
  { term: "Call sign", value: "EA1234" },
  { term: "Engine", value: "Yanmar 4JH57" },
];

export default function Showcase(): ReactElement {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-lg)", width: "100%" }}>
      <VesselProfile width={900} dimensions={DIMENSIONS} />
      <div style={{ display: "flex", gap: "var(--space-lg)", flexWrap: "wrap", alignItems: "stretch" }}>
        <Card
          title="SV Althea"
          icon={<Anchor />}
          style={{ flex: "1 1 240px" }}
          footer={
            <>
              <Badge variant="green">At anchor</Badge>
              <Badge variant="dim">Valencia</Badge>
            </>
          }
        >
          <DescriptionList items={IDENTITY} layout="columns" />
        </Card>
        <Card title="Stores and ground tackle" style={{ flex: "2 1 280px" }}>
          <DescriptionList items={STORES} layout="columns" />
        </Card>
      </div>
    </div>
  );
}

import { VesselProfile } from "@bosunkit/components/vessel-profile";
import type { ReactElement } from "react";

export const description: string = "The sailing yacht outline at its default size, 800 by 200 pixels, shrinking to fit a narrow screen.";

export default function Profile(): ReactElement {
  return <VesselProfile />;
}

import { VesselProfile } from "@bosunkit/components/vessel-profile";
import type { ReactElement } from "react";

export const description: string =
  "The profile dimensioned as a naval architect's drawing: length overall and at the waterline under the keel, " +
  "draft beside it, freeboard at the bow, and the beam, air draft and displacement in the strip under it.";

export default function Dimensioned(): ReactElement {
  return (
    <VesselProfile
      dimensions={{
        lengthOverall: "13.95 m",
        waterlineLength: "12.40 m",
        draft: "2.25 m",
        freeboard: "1.20 m",
        beam: "4.42 m",
        airDraft: "21.90 m",
        displacement: "12,400 kg",
      }}
    />
  );
}

import {
  CRUISING_MONOHULL,
  CRUISING_TRIMARAN,
  MOTOR_YACHT,
  OUTBOARD_BOAT,
  SAILING_CATAMARAN,
  VesselProfile,
  type VesselOutline,
} from "@bosunkit/components/vessel-profile";
import type { ReactElement } from "react";

export const description: string =
  "One vessel of each hull shape, drawn from her shape's outline stretched to her particulars and to one scale: a " +
  "cruising monohull, a sailing catamaran, an outboard boat, a motor yacht and a cruising trimaran.";

interface Shaped {
  /** The vessel, as the catalog names her. */
  readonly name: string;
  /** Her shape's outline. */
  readonly outline: VesselOutline;
  /** Length overall, meters. */
  readonly loa: number;
  /** Length at the waterline, meters, where the catalog has it. */
  readonly lwl?: number;
  /** Draft, meters. */
  readonly draft: number;
  /** Freeboard at the bow, meters, where the catalog has it. */
  readonly freeboard?: number;
}

/** Particulars from the vessel catalog. */
const VESSELS: readonly Shaped[] = [
  { name: "Bavaria C42", outline: CRUISING_MONOHULL, loa: 12.4, lwl: 11.49, draft: 2.1 },
  { name: "Lagoon 46", outline: SAILING_CATAMARAN, loa: 13.99, lwl: 13.72, draft: 1.37 },
  { name: "Pursuit S 328", outline: OUTBOARD_BOAT, loa: 10.52, draft: 0.91 },
  { name: "Ferretti Yachts 500", outline: MOTOR_YACHT, loa: 15.33, draft: 1.23 },
  { name: "Neel 47", outline: CRUISING_TRIMARAN, loa: 14.2, draft: 1.6 },
];

export default function Shapes(): ReactElement {
  return (
    <div style={{ display: "grid", gap: "var(--space-md)" }}>
      {VESSELS.map(
        ({ name, outline, loa, lwl, draft, freeboard }: Shaped): ReactElement => (
          <figure key={name} style={{ margin: 0 }}>
            <VesselProfile
              outline={outline}
              proportions={{ lengthOverall: loa, waterlineLength: lwl, draft, freeboard }}
              frameLength={15.33}
              dimensions={{
                lengthOverall: `${loa.toFixed(2)} m`,
                waterlineLength: lwl === undefined ? undefined : `${lwl.toFixed(2)} m`,
                draft: `${draft.toFixed(2)} m`,
              }}
            />
            <figcaption style={{ marginTop: "var(--space-xs)", color: "var(--text-dim)", fontSize: "0.85em" }}>
              {name}, drawn from the {outline.name.toLowerCase()} outline
            </figcaption>
          </figure>
        ),
      )}
    </div>
  );
}