mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-08 20:42:43 +00:00
Marc-André Bombeck
ab3f21c58c
The timeline's Segmented, the document sources' SegmentedChoice, the medication detail's SegmentedToggle and the icon-only ViewToggle were four implementations of the same control in two looks, two at 36 px on a phone. ui/segmented.tsx replaces all four, plus the hand-rolled range rows above the lab and custom metric charts, the mood dimension window and the inventory quantity mode: a muted track with the chosen segment raised, radio semantics with roving focus by default, pressed-button semantics for view switches and form sheets, icon-only segments, and 44 px per segment on a coarse pointer. A test holds the definition to that one module.
47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import { LayoutGrid, List as ListIcon } from "lucide-react";
|
|
|
|
import { useTranslations } from "@/lib/i18n/context";
|
|
import { Segmented } from "@/components/ui/segmented";
|
|
import type { ModuleListView } from "@/lib/module-list-prefs";
|
|
|
|
/**
|
|
* v1.18.6 — icon-only card/list view toggle shared by the
|
|
* Vorsorge / Illness / Labs settings pages. Thin wrapper over the shared
|
|
* `Segmented` primitive, icon-only (mirrors the medication module's
|
|
* `MedicationViewToggle`, which is the same wrapper switching between a
|
|
* card grid and a compact list rather than cards-vs-table).
|
|
*/
|
|
interface ModuleViewToggleProps {
|
|
view: ModuleListView;
|
|
onChange: (view: ModuleListView) => void;
|
|
}
|
|
|
|
export function ModuleViewToggle({ view, onChange }: ModuleViewToggleProps) {
|
|
const { t } = useTranslations();
|
|
|
|
return (
|
|
<Segmented
|
|
mode="toggle"
|
|
iconOnly
|
|
value={view}
|
|
onChange={onChange}
|
|
label={t("moduleList.viewToggleLabel")}
|
|
optionSlot={(value) => `module-view-${value}`}
|
|
options={[
|
|
{
|
|
value: "cards",
|
|
label: t("moduleList.viewCards"),
|
|
icon: LayoutGrid,
|
|
},
|
|
{
|
|
value: "list",
|
|
label: t("moduleList.viewList"),
|
|
icon: ListIcon,
|
|
},
|
|
]}
|
|
/>
|
|
);
|
|
}
|