import type { ReactNode } from "react";
/**
* Decorative SVG artwork for the Topic Explorer tiles on the landing page.
* Each topic gets a simple math-themed illustration drawn in white over the
* tile's gradient background.
*/
function Frame({ children }: { children: ReactNode }) {
return (
);
}
const glyphText = {
fill: "white",
fontWeight: 800,
fontFamily: "inherit",
} as const;
const art: Record = {
// Unit 1 — Fractions
"unit-1-fractions/add-subtract": (
<>
+
−
),
"unit-1-fractions/multiply": (
<>
1
2
×
3
4
),
"unit-1-fractions/divide": (
<>
),
"unit-1-fractions/mixed-operations": (
<>
(
+
×
)
),
"unit-1-fractions/fraction-of-quantity": (
<>
{[0, 1, 2, 3].map((col) =>
[0, 1].map((row) => (
)),
)}
),
"unit-1-fractions/whole-from-fractions": (
<>
?
),
// Unit 2 — Decimals
"unit-2-decimals/compare-order": (
<>
0.3
<
0.7
),
"unit-2-decimals/approximate": (
<>
≈
),
"unit-2-decimals/standard-form": (
<>
×10
n
),
// Unit 3 — Decimal Operations
"unit-3-decimal-operations/convert": (
<>
1
2
0.5
),
"unit-3-decimal-operations/add-subtract": (
<>
2.50
1.25
+
),
"unit-3-decimal-operations/multiply-divide": (
<>
×
÷
),
// Unit 4 — Ratio & Proportion
"unit-4-ratio-proportion/define-ratio": (
<>
:
),
"unit-4-ratio-proportion/fractions-and-ratios": (
<>
1
3
=
1:2
),
"unit-4-ratio-proportion/simplify-ratios": (
<>
6:9
2:3
),
"unit-4-ratio-proportion/divide-in-ratio": (
<>
2 : 1 : 1
),
"unit-4-ratio-proportion/word-problems": (
<>
?
),
// Unit 5 — Integers
"unit-5-integers/add-subtract": (
<>
−2
0
+2
),
"unit-5-integers/multiply-divide": (
<>
−×−
+
),
// Unit 6 — Number System
"unit-6-number-system/binary": (
<>
1011
base 2
),
"unit-6-number-system/quaternary": (
<>
1230
base 4
),
};
const fallback: ReactNode = (
<>
);
export function TopicArt({ unitSlug, topicSlug }: { unitSlug: string; topicSlug: string }) {
return {art[`${unitSlug}/${topicSlug}`] ?? fallback};
}