// variants.jsx — the ten Color Walk layout variants. // // Every renderer takes the same props so they're swappable: // { photo, color, font, caption, split, size } // - photo: one of PHOTOS (we read photo.url, .palette, .place, .time) // - color: hex string used for the color block // - font: one of FONTS // - caption: string to render // - split: 0..1, share of canvas given to the color region // - size: { w, h } — pixel dimensions of the card // // All cards render at exact `size`. The design canvas + iOS frame both // pass small sizes (240×320) for thumbnails, larger for hero previews. const VariantBase = ({ children, size, bg = '#FAFAF7' }) => (
{children}
); // helper — derives a readable text color (cream or ink) given a hex bg function textOn(hex) { if (!hex) return '#1A1A1A'; const h = hex.replace('#', ''); const r = parseInt(h.slice(0, 2), 16) / 255; const g = parseInt(h.slice(2, 4), 16) / 255; const b = parseInt(h.slice(4, 6), 16) / 255; const lum = 0.299 * r + 0.587 * g + 0.114 * b; return lum > 0.55 ? '#1A1A1A' : '#F0EEE9'; } // Standard caption block — used by most layouts. function Caption({ font, color, text, align = 'center', size = 13, place, time, dim }) { const fg = textOn(color); return (
{text}
{(place || time) && (
{place}{place && time ? ' · ' : ''}{time}
)}
); } // 1. CLASSIC — color top, photo bottom function VariantClassic({ photo, color, font, caption, split = 0.5, size }) { return (
); } // 2. GRADIENT — color fades into photo function VariantGradient({ photo, color, font, caption, split = 0.5, size }) { return (
); } // 3. PALETTE — color band + 6-stripe palette + photo function VariantPalette({ photo, color, font, caption, split = 0.46, size }) { const stripH = size.h * 0.04; return (
{photo.palette.map((c, i) => (
))}
); } // 4. POLAROID — tilted card with caption footer function VariantPolaroid({ photo, color, font, caption, size }) { const cardW = size.w * 0.82; const cardH = size.h * 0.86; return (
); } // 5. MAGAZINE — vertical typography on left, photo right function VariantMagazine({ photo, color, font, caption, size }) { const fg = textOn(color); return (
{caption}
{photo.place}
); } // 6. WINDOW — round porthole function VariantWindow({ photo, color, font, caption, size }) { const dia = Math.min(size.w * 0.78, size.h * 0.62); return (
); } // 7. SPLIT V — color left (vertical text), photo right function VariantSplitV({ photo, color, font, caption, split = 0.42, size }) { const fg = textOn(color); return (
{caption}
); } // 8. TAPE — washi-taped photo on color background function VariantTape({ photo, color, font, caption, size }) { const photoW = size.w * 0.78; const photoH = size.h * 0.55; return (
{/* tape pieces */}
{photo.place}
); } // 9. COLOR STORY — palette strip on right of photo + caption header function VariantColorStory({ photo, color, font, caption, size }) { return (
{photo.palette.map((c, i) => (
))}
); } // 10. FILM — 35mm film strip with sprockets function VariantFilm({ photo, color, font, caption, size }) { const perfRow = size.h * 0.04; const padY = size.h * 0.022; const gap = size.h * 0.008; const available = size.h - 2 * padY - 2 * perfRow - gap; const colorH = available * (1 / 2.4); const imageH = available * (1.4 / 2.4); const sideInset = size.w * 0.04; const sprockets = (y) => { const items = []; const count = 9; for (let i = 0; i < count; i++) { items.push(
); } return (
{items}
); }; return ( {sprockets(padY)}
{sprockets(size.h - padY - perfRow)} ); } const VARIANTS = { classic: VariantClassic, gradient: VariantGradient, palette: VariantPalette, polaroid: VariantPolaroid, magazine: VariantMagazine, window: VariantWindow, splitV: VariantSplitV, tape: VariantTape, colorstory: VariantColorStory, film: VariantFilm, }; function CWCard({ variant, ...props }) { const C = VARIANTS[variant] || VariantClassic; return ; } Object.assign(window, { VARIANTS, CWCard, textOn });