Radio cards

import { RadioCards, type RadioCardOption } from "@bosunkit/components/radio-cards";
import { FilePlus, LayoutTemplate, Sparkles } from "lucide-react";
import { useState, type Dispatch, type ReactElement, type SetStateAction } from "react";

export const description: string =
  "How to start a maintenance record: three cards, each with a mark, a name and a line, and exactly one chosen.";

const OPTIONS: readonly RadioCardOption[] = [
  {
    value: "describe",
    label: "Describe it",
    description: "Bosun drafts the record from plain words.",
    icon: <Sparkles size="1.25em" />,
  },
  {
    value: "template",
    label: "From a template",
    description: "Start from a tested schedule for your engine.",
    icon: <LayoutTemplate size="1.25em" />,
  },
  {
    value: "blank",
    label: "Blank record",
    description: "Fill in every field yourself.",
    icon: <FilePlus size="1.25em" />,
  },
];

export default function Showcase(): ReactElement {
  const [value, setValue]: [string, Dispatch<SetStateAction<string>>] = useState<string>("describe");
  return <RadioCards label="How do you want to start?" options={OPTIONS} value={value} onValueChange={setValue} />;
}

import { RadioCards } from "@bosunkit/components/radio-cards";
import type { ReactElement } from "react";

export const description: string =
  "`columns` of 2 for options with longer lines, with one card unavailable: it stays in the group, dimmed, and cannot be chosen.";

export default function TwoColumns(): ReactElement {
  return (
    <RadioCards
      label="Where does the record go?"
      columns={2}
      defaultValue="engine"
      options={[
        { value: "engine", label: "Engine", description: "Service intervals, filters, belts and the cooling circuit." },
        { value: "rigging", label: "Rigging", description: "Standing and running rigging, sails and furling gear." },
        {
          value: "safety",
          label: "Safety equipment",
          description: "Needs a safety officer to sign it off.",
          disabled: true,
        },
      ]}
    />
  );
}