File size: 4,531 Bytes
a0c836f | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 | import { useEffect, useState } from "react"
import { X } from "lucide-react"
import { getCatalog } from "../api"
import { useI18n } from "../i18n/I18nContext"
import { T } from "../theme"
const EXAMPLES = [
"What is aspirin?",
"Side effects of metformin?",
"Can I take ibuprofen with warfarin?",
"How do I take atorvastatin?",
"I forgot my metformin dose, what do I do?",
]
export default function HelpGuide({ onClose }) {
const { t } = useI18n()
const [drugs, setDrugs] = useState([])
useEffect(() => { getCatalog().then(setDrugs).catch(() => {}) }, [])
const sections = [
["help_chat_title", "help_chat_body"],
["help_schedule_title", "help_schedule_body"],
["help_today_title", "help_today_body"],
["help_points_title", "help_points_body"],
["help_badges_title", "help_badges_body"],
["help_meds_lib_title", "help_meds_lib_body"],
]
return (
<div style={overlay} onClick={onClose}>
<div style={panel} className="dm-slide-up" onClick={(e) => e.stopPropagation()}>
{/* header */}
<div style={header}>
<div>
<div style={{ fontSize: 18, fontWeight: 800 }}>💊 {t("help_title")}</div>
<div style={{ fontSize: 12.5, color: "rgba(255,255,255,.85)", marginTop: 3 }}>{t("help_intro")}</div>
</div>
<button onClick={onClose} style={closeBtn}><X size={18} /></button>
</div>
<div style={body}>
{/* capability cards */}
<div style={grid}>
{sections.map(([title, desc]) => (
<div key={title} style={featCard}>
<div style={{ fontSize: 14, fontWeight: 700, color: T.text }}>{t(title)}</div>
<div style={{ fontSize: 12.5, color: T.muted, marginTop: 5, lineHeight: 1.55 }}>{t(desc)}</div>
</div>
))}
</div>
{/* examples */}
<div style={{ marginTop: 22 }}>
<div style={blockTitle}>{t("help_examples_title")}</div>
<div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 10 }}>
{EXAMPLES.map((ex) => (
<span key={ex} style={exampleChip}>{ex}</span>
))}
</div>
</div>
{/* medicines in DB */}
<div style={{ marginTop: 22 }}>
<div style={blockTitle}>{t("help_meds_title")}</div>
<div style={{ fontSize: 12.5, color: T.muted, marginTop: 4 }}>{t("help_meds_body")}</div>
<div style={{ display: "flex", flexWrap: "wrap", gap: 7, marginTop: 10 }}>
{drugs.map((d) => (
<span key={d.drug_name} style={medChip} title={d.drug_class}>💊 {d.drug_name}</span>
))}
</div>
</div>
<button onClick={onClose} style={gotItBtn}>{t("got_it")}</button>
</div>
</div>
</div>
)
}
const overlay = { position: "fixed", inset: 0, background: "rgba(15,23,42,.5)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 2500, backdropFilter: "blur(3px)", padding: 16 }
const panel = { width: "100%", maxWidth: 620, maxHeight: "88vh", background: "#fff", borderRadius: 22, overflow: "hidden", display: "flex", flexDirection: "column", boxShadow: T.shadowLg }
const header = { background: T.gradient, color: "#fff", padding: "22px 24px", display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 12 }
const closeBtn = { background: "rgba(255,255,255,.2)", border: "none", color: "#fff", width: 32, height: 32, borderRadius: 10, cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }
const body = { padding: 24, overflowY: "auto" }
const grid = { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: 12 }
const featCard = { background: T.surfaceAlt, border: `1px solid ${T.border}`, borderRadius: 14, padding: 14 }
const blockTitle = { fontSize: 14, fontWeight: 700, color: T.text }
const exampleChip = { fontSize: 12.5, color: T.green, background: "#f0fdf4", border: "1px solid #bbf7d0", borderRadius: 999, padding: "7px 13px", fontWeight: 500 }
const medChip = { fontSize: 12, color: T.text, background: "#fff", border: `1px solid ${T.border}`, borderRadius: 999, padding: "6px 11px", fontWeight: 500 }
const gotItBtn = { marginTop: 24, width: "100%", padding: "13px", borderRadius: 12, border: "none", background: T.gradient, color: "#fff", fontSize: 15, fontWeight: 700, cursor: "pointer", boxShadow: T.shadowGreen }
|