// illustrations.jsx — FA-energy: bold icon graphics, stacked color blocks,
// stamp/badge shapes. No mascots. Icons as design elements.
// ─────────────────────────────────────────────────────────────
// AwesomeStar — 8-point bold star (FA's brand star). Used for
// streak/award stamps. Filled, with a small dot inside.
// ─────────────────────────────────────────────────────────────
function AwesomeStar({ size = 32, color = 'var(--yellow)', dot = false }) {
return (
);
}
// ─────────────────────────────────────────────────────────────
// BigGlyph — single huge icon on a colored disc. Used as the
// centerpiece illustration (hero positions where the blob used to be).
// kind: 'mic' | 'headphones' | 'wave' | 'sparks' | 'box' | 'play'
// ─────────────────────────────────────────────────────────────
function BigGlyph({ size = 140, kind = 'mic', bg = 'var(--accent)', fg = '#fff', rotate = -6 }) {
const glyphs = {
mic: (
{/* Microphone */}
),
headphones: (
),
wave: (
),
sparks: (
),
box: (
),
play: (
),
bolt: (
),
chat: (
),
};
return (
);
}
// ─────────────────────────────────────────────────────────────
// IconStack — a confident cluster of icon glyphs in different
// colors, scaled & rotated. The FA-style hero illustration.
// ─────────────────────────────────────────────────────────────
function IconStack({ size = 200 }) {
return (
);
}
// ─────────────────────────────────────────────────────────────
// ColorChip — small chunky colored block with an icon. Used as
// the "category" decoration on interest cards / etc.
// ─────────────────────────────────────────────────────────────
function ColorChip({ size = 44, kind = 'wave', bg = 'var(--accent)', fg = '#fff', rotate = 0, radius = 12 }) {
return (
);
}
function BigGlyphInner({ kind = 'mic', fg = '#fff', bg = '#000' }) {
switch (kind) {
case 'mic': return ();
case 'headphones': return ();
case 'wave': return ();
case 'bolt': return ();
case 'chip': return ();
case 'globe': return ();
case 'leaf': return ();
case 'chart': return ();
case 'basket': return ();
case 'sparks': return ();
case 'plus': return ();
default: return null;
}
}
// ─────────────────────────────────────────────────────────────
// AwesomeBadge — a stamp-like badge: large star + label
// Used on Today / streak celebrations.
// ─────────────────────────────────────────────────────────────
function AwesomeBadge({ count = 42 }) {
return (
);
}
// ─────────────────────────────────────────────────────────────
// Sticker — a rotated rectangular "sticker" with rounded corners,
// shadow, and text. FA-style.
// ─────────────────────────────────────────────────────────────
function Sticker({ children, bg = 'var(--magenta)', fg = '#fff', rotate = -4, style = {} }) {
return (
{children}
);
}
Object.assign(window, {
AwesomeStar, BigGlyph, IconStack, ColorChip, BigGlyphInner, AwesomeBadge, Sticker,
});