// post-thumbs.jsx — themed SVG illustrations for the Notable X Posts grid.
// Each thumb is 320×180 (16:9), composed from geometric primitives + small
// iconographic motifs that hint at the post's subject. Kept stylized rather
// than literal so they read as a cohesive set across the grid.
function PostThumb({ theme }) {
const themes = {
"sui-miami": ,
"ledger-love": ,
"sui-fate": ,
"walrus-w": ,
"ledger-dnd": ,
"sui-vaults": ,
};
return (
);
}
// ─────────────────────────────────────────────────────────────
// Shared primitives
// ─────────────────────────────────────────────────────────────
function GridBackdrop({ tint = "#5be3ff", opacity = 0.06 }) {
return (
<>
);
}
function CornerTicks({ color = "#5be3ff", op = 0.55 }) {
// HUD-style L-shaped tick marks in each corner
const t = 10, m = 8;
return (
{/* TL */}
{/* TR */}
{/* BL */}
{/* BR */}
);
}
function ScanLines() {
return (
{Array.from({ length: 60 }).map((_, i) =>
)}
);
}
function Caption({ text, color = "#5be3ff" }) {
return (
{text}
);
}
// ─────────────────────────────────────────────────────────────
// 1. Sui Miami Event — sunset, palm silhouettes, ocean horizon
// ─────────────────────────────────────────────────────────────
function SuiMiami() {
return (
<>
{/* Sun */}
{/* Sun stripes */}
{/* Ocean */}
{/* Reflection lines */}
{/* Palm trees */}
);
}
function PalmTree({ x, y, flip }) {
const s = flip ? -1 : 1;
return (
{/* Trunk */}
{/* Fronds */}
);
}
// ─────────────────────────────────────────────────────────────
// 2. Ledger — True Love Story
// ─────────────────────────────────────────────────────────────
function LedgerLove() {
return (
<>
{/* Heart */}
{/* Inner gleam */}
{/* Lock body inside */}
{/* Lock shackle */}
{/* Keyhole */}
{/* Tick marks */}
{/* Connector lines around heart */}
);
}
// ─────────────────────────────────────────────────────────────
// 3. Fate of SUI — constellation, mystical
// ─────────────────────────────────────────────────────────────
function SuiFate() {
const stars = [
[60, 40], [90, 70], [40, 95], [70, 120],
[240, 50], [270, 90], [220, 115], [260, 140],
[160, 30], [180, 60], [140, 110], [160, 140]
];
return (
<>
{/* Tiny background stars */}
{Array.from({ length: 50 }).map((_, i) =>
)}
{/* Constellation lines */}
{/* Big stars */}
{stars.map(([x, y], i) => (
))}
{/* SUI orb at center */}
);
}
// ─────────────────────────────────────────────────────────────
// 4. Walrus — basketball + data motif (court W)
// ─────────────────────────────────────────────────────────────
function WalrusW() {
return (
<>
{/* Basketball court outline */}
{/* Key boxes */}
{/* Big W made of data nodes */}
{/* Nodes at vertices */}
{[[-38,-22],[-22,22],[0,-4],[22,22],[38,-22]].map(([x,y], i) =>
)}
{/* Basketball icon */}
);
}
// ─────────────────────────────────────────────────────────────
// 5. Ledger — Dungeons & DeFi (d20 + shield)
// ─────────────────────────────────────────────────────────────
function LedgerDnd() {
return (
<>
{/* D20 die — hexagonal silhouette with internal triangulation */}
{/* Internal triangle facets */}
{/* Number "20" */}
20
{/* Shield with lock */}
{/* Lock body */}
{/* Shackle */}
{/* Keyhole */}
);
}
// ─────────────────────────────────────────────────────────────
// 6. Sui Vaults — vault door / dial wheel
// ─────────────────────────────────────────────────────────────
function SuiVaults() {
return (
<>
{/* Vault door */}
{/* Dial spokes */}
{/* Tick marks on outer ring */}
{Array.from({ length: 12 }).map((_, i) => {
const a = (i / 12) * Math.PI * 2;
const x1 = Math.cos(a) * 54, y1 = Math.sin(a) * 54;
const x2 = Math.cos(a) * 60, y2 = Math.sin(a) * 60;
return ;
})}
{/* Side bolts */}
{/* Connecting lines */}
);
}
function Fallback() {
return (
<>
);
}
Object.assign(window, { PostThumb });