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",[98],"permalink","https://www.val.town/x/cofsana/fancyPlumSquirrel/code/main.tsx","extension","actionData","errors"]