mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-14 14:40:52 +00:00
Marc-André Bombeck
d65ed8b0b6
Remove the inline trash icon from the lab list and tile rows; delete now lives only on the value detail view, beside Edit, so a stray tap on the overview cannot remove a biomarker. Make the reference-range badge beside each analyte heading quieter on the overview (smaller text, tighter padding, no icon) so it reads as a subtle qualifier instead of competing with the heading.
69 lines
2.3 KiB
TypeScript
69 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import { ArrowDown, ArrowUp, Minus } from "lucide-react";
|
|
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { useTranslations } from "@/lib/i18n/context";
|
|
import type { ReferenceRangeStatus } from "@/lib/validations/labs";
|
|
|
|
/**
|
|
* v1.17.1 — reference-range badge.
|
|
*
|
|
* Renders the server-computed `rangeStatus` as a calm, informative marker.
|
|
* The project's no-alarming-colour ethos is a hard rule here: an
|
|
* out-of-range value is NOT painted red. It reads as a neutral `secondary`
|
|
* badge with a quiet direction arrow (↓ below / ↑ above), exactly the same
|
|
* weight as the in-range and unknown states. The number leaving the
|
|
* reference window is information a clinician scans — not an alarm to the
|
|
* user, who may be perfectly aware of (and managing) the value.
|
|
*
|
|
* `unknown` (the lab reported no usable bounds) renders nothing — there is
|
|
* no verdict to show, and an empty badge would be noise.
|
|
*/
|
|
export function ReferenceRangeBadge({
|
|
status,
|
|
compact = false,
|
|
}: {
|
|
status: ReferenceRangeStatus;
|
|
/**
|
|
* v1.18.10 (#4) — a quieter, smaller treatment for the labs overview, where
|
|
* the badge sits beside the analyte heading and must not compete with it.
|
|
* The hero/detail view keeps the default (un-compact) size.
|
|
*/
|
|
compact?: boolean;
|
|
}) {
|
|
const { t } = useTranslations();
|
|
|
|
if (status === "unknown") return null;
|
|
|
|
// Compact: drop the icon, shrink the text and padding so the badge reads as a
|
|
// subtle qualifier of the heading rather than a second focal point.
|
|
const compactClass = compact
|
|
? "h-auto gap-0.5 px-1.5 py-0 text-[0.625rem] font-normal [&>svg]:size-2.5"
|
|
: "";
|
|
|
|
if (status === "in-range") {
|
|
return (
|
|
<Badge
|
|
variant="outline"
|
|
className={`text-muted-foreground ${compactClass}`.trim()}
|
|
>
|
|
{compact ? null : <Minus aria-hidden />}
|
|
{t("labs.range.inRange")}
|
|
</Badge>
|
|
);
|
|
}
|
|
|
|
// Below / above — both neutral `secondary`, distinguished only by the
|
|
// arrow direction and label. No red, no amber.
|
|
const Icon = status === "below" ? ArrowDown : ArrowUp;
|
|
const label =
|
|
status === "below" ? t("labs.range.below") : t("labs.range.above");
|
|
return (
|
|
<Badge variant="secondary" className={compactClass || undefined}>
|
|
<Icon aria-hidden />
|
|
{label}
|
|
</Badge>
|
|
);
|
|
}
|