// Rich Flat illustrated icons for HelperMatch // Style: multi-color flat fill, 64x64 viewBox, sticker-like, no stroke outline. // Each icon is a small scene with face/accessory details where appropriate. // // Naming matches data.js taxonomy ids so just works. // Categories: main / cooking / other / personality / language / cat (group headers) // --- color palette tokens ------------------------------------------------- const C = { coral: '#E8856A', coralDark: '#C0634B', coralDeep: '#8E3F25', coralBg: '#FFE8DE', coralBg2: '#FBD9C3', mint: '#48B8A0', mintDark: '#2E8B74', mintBg: '#D7F0E9', trust: 'oklch(0.46 0.12 275)', trustLight: 'oklch(0.56 0.12 275)', trustBg: '#E5E0F0', gold: '#D4A554', goldLight: '#FFE2A8', goldBg: '#FFF3CD', bronze: '#B8865B', bronzeDark: '#8B6543', bronzeDarker: '#5C4530', skin: '#FFE2C5', skinShade: '#F5C09E', skinPink: '#FFD4C0', ink: '#3D2B1F', white: '#FFFFFF', cream: '#FFF3ED', blush: '#F5A88E', }; // Per-category disc background tokens. // Goal: every chip in a section reads as one family at a glance. const CAT_BG = { main: C.coralBg, // main skills — warm coral cooking: C.coralBg2, // cooking cuisines — deeper coral other: C.trustBg, // other skills — trust violet personality: C.goldBg, // personality — soft gold position: C.mintBg, // job positions — mint family: C.coralBg, // family roles / household — coral market: C.trustBg, // location markets — trust status: C.goldBg, // contract / availability — gold schedule: C.mintBg, // day-off / accommodation — mint jobtype: C.coralBg, // job type — coral gender: C.trustBg, // gender — trust cat: C.cream, // category headers — neutral cream }; // Map every icon id to a {cat, draw} pair. `cat` keys into CAT_BG above. const FLAT_ICONS = { // ============== MAIN SKILLS ============== baby: { cat: 'main', draw: () => (<> ), }, child: { cat: 'main', draw: () => (<> {/* shirt body first */} {/* neck bridge */} {/* head */} {/* balloon */} ), }, teen: { cat: 'main', draw: () => (<> {/* shirt body first */} {/* neck */} {/* head */} {/* headphones */} ), }, elderly: { cat: 'main', draw: () => (<> ), }, pet: { cat: 'main', draw: () => (<> ), }, tutoring: { cat: 'main', draw: () => (<> {/* book base */} {/* page lines */} {/* pencil */} {/* sparkle */} ), }, housekeeping: { cat: 'main', draw: () => (<> {/* roof */} {/* body */} {/* door */} {/* window */} {/* chimney */} ), }, cooking: { cat: 'main', draw: () => (<> ), }, driving: { cat: 'main', draw: () => (<> ), }, marketing: { cat: 'main', draw: () => (<> {/* megaphone */} {/* sound waves */} {/* sparkles */} ), }, groceries: { cat: 'main', draw: () => (<> {/* bag */} {/* handle */} {/* items poking out */} ), }, // ============== COOKING CUISINES ============== // Each is a small, identifiable food sticker. 'middle-east': { cat: 'cooking', draw: () => (<> {/* kebab skewer */} {/* steam */} ), }, asian: { cat: 'cooking', draw: () => (<> {/* rice bowl */} {/* rice grains */} {/* chopsticks */} ), }, chinese: { cat: 'cooking', draw: () => (<> {/* dumpling */} {/* pleats */} {/* steam */} ), }, french: { cat: 'cooking', draw: () => (<> {/* baguette */} {/* slashes */} {/* eiffel hint */} ), }, indian: { cat: 'cooking', draw: () => (<> {/* curry bowl */} {/* naan on side */} {/* spice dots */} {/* cilantro */} ), }, italian: { cat: 'cooking', draw: () => (<> {/* pizza slice */} {/* cheese drips */} {/* pepperoni */} {/* basil */} ), }, japanese: { cat: 'cooking', draw: () => (<> {/* sushi piece */} {/* nori band */} {/* rice texture */} {/* sesame */} ), }, thai: { cat: 'cooking', draw: () => (<> {/* noodle bowl */} {/* noodle swirls */} {/* chili */} {/* lime */} ), }, singaporean: { cat: 'cooking', draw: () => (<> {/* laksa-style bowl */} {/* prawn */} {/* egg slice */} {/* steam */} ), }, vegetarian: { cat: 'cooking', draw: () => (<> {/* salad bowl */} {/* veggies */} {/* leaf top */} ), }, western: { cat: 'cooking', draw: () => (<> {/* burger */} ), }, pork: { cat: 'cooking', draw: () => (<> {/* pig face */} ), }, // ============== OTHER SKILLS ============== baking: { cat: 'other', draw: () => (<> ), }, caregiver: { cat: 'other', draw: () => (<> {/* heart held by hands */} {/* cross inside */} {/* hand cradle */} ), }, 'car-wash': { cat: 'other', draw: () => (<> {/* mini car */} {/* foam bubbles */} {/* water spray */} ), }, computer: { cat: 'other', draw: () => (<> {/* laptop body */} {/* code lines */} {/* cursor */} {/* base */} ), }, 'driving-licence': { cat: 'other', draw: () => (<> {/* card */} {/* photo */} {/* lines */} {/* check seal */} ), }, 'first-aid': { cat: 'other', draw: () => (<> {/* kit body */} {/* handle */} {/* white panel */} {/* cross */} {/* clasp */} ), }, gardening: { cat: 'other', draw: () => (<> {/* plant */} {/* stem */} {/* leaves */} {/* flower */} {/* petals around */} ), }, handyman: { cat: 'other', draw: () => (<> {/* wrench */} {/* shine */} {/* screw */} ), }, housework: { cat: 'other', draw: () => (<> {/* broom handle */} {/* bristles */} {/* sparkles */} ), }, sewing: { cat: 'other', draw: () => (<> {/* spool */} {/* needle */} {/* thread looping */} ), }, swimming: { cat: 'other', draw: () => (<> {/* swimmer head */} {/* goggles */} {/* arm */} {/* waves */} {/* splash */} ), }, // ============== PERSONALITY ============== patient: { cat: 'personality', draw: () => (<> {/* hourglass */} ), }, cheerful: { cat: 'personality', draw: () => (<> {/* sun face */} {/* rays */} {/* face */} ), }, independent: { cat: 'personality', draw: () => (<> {/* paper plane */} {/* trail */} ), }, detail: { cat: 'personality', draw: () => (<> {/* magnifier */} {/* tiny details inside */} {/* handle */} {/* shine */} ), }, warm: { cat: 'personality', draw: () => (<> {/* heart with sparkle */} ), }, calm: { cat: 'personality', draw: () => (<> {/* lotus / leaf */} {/* dewdrop */} {/* ripple */} ), }, reliable: { cat: 'personality', draw: () => (<> {/* shield */} {/* check */} ), }, organized: { cat: 'personality', draw: () => (<> {/* checklist clipboard */} {/* rows */} ), }, gentle: { cat: 'personality', draw: () => (<> {/* feather */} {/* shine */} ), }, energetic: { cat: 'personality', draw: () => (<> {/* lightning bolt */} {/* sparks */} ), }, // ============== GENDER ============== gender_female: { cat: 'gender', draw: () => (<> {/* shoulders */} {/* neck */} {/* hair back — single shape covering head + sides + top */} {/* face */} {/* venus symbol */} ), }, gender_male: { cat: 'gender', draw: () => (<> {/* male head */} {/* short hair */} {/* face */} {/* shoulders */} {/* mars symbol */} ), }, gender_any: { cat: 'gender', draw: () => (<> {/* abstract "any" — infinity-like loop with sparkle, no human */} {/* infinity loop */} {/* dotted asterisk = "any value" */} {/* sparkle */} ), }, // ============== CATEGORY HEADERS ============== cat_language: { cat: 'cat', draw: () => (<> A あ 中 ), }, cat_main: { cat: 'cat', draw: () => (<> {/* stack of skill cards */} ), }, cat_cooking: { cat: 'cat', draw: () => (<> {/* mini chef hat */} {/* fork & knife behind */} ), }, cat_other: { cat: 'cat', draw: () => (<> {/* toolkit grid */} {/* glyphs */} ), }, cat_personality: { cat: 'cat', draw: () => (<> {/* heart bubble */} ), }, // ============== POSITIONS (Position select) ============== pos_helper: { cat: 'position', draw: () => (<> {/* shoulders / shirt — drawn first so head sits on top, no neck gap */} {/* apron over shirt */} {/* neck */} {/* head */} ), }, pos_nanny: { cat: 'position', draw: () => (<> {/* adult body first */} {/* neck */} {/* head */} {/* baby bundle */} ), }, pos_caregiver: { cat: 'position', draw: () => (<> {/* nurse-style cross + heart */} ), }, pos_cook: { cat: 'position', draw: () => (<> {/* chef face under hat */} ), }, pos_driver: { cat: 'position', draw: () => (<> {/* driver in car */} {/* head silhouette inside */} ), }, // ============== FAMILY / HOUSEHOLD ============== adults: { cat: 'family', draw: () => (<> {/* two adults — bodies as single shape, heads on top */} {/* necks */} {/* heads */} ), }, kids: { cat: 'family', draw: () => (<> {/* two kids — one shared body silhouette, heads on top */} {/* necks */} {/* heads */} {/* heart between */} ), }, pets_home: { cat: 'family', draw: () => (<> {/* dog + cat duo */} {/* dog */} {/* cat */} {/* whiskers */} ), }, // ============== MARKETS (location) ============== market_TW: { cat: 'market', draw: () => (<> {/* taipei 101 silhouette */} {/* skyscraper */} {/* city */} ), }, market_HK: { cat: 'market', draw: () => (<> {/* hong kong harbour skyline */} {/* lit windows */} ), }, market_SG: { cat: 'market', draw: () => (<> {/* marina bay sands */} {/* lit windows */} ), }, market_any: { cat: 'market', draw: () => (<> {/* globe */} {/* continents */} {/* pin */} ), }, // ============== AVAILABILITY / CONTRACT STATUS ============== status_available: { cat: 'status', draw: () => (<> {/* green check badge */} ), }, status_finished: { cat: 'status', draw: () => (<> {/* contract page with checkmark */} {/* signed signature */} {/* check seal */} ), }, status_terminated: { cat: 'status', draw: () => (<> {/* page torn */} {/* X badge */} ), }, status_break: { cat: 'status', draw: () => (<> {/* broken chain link */} {/* break flash */} ), }, status_transfer: { cat: 'status', draw: () => (<> {/* arrow swap between countries */} A B ), }, status_new: { cat: 'status', draw: () => (<> {/* sparkle "NEW" badge */} NEW ), }, status_ending: { cat: 'status', draw: () => (<> {/* hourglass running low */} {/* sand falling */} {/* clock urgency */} ), }, // ============== SCHEDULE / ACCOMMODATION ============== livein: { cat: 'schedule', draw: () => (<> {/* bed inside house */} {/* bed */} {/* moon */} ), }, liveout: { cat: 'schedule', draw: () => (<> {/* commute: house → arrow → person */} {/* arrow */} {/* person */} ), }, parttime: { cat: 'schedule', draw: () => (<> {/* clock */} {/* tick marks */} {/* hands → 9 to 12 partial fill */} ), }, dayoff: { cat: 'schedule', draw: () => (<> {/* calendar with circled day */} {/* grid */} {/* circled day */} {/* sparkle */} ), }, flexible: { cat: 'schedule', draw: () => (<> {/* arrows in cycle */} ), }, // ============== JOB TYPE (employer side) ============== jt_livein: { cat: 'jobtype', draw: () => FLAT_ICONS.livein.draw() }, jt_liveout: { cat: 'jobtype', draw: () => FLAT_ICONS.liveout.draw() }, jt_parttime: { cat: 'jobtype', draw: () => FLAT_ICONS.parttime.draw() }, // ============== FIELD-LEVEL HEADER ICONS ============== field_photo: { cat: 'cat', draw: () => (<> {/* shutter dot */} ), }, field_id: { cat: 'cat', draw: () => (<> ), }, field_phone: { cat: 'cat', draw: () => (<> {/* signal/chat bubble */} ), }, field_email: { cat: 'cat', draw: () => (<> {/* @ */} @ ), }, field_money: { cat: 'cat', draw: () => (<> $ {/* coin shine */} ), }, field_calendar: { cat: 'cat', draw: () => (<> ), }, field_pin: { cat: 'cat', draw: () => (<> ), }, field_briefcase: { cat: 'cat', draw: () => (<> ), }, field_user: { cat: 'cat', draw: () => (<> {/* body first */} {/* neck */} {/* head */} ), }, field_bio: { cat: 'cat', draw: () => (<> {/* speech / pencil on paper */} ), }, field_review: { cat: 'cat', draw: () => (<> {/* checklist */} ), }, // ============== ADDITIONAL FIELD ICONS ============== field_whatsapp: { cat: 'cat', draw: () => (<> ), }, field_age: { cat: 'cat', draw: () => (<> {/* birthday cake — clearer "age" semantics */} {/* candles */} ), }, field_gender: { cat: 'cat', draw: () => (<> {/* combined venus + mars symbol */} {/* mars arrow up-right */} {/* venus cross down */} ), }, field_marital: { cat: 'cat', draw: () => (<> {/* two interlocking rings */} {/* tiny gem on top */} ), }, field_religion: { cat: 'cat', draw: () => (<> {/* praying hands / lotus — neutral spiritual symbol */} ), }, field_education: { cat: 'cat', draw: () => (<> {/* graduation cap */} {/* book under cap */} {/* tassel */} ), }, field_position: { cat: 'cat', draw: () => (<> {/* ID badge */} ), }, field_jobtype: { cat: 'cat', draw: () => (<> {/* clock + calendar = job-type / schedule */} ), }, field_contract: { cat: 'cat', draw: () => (<> {/* signed contract */} {/* signature scribble */} {/* seal */} ), }, field_experience: { cat: 'cat', draw: () => (<> {/* bar chart slider */} {/* upward arrow */} ), }, field_accommodation: { cat: 'cat', draw: () => (<> {/* house with bed */} {/* bed */} ), }, field_flexibility: { cat: 'cat', draw: () => (<> {/* calendar with circular arrows = flexible date */} {/* circular arrows */} ), }, }; // ========================================================================= // Public API — drop-in replacements for old SkillIcon / SkillDisc // ========================================================================= const FlatIcon = ({ name, size = 24 }) => { const def = FLAT_ICONS[name]; if (!def) return null; return ( {def.draw()} ); }; // Disc-wrapped icon — used as section header badge or chip prefix. // `cat` is kept for backward compat but ignored — disc bg now comes from the icon's own palette. const FlatIconDisc = ({ name, size = 'md', cat }) => { const def = FLAT_ICONS[name]; const dims = size === 'lg' ? { box: 56, ic: 36, radius: 14 } : size === 'sm' ? { box: 26, ic: 20, radius: 8 } : size === 'xs' ? { box: 22, ic: 16, radius: 7 } : { box: 36, ic: 26, radius: 10 }; const bg = CAT_BG[def?.cat] || C.cream; return ( {def && } ); }; // Backward-compat aliases — old code uses SkillIcon / SkillDisc. // During the flat-icon migration not every id has a flat illustration yet // (e.g. personality traits like good-listener, hardworking, …). Capture the // pre-existing monochrome SkillIcon set BEFORE overriding window so unmapped // names fall through to the old line-art instead of rendering blank. const LegacySkillIcon = window.SkillIcon; const SkillIcon = ({ name, size = 18 }) => { if (FLAT_ICONS[name]) return ; if (LegacySkillIcon) return ; return null; }; const SkillDisc = (props) => ; const HAS_FLAT_ICON = (id) => Object.prototype.hasOwnProperty.call(FLAT_ICONS, id); Object.assign(window, { FlatIcon, FlatIconDisc, FLAT_ICONS, HAS_FLAT_ICON, // back-compat SkillIcon, SkillDisc, });