[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_166":167,"_168":169},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_127":-5,"_20":128,"_22":129,"_130":131,"_132":133,"_25":134,"_24":-5,"_135":-5,"_136":137,"_138":49,"_139":140,"_141":68,"_142":-5,"_143":-5,"_144":145},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":-7,"_25":26,"_27":28,"_29":-5,"_30":31,"_32":33,"_34":-5},"handle","cofsana","name","fancyPlumSquirrel","branchName","main","version","path","","project",{"_35":83,"_13":14,"_37":84,"_47":-5,"_85":49,"_50":86,"_87":86,"_88":-5,"_89":-5,"_90":91,"_92":62,"_93":68,"_94":-5,"_95":-5,"_96":70,"_54":97,"_98":-5,"_99":-5,"_100":-5,"_101":-5,"_102":103,"_104":103,"_105":106,"_107":106,"_108":106,"_109":103,"_110":103,"_111":112,"_113":114,"_115":116,"_48":49},"tree",[78],"file","contents",[58],"upstream",{"_35":36,"_37":38,"_39":40,"_13":16,"_41":42,"_17":33,"_43":-5,"_44":-5,"_45":46,"_47":-5,"_48":49,"_50":51,"_52":53,"_54":55,"_56":57},"pull","ahead",1,"behind",6,"envVars","id","fe7cae32-2794-11f0-9d52-569c3dd06744","createdAt",["D",1746218132667],"updatedAt",["D",1724564425095],"projectId","fe7c6954-2794-11f0-9d52-569c3dd06744","forkedBranchId","forkedBranchVersion","lockfileKey","1746234619846-esm.town_v_all_panelSB@6-main","deletedAt","isOwned",false,"privacy","unlisted","userHandle","all","orgId","ac07f7d9-2f7b-4820-84f1-ee64e6f1c40c","projectName","panelSB",{"_35":59,"_13":60,"_61":62,"_63":-5,"_64":65,"_66":31,"_67":68,"_37":69,"_17":70,"_71":72,"_73":74,"_75":49,"_76":-5,"_18":77},"7f2b2c38-26dd-11f0-a5b3-569c3dd06744","main.tsx","fileId","7f2b2d0a-26dd-11f0-a5b3-569c3dd06744","parentId","branchId","7f270702-26dd-11f0-a5b3-569c3dd06744","branchVersion","latest",true,["D",1724302277849],0,"fileType","http","content","/**\n * This val creates an elegant and professional web app for managing panel members for the State Street discussion.\n * It uses React for the UI, SQLite for storing panel member information, and the Fetch API to communicate with the server.\n * The design is clean and sophisticated, with a muted color palette and subtle animations.\n */\n\n/** @jsxImportSource https://esm.sh/react */\nimport React, { useEffect, useState } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\n\nfunction App() {\n const [panelMembers, setPanelMembers] = useState([]);\n const [newMember, setNewMember] = useState({ name: \"\", expertise: \"\" });\n const [isLoading, setIsLoading] = useState(false);\n const [error, setError] = useState(null);\n\n useEffect(() => {\n fetchPanelMembers();\n }, []);\n\n const fetchPanelMembers = async () => {\n setIsLoading(true);\n try {\n const response = await fetch(\"/panel-members\");\n if (!response.ok) {\n throw new Error(\"Failed to fetch panel members\");\n }\n const data = await response.json();\n setPanelMembers(data);\n } catch (err) {\n setError(\"Failed to load panel members. Please try again.\");\n } finally {\n setIsLoading(false);\n }\n };\n\n const addPanelMember = async (e) => {\n e.preventDefault();\n setIsLoading(true);\n try {\n const response = await fetch(\"/add-member\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(newMember),\n });\n if (!response.ok) {\n throw new Error(\"Failed to add panel member\");\n }\n setNewMember({ name: \"\", expertise: \"\" });\n fetchPanelMembers();\n } catch (err) {\n setError(\"Failed to add panel member. Please try again.\");\n } finally {\n setIsLoading(false);\n }\n };\n\n return (\n

State Street Discussion Panel

Manage panel members for the upcoming discussion on urban development

\n\n

About the Discussion

\n Join us for an insightful discussion on the future of State Street. Our panel of experts will explore urban\n development strategies, community engagement, and economic revitalization.\n

\n\n

Add New Panel Member

\n\n

Current Panel Members

\n {isLoading &&

Loading panel members...

}\n {error &&

{error}

}\n

\n {member.name} - {member.expertise}\n

\n\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nasync function server(request: Request): Promise {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const KEY = \"fancyPlumSquirrel\";\n\n // Create table if it doesn't exist\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_panel_members (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL,\n expertise TEXT NOT NULL\n )\n `);\n\n if (request.method === \"GET\" && new URL(request.url).pathname === \"/panel-members\") {\n const result = await sqlite.execute(`SELECT * FROM ${KEY}_panel_members`);\n return new Response(JSON.stringify(result.rows), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/add-member\") {\n const { name, expertise } = await request.json();\n await sqlite.execute(\n `\n INSERT INTO ${KEY}_panel_members (name, expertise) VALUES (?, ?)\n `,\n [name, expertise],\n );\n return new Response(JSON.stringify({ success: true }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n return new Response(\n `\n \n \n \n \n \n State Street Discussion Panel\n \n \n \n

\n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nexport default server;\n\nconst css = `\n @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Roboto:wght@300;400;700&display=swap');\n\n :root {\n --primary-color: #2c3e50;\n --secondary-color: #34495e;\n --accent-color: #3498db;\n --background-color: #ecf0f1;\n --text-color: #2c3e50;\n }\n\n body {\n font-family: 'Roboto', sans-serif;\n background-color: var(--background-color);\n color: var(--text-color);\n line-height: 1.6;\n margin: 0;\n padding: 0;\n }\n\n .container {\n max-width: 800px;\n margin: 0 auto;\n padding: 2rem;\n }\n\n header {\n text-align: center;\n margin-bottom: 2rem;\n }\n\n h1, h2 {\n font-family: 'Playfair Display', serif;\n color: var(--primary-color);\n }\n\n h1 {\n font-size: 2.5rem;\n margin-bottom: 0.5rem;\n }\n\n h2 {\n font-size: 1.8rem;\n margin-bottom: 1rem;\n }\n\n .subtitle {\n font-size: 1.2rem;\n color: var(--secondary-color);\n font-weight: 300;\n }\n\n section {\n background-color: #ffffff;\n border-radius: 8px;\n padding: 1.5rem;\n margin-bottom: 2rem;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n }\n\n form {\n display: flex;\n flex-direction: column;\n }\n\n input, button {\n margin-bottom: 1rem;\n padding: 0.8rem;\n border: 1px solid #bdc3c7;\n border-radius: 4px;\n font-size: 1rem;\n transition: all 0.3s ease;\n }\n\n input:focus {\n border-color: var(--accent-color);\n outline: none;\n box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);\n }\n\n button {\n background-color: var(--accent-color);\n color: white;\n border: none;\n cursor: pointer;\n font-weight: bold;\n transition: background-color 0.3s ease;\n }\n\n button:hover {\n background-color: #2980b9;\n }\n\n button:disabled {\n background-color: #bdc3c7;\n cursor: not-allowed;\n }\n\n ul {\n list-style-type: none;\n padding: 0;\n }\n\n li {\n background-color: #f8f9fa;\n margin-bottom: 0.5rem;\n padding: 1rem;\n border-radius: 4px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);\n transition: transform 0.2s ease;\n }\n\n li:hover {\n transform: translateY(-2px);\n }\n\n .loading {\n color: var(--accent-color);\n font-weight: bold;\n text-align: center;\n }\n\n .error {\n color: #e74c3c;\n font-weight: bold;\n text-align: center;\n }\n\n footer {\n text-align: center;\n margin-top: 2rem;\n }\n\n a {\n color: var(--accent-color);\n text-decoration: none;\n font-weight: 600;\n transition: color 0.3s ease;\n }\n\n a:hover {\n color: #2980b9;\n }\n\n @media (max-width: 600px) {\n .container {\n padding: 1rem;\n }\n\n h1 {\n font-size: 2rem;\n }\n\n h2 {\n font-size: 1.5rem;\n }\n }\n`;","deleted","label",[60],{"_35":59,"_13":60,"_61":62,"_63":-5,"_64":65,"_66":31,"_67":68,"_37":79,"_17":70,"_71":72,"_73":74,"_75":49,"_76":-5,"_80":81,"_18":82},["D",1724302277849],"children",[],[60],"7f26b338-26dd-11f0-a5b3-569c3dd06744",["D",1746139321133],"legacyEnvVars","public","httpPrivacy","description","imageUrl","userId","2b03c88d-570f-4268-83c1-9dd044fc6bd2","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","f19a95b3-a5c9-4335-8bf5-6142c4f2e635","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_126":122},"org",{"_11":12,"_120":-5,"_121":122,"_90":91,"_123":124,"_125":49},"branch",{"_17":31,"_13":16,"_35":65,"_41":83,"_43":36,"_44":70,"_117":51,"_118":42,"_119":55,"_56":14,"_52":12},"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yajkybGN2RGNrM2dDTEUycjQyVXRRcTFHZG0ifQ","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_35":83,"_13":14,"_37":162,"_47":-5,"_85":49,"_50":86,"_87":86,"_88":-5,"_89":-5,"_90":91,"_92":62,"_93":68,"_94":-5,"_95":-5,"_96":70,"_54":97,"_98":-5,"_99":-5,"_100":-5,"_101":-5,"_102":103,"_104":103,"_105":106,"_107":106,"_108":106,"_109":103,"_110":103,"_111":163,"_113":164,"_115":165,"_48":49},[159],"files",[159],"counts",{"_150":70,"_151":31,"_152":70,"_34":153,"_154":155},[148],"upstreamProject","upstreamBranch",{"_35":36,"_37":146,"_39":147,"_13":16,"_41":42,"_17":33,"_43":-5,"_44":-5,"_45":46,"_47":-5,"_48":49,"_50":51,"_52":53,"_54":55,"_56":57},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1746218132667],["D",1724564425095],{"_35":59,"_13":60,"_61":62,"_63":-5,"_64":65,"_66":31,"_67":68,"_37":69,"_17":70,"_71":72,"_73":74,"_75":49,"_76":-5,"_18":149},[60],"pulls","branches","forks",{"_156":70,"_158":70},"connections",{"_156":70,"_157":70},"count","unfilledCount","emptyCount",{"_35":59,"_13":60,"_61":62,"_63":-5,"_64":65,"_66":31,"_67":68,"_37":79,"_17":70,"_71":72,"_73":74,"_75":49,"_76":-5,"_80":160,"_18":161},[],[60],["D",1746139321133],{"_11":12,"_126":122},{"_11":12,"_120":-5,"_121":122,"_90":91,"_123":124,"_125":49},{"_17":31,"_13":16,"_35":65,"_41":83,"_43":36,"_44":70,"_117":51,"_118":42,"_119":55,"_56":14,"_52":12},"ctx",{"_111":-5,"_143":199,"_200":201,"_202":203,"_204":49,"_205":49,"_206":49,"_207":68,"_208":-5,"_209":-7,"_210":-7,"_211":70,"_212":49,"_213":49,"_214":-5,"_215":49,"_216":49,"_217":49,"_218":-5},"ENV",{"_170":171,"_172":173,"_174":16,"_175":176,"_177":178,"_179":180,"_181":182,"_183":184,"_185":186,"_187":188,"_189":190,"_191":192,"_193":194,"_195":196,"_197":198},"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"]

Code