40 lines
1.7 KiB
XML
40 lines
1.7 KiB
XML
import { IconAlertTriangle } from '@tabler/icons-react'
|
|
|
|
/**
|
|
* Co-located safety note for AFFIRMATIVE self-care / natural-remedy guidance.
|
|
*
|
|
* Distinct from {@link SafetyBanner}, which leads a page and frames FDA
|
|
* label-indication *matches*. This note sits at the head of every block that
|
|
* offers affirmative remedy guidance (the natural-remedy sections on the Drug
|
|
* Reference and "When to use what" pages), so the "informational only, not
|
|
* medical advice, seek real care in an emergency" framing appears WITH the
|
|
* guidance itself — not only in a one-time banner the reader may have scrolled
|
|
* past. Same amber alert language as SafetyBanner so the two read as one system.
|
|
*/
|
|
export default function RemedySafetyNote() {
|
|
return (
|
|
<div
|
|
role="alert"
|
|
className="flex items-start gap-2.5 rounded-lg border-2 border-amber-400 bg-amber-50 px-3 py-2.5 text-xs text-amber-900"
|
|
>
|
|
<IconAlertTriangle
|
|
size={18}
|
|
className="mt-0.5 flex-shrink-0 text-amber-600"
|
|
aria-hidden="true"
|
|
/>
|
|
<div className="space-y-1">
|
|
<p className="font-bold">Informational only — not medical advice.</p>
|
|
<p className="text-amber-800">
|
|
These remedies have limited or mixed evidence, are not FDA-evaluated, and are not a
|
|
substitute for professional care. Check with a clinician before using any of them, and
|
|
before combining one with a medication you already take.
|
|
</p>
|
|
<p className="text-amber-800">
|
|
In an emergency, or if symptoms are severe or worsening,{' '}
|
|
<strong>seek real medical care — call emergency services</strong>.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|