\n \n\n\n",[],[205,207],"3215f3f8-3e8b-11f1-a57d-42b51c65c3df","BreedModal.tsx","3215f6be-3e8b-11f1-a57d-42b51c65c3df","cdd7ed5c-a2f8-467a-8c4f-54c4f3873da2",["D",1776890298677],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\n\ninterface BreedDetail {\n id: string;\n name: string;\n emoji: string;\n origin: string;\n lifespan: string;\n weight: string;\n temperament: string[];\n energy: number;\n affection: number;\n grooming: number;\n intelligence: number;\n description: string;\n funFact: string;\n coat: string;\n hypoallergenic: boolean;\n color: string;\n}\n\nfunction StatBar({ label, value }: { label: string; value: number }) {\n return (\n

\n {label}\n {value}/5\n

\n \n

\n );\n}\n\nexport function BreedModal({ id, onClose }: { id: string; onClose: () => void }) {\n const [breed, setBreed] = useState(null);\n\n useEffect(() => {\n fetch(`/api/breeds/${id}`)\n .then((r) => r.json())\n .then(setBreed);\n }, [id]);\n\n useEffect(() => {\n const esc = (e: KeyboardEvent) => e.key === \"Escape\" && onClose();\n document.addEventListener(\"keydown\", esc);\n document.body.style.overflow = \"hidden\";\n return () => {\n document.removeEventListener(\"keydown\", esc);\n document.body.style.overflow = \"\";\n };\n }, [onClose]);\n\n return (\n \n e.stopPropagation()}\n >\n {!breed ? (\n

\n ) : (\n <>\n {/* Header */}\n \n \n ×\n \n

{breed.emoji}

{breed.name}

\n 📍 {breed.origin}\n ·\n ⏳ {breed.lifespan}\n ·\n ⚖️ {breed.weight}\n

\n \n\n {/* Body */}\n

\n {/* Description */}\n

{breed.description}

\n\n {/* Tags */}\n

\n Personality\n

\n {breed.temperament.map((t) => (\n \n {t}\n \n ))}\n

\n\n {/* Stats */}\n

\n Traits\n

\n \n \n \n \n

\n\n {/* Specs */}\n

\n Coat\n

{breed.coat}

\n Hypoallergenic\n

\n {breed.hypoallergenic ? \"Yes ✓\" : \"No\"}\n

\n\n {/* Fun fact */}\n

\n 💡 Fun fact\n

{breed.funFact}

\n \n )}\n \n \n );\n}\n",[],[205,222,215],"components","27b8958c-3e8b-11f1-a57d-42b51c65c3df","BreedCard.tsx","27b8969a-3e8b-11f1-a57d-42b51c65c3df",7,["D",1776890281290],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\ninterface BreedSummary {\n id: string;\n name: string;\n emoji: string;\n origin: string;\n coat: string;\n temperament: string[];\n hypoallergenic: boolean;\n color: string;\n}\n\nexport function BreedCard({\n breed,\n onClick,\n}: {\n breed: BreedSummary;\n onClick: () => void;\n}) {\n return (\n \n \n

{breed.emoji}

{breed.name}

{breed.origin}

\n {breed.temperament.slice(0, 3).map((t) => (\n \n {t}\n \n ))}\n

\n \n \n {breed.coat} coat\n \n {breed.hypoallergenic && (\n ✓ Hypoallergenic\n )}\n

\n Learn more →\n

\n \n );\n}\n",[],[205,222,224],"235fe5bc-3e8b-11f1-b0d3-42b51c65c3df","App.tsx","235fe684-3e8b-11f1-b0d3-42b51c65c3df",6,["D",1776890273995],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useMemo, useState } from \"https://esm.sh/react@18.2.0\";\nimport { BreedCard } from \"./BreedCard.tsx\";\nimport { BreedModal } from \"./BreedModal.tsx\";\n\ninterface BreedSummary {\n id: string;\n name: string;\n emoji: string;\n origin: string;\n coat: string;\n temperament: string[];\n hypoallergenic: boolean;\n color: string;\n}\n\nconst COATS = [\"All\", \"Short\", \"Medium\", \"Long\", \"Hairless\"];\n\nexport function App() {\n const [breeds, setBreeds] = useState([]);\n const [loading, setLoading] = useState(true);\n const [search, setSearch] = useState(\"\");\n const [coatFilter, setCoatFilter] = useState(\"All\");\n const [hypoOnly, setHypoOnly] = useState(false);\n const [selectedId, setSelectedId] = useState(null);\n\n useEffect(() => {\n fetch(\"/api/breeds\")\n .then((r) => r.json())\n .then((data) => {\n setBreeds(data);\n setLoading(false);\n });\n }, []);\n\n const filtered = useMemo(() => {\n return breeds.filter((b) => {\n if (coatFilter !== \"All\" && b.coat !== coatFilter) return false;\n if (hypoOnly && !b.hypoallergenic) return false;\n if (search) {\n const q = search.toLowerCase();\n const hay = `${b.name} ${b.origin} ${b.temperament.join(\" \")}`.toLowerCase();\n if (!hay.includes(q)) return false;\n }\n return true;\n });\n }, [breeds, search, coatFilter, hypoOnly]);\n\n return (\n

\n {/* Header */}\n

\n 🐈\n \n Cat Breed Explorer\n \n

\n Find your purrfect companion\n

\n Browse {breeds.length || \"a dozen\"} of the world's most beloved cat breeds — their\n personalities, origins, and quirks.\n

\n\n {/* Filters */}\n

\n setSearch(e.target.value)}\n className=\"flex-1 min-w-[200px] px-4 py-2 border border-stone-200 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-orange-400 focus:border-transparent\"\n />\n

\n {COATS.map((c) => (\n setCoatFilter(c)}\n className={`px-3 py-1 text-sm rounded-full transition ${\n coatFilter === c\n ? \"bg-white text-stone-900 shadow-sm font-semibold\"\n : \"text-stone-500 hover:text-stone-900\"\n }`}\n >\n {c}\n \n ))}\n

\n \n setHypoOnly(e.target.checked)}\n className=\"w-4 h-4 accent-orange-500\"\n />\n Hypoallergenic only\n \n

\n\n {/* Grid */}\n

\n {loading ? (\n

Loading breeds... 🐾

\n ) : filtered.length === 0 ? (\n

🙀

No breeds match your filters.

\n ) : (\n <>\n

\n Showing {filtered.length}{\" \"}\n {filtered.length === 1 ? \"breed\" : \"breeds\"}\n

\n {filtered.map((b) => (\n setSelectedId(b.id)} />\n ))}\n

\n \n )}\n

\n\n {/* Footer */}\n \n\n {/* Modal */}\n {selectedId && setSelectedId(null)} />}\n

\n );\n}\n",[],[205,222,232],"23602900-3e8b-11f1-b0d3-42b51c65c3df",["D",1776890273995],[173,174,175],[205,222],"1264b8e6-3e8b-11f1-b3ef-42b51c65c3df",["D",1776890245506],[172,176,177],[205],["D",1776890187437],{"_11":12,"_126":72},{"_11":12,"_121":122,"_71":72,"_31":-5,"_123":124,"_125":24},{"_39":112,"_13":16,"_33":36,"_113":76,"_114":-5,"_115":-5,"_116":-5,"_117":-5,"_118":-5,"_119":14,"_120":12},"ctx",{"_53":-5,"_145":284,"_285":286,"_287":288,"_289":30,"_290":30,"_291":30,"_292":24,"_293":-5,"_294":-7,"_295":-7,"_296":26,"_297":30,"_298":30,"_299":-5,"_300":30,"_301":30,"_302":30,"_303":-5},"ENV",{"_255":256,"_257":258,"_259":16,"_260":261,"_262":263,"_264":265,"_266":267,"_268":269,"_270":271,"_272":273,"_274":275,"_276":277,"_278":279,"_280":281,"_282":283},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · shared