Description list

import { Badge } from "@bosunkit/components/badge";
import { DescriptionList, type DescriptionListItem } from "@bosunkit/components/description-list";
import { Anchor, Flag, Radio, Ruler, Ship, ShieldCheck } from "lucide-react";
import type { ReactElement } from "react";

export const description: string =
  "SV Althea's particulars in aligned columns: an icon before each term, a badge for her state, a hint under the " +
  "MMSI, and the insurer's long policy name cut to one line with the whole name on hover or focus.";

const PARTICULARS: readonly DescriptionListItem[] = [
  { term: "Name", value: "Althea", icon: <Ship /> },
  { term: "State", value: <Badge variant="green">Underway</Badge>, icon: <Anchor /> },
  {
    term: "MMSI",
    value: "244 630 123",
    icon: <Radio />,
    hint: "From the ship station license; call sign PBAQ7.",
  },
  { term: "Flag", value: "Netherlands, home port Den Helder", icon: <Flag /> },
  { term: "Length overall", value: "14.2 m; beam 4.3 m; draft 2.1 m", icon: <Ruler /> },
  {
    term: "Insurance",
    value: "Pantaenius Yacht Insurance, policy 2026-NL-0441872, cover for European waters to 30 June 2027",
    icon: <ShieldCheck />,
  },
];

export default function Showcase(): ReactElement {
  return (
    <div style={{ width: "100%", maxWidth: 480 }}>
      <DescriptionList items={PARTICULARS} truncate />
    </div>
  );
}

import { DescriptionList, type DescriptionListItem } from "@bosunkit/components/description-list";
import type { ReactElement } from "react";

export const description: string = "The terms in a column as wide as the longest, every value starting at one edge.";

const LEG: readonly DescriptionListItem[] = [
  { term: "From", value: "Brest" },
  { term: "To", value: "A Coruña" },
  { term: "Distance", value: "412 NM" },
  { term: "Departure", value: "06:00 UTC, 14 October" },
];

export default function Columns(): ReactElement {
  return <DescriptionList items={LEG} />;
}

import { DescriptionList, type DescriptionListItem } from "@bosunkit/components/description-list";
import type { ReactElement } from "react";

export const description: string = "Each term over its value, for a narrow panel or values that run long.";

const SERVICE: readonly DescriptionListItem[] = [
  { term: "Last service", value: "Palma, 2 March 2026, 1 214 engine hours" },
  { term: "Next service", value: "At 1 714 engine hours, or by 2 March 2027" },
  { term: "Workshop", value: "Varadero Palma, Moll Vell" },
];

export default function Stacked(): ReactElement {
  return (
    <div style={{ width: "100%", maxWidth: 320 }}>
      <DescriptionList items={SERVICE} layout="stacked" />
    </div>
  );
}

import { DescriptionList, type DescriptionListItem } from "@bosunkit/components/description-list";
import type { ReactElement } from "react";

export const description: string = "The pairs along a row, wrapping where it ends, for a summary under a title.";

const SUMMARY: readonly DescriptionListItem[] = [
  { term: "Crew", value: "4" },
  { term: "Watch", value: "Marta, to 16:00 UTC" },
  { term: "Logged", value: "98 NM" },
  { term: "Engine", value: "1 412 hr" },
];

export default function Inline(): ReactElement {
  return <DescriptionList items={SUMMARY} layout="inline" />;
}

import { DescriptionList, type DescriptionListItem } from "@bosunkit/components/description-list";
import { Droplets, Fuel } from "lucide-react";
import type { ReactElement } from "react";

export const description: string =
  "An icon before each term, hidden from assistive technology, and a hint under a value saying where it comes from.";

const TANKS: readonly DescriptionListItem[] = [
  { term: "Diesel", value: "212 L of 400 L", icon: <Fuel />, hint: "Sounded by hand at 08:00 UTC." },
  { term: "Water", value: "365 L of 600 L", icon: <Droplets />, hint: "Tanks 2 and 3, from the tank senders." },
];

export default function IconsAndHints(): ReactElement {
  return <DescriptionList items={TANKS} />;
}

import { Badge } from "@bosunkit/components/badge";
import { DescriptionList, type DescriptionListItem } from "@bosunkit/components/description-list";
import type { ReactElement } from "react";

export const description: string = "Values that are nodes: a badge for a state and a link to a record.";

const DOCUMENTS: readonly DescriptionListItem[] = [
  { term: "Registration", value: <Badge variant="green">Valid until March 2029</Badge> },
  { term: "Liferaft", value: <Badge variant="amber">Service overdue by 12 days</Badge> },
  { term: "Survey", value: <a href="#survey-2025">Survey report, May 2025</a> },
];

export default function NodeValues(): ReactElement {
  return <DescriptionList items={DOCUMENTS} />;
}

import { DescriptionList, type DescriptionListItem } from "@bosunkit/components/description-list";
import type { ReactElement } from "react";

export const description: string =
  "Long text values cut to one line; a cut value takes focus and shows its whole text in a tooltip.";

const ANCHORAGE: readonly DescriptionListItem[] = [
  { term: "Anchorage", value: "Baie de Morgat, off the lifeboat slip, 9 m of water over sand and mud" },
  { term: "Holding", value: "Good" },
  { term: "Shelter", value: "From west through north to east; open to the south and a swell round Cap de la Chèvre" },
];

export default function Truncate(): ReactElement {
  return (
    <div style={{ width: "100%", maxWidth: 360 }}>
      <DescriptionList items={ANCHORAGE} truncate />
    </div>
  );
}