(() => {
+ const out: (Card & { rank: number })[] = [];
+ for (let i = 0; i < selected.length; i += 1) {
+ for (let j = i + 1; j < selected.length; j += 1) {
+ const a = selected[i];
+ const b = selected[j];
+ const { risk, note } = getCombo(a, b);
+ out.push({
+ key: `${a}|${b}`,
+ title: `${a} + ${b}`,
+ risk,
+ note,
+ rank: RANK[risk],
+ });
+ }
+ }
+ if (sortBySeverity) out.sort((x, y) => y.rank - x.rank);
+ return out;
+ }, [selected, sortBySeverity]);
+
+ if (selected.length < 2) {
+ const tone = accentTone(accent);
+ const emptyText =
+ selected.length === 0
+ ? "Select two or more substances above to see how they interact."
+ : `Select at least one more substance to compare with ${selected[0]}.`;
+ return (
+
+
+
+
+
{emptyText}
+
+ {cards.map((c, i) => (
+
+ ))}
+
+ );
+}
+
+export default ComboResults;
diff --git a/src/components/comboChecker/Legend.tsx b/src/components/comboChecker/Legend.tsx
new file mode 100644
index 0000000..035adbf
--- /dev/null
+++ b/src/components/comboChecker/Legend.tsx
@@ -0,0 +1,29 @@
+import { LEGEND_ORDER, RISK } from "./comboData";
+import styles from "./comboChecker.module.css";
+
+function Legend() {
+ return (
+
+ {LEGEND_ORDER.map((key) => {
+ const r = RISK[key];
+ return (
+
+
+ {r.glyph}
+
+ {r.label}
+
+ );
+ })}
+
+ );
+}
+
+export default Legend;
diff --git a/src/components/comboChecker/SubstanceSelector.tsx b/src/components/comboChecker/SubstanceSelector.tsx
new file mode 100644
index 0000000..6f59b7e
--- /dev/null
+++ b/src/components/comboChecker/SubstanceSelector.tsx
@@ -0,0 +1,124 @@
+import styles from "./comboChecker.module.css";
+
+interface SubstanceSelectorProps {
+ substances: string[];
+ selected: string[];
+ query: string;
+ onToggle: (name: string) => void;
+ onQuery: (value: string) => void;
+ onClearAll: () => void;
+}
+
+function SubstanceSelector({
+ substances,
+ selected,
+ query,
+ onToggle,
+ onQuery,
+ onClearAll,
+}: SubstanceSelectorProps) {
+ const q = query.trim().toLowerCase();
+
+ return (
+ <>
+
+
+
+
onQuery(e.target.value)}
+ placeholder="Search substances"
+ aria-label="Search substances"
+ />
+
+ {selected.length > 0 && (
+
+ )}
+
+ Select substances
+
+
+ {substances.map((name) => {
+ const sel = selected.includes(name);
+ const match = !q || name.toLowerCase().includes(q);
+ if (!match && !sel) return null;
+ return (
+
+ );
+ })}
+