\n setJobTitle(e.target.value)}\n required \n />\n setCompany(e.target.value)}\n required \n />\n

setDescription(e.target.value)}\n        required \n      />\n      <input \n        type=\"text\" \n        placeholder=\"Location\" \n        value={location}\n        onChange={(e) => setLocation(e.target.value)}\n      />\n      <button type=\"submit\">Post Job</button>\n    </form>\n  );\n}\n\nfunction ChatForm({ onMessageSend }) {\n  const [username, setUsername] = useState('');\n  const [message, setMessage] = useState('');\n\n  const handleSubmit = async (e) => {\n    e.preventDefault();\n    await onMessageSend({ username, message });\n    \n    // Reset message\n    setMessage('');\n  };\n\n  return (\n    <form onSubmit={handleSubmit}>\n      <input \n        type=\"text\" \n        placeholder=\"Your Name\" \n        value={username}\n        onChange={(e) => setUsername(e.target.value)}\n        required \n      />\n      <textarea \n        placeholder=\"Type your message\" \n        value={message}\n        onChange={(e) => setMessage(e.target.value)}\n        required \n      />\n      <button type=\"submit\">Send Message</button>\n    </form>\n  );\n}\n\nfunction JobBoard() {\n  const [jobListings, setJobListings] = useState([]);\n\n  const loadJobListings = async () => {\n    const KEY = \"stirringPlumXerinae\";\n    \n    try {\n      // Try SQLite first\n      const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n      const jobsResult = await sqlite.execute(\n        \"SELECT * FROM \" + KEY + \"_job_postings \" +\n        \"ORDER BY created_at DESC \" +\n        \"LIMIT 10\"\n      );\n      setJobListings(jobsResult.rows);\n    } catch (error) {\n      // Fallback to Blob storage\n      const jobData = await blob.getJSON(`${KEY}_job_postings`) || [];\n      setJobListings(jobData);\n    }\n  };\n\n  const handleJobPost = async (jobData) => {\n    const KEY = \"stirringPlumXerinae\";\n    \n    try {\n      // Try SQLite first\n      const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n      await sqlite.execute(\n        \"INSERT INTO \" + KEY + \"_job_postings \" +\n        \"(title, company, description, location) \" +\n        \"VALUES (?, ?, ?, ?)\",\n        [jobData.jobTitle, jobData.company, jobData.description, jobData.location]\n      );\n    } catch (error) {\n      // Fallback to Blob storage\n      const existingJobs = await blob.getJSON(`${KEY}_job_postings`) || [];\n      const newJobs = [...existingJobs, {\n        id: Date.now(),\n        title: jobData.jobTitle,\n        company: jobData.company,\n        description: jobData.description,\n        location: jobData.location,\n        created_at: new Date().toISOString()\n      }];\n      await blob.setJSON(`${KEY}_job_postings`, newJobs);\n    }\n\n    await loadJobListings();\n  };\n\n  useEffect(() => {\n    const initJobBoard = async () => {\n      try {\n        // Try SQLite first\n        const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n        const KEY = \"stirringPlumXerinae\";\n\n        await sqlite.execute(\n          \"CREATE TABLE IF NOT EXISTS \" + KEY + \"_job_postings (\" +\n          \"id INTEGER PRIMARY KEY AUTOINCREMENT,\" +\n          \"title TEXT NOT NULL,\" +\n          \"company TEXT NOT NULL,\" +\n          \"description TEXT NOT NULL,\" +\n          \"location TEXT,\" +\n          \"created_at DATETIME DEFAULT CURRENT_TIMESTAMP\" +\n          \")\"\n        );\n      } catch (error) {\n        // Fallback initialization for Blob storage\n        const KEY = \"stirringPlumXerinae\";\n        await blob.getJSON(`${KEY}_job_postings`) || \n          await blob.setJSON(`${KEY}_job_postings`, []);\n      }\n\n      await loadJobListings();\n    };\n\n    initJobBoard();\n    const interval = setInterval(loadJobListings, 30000);\n    return () => clearInterval(interval);\n  }, []);\n\n  return (\n    <div className=\"job-board\">\n      <h2>📋 Job Postings</h2>\n      <JobPostingForm onJobPost={handleJobPost} />\n      <div id=\"job-listings\">\n        {jobListings.map(job => (\n          <div key={job.id} className=\"job-post\">\n            <h3>{job.title} @ {job.company}</h3>\n            <p>{job.description}</p>\n            <small>📍 {job.location || 'Not specified'}</small>\n            <div className=\"timestamp\">\n              Posted: {new Date(job.created_at).toLocaleString()}\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\nfunction ChatRoom() {\n  const [messages, setMessages] = useState([]);\n\n  const loadChatMessages = async () => {\n    const KEY = \"stirringPlumXerinae\";\n    \n    try {\n      // Try SQLite first\n      const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n      const messagesResult = await sqlite.execute(\n        \"SELECT * FROM \" + KEY + \"_chat_messages \" +\n        \"ORDER BY created_at ASC \" +\n        \"LIMIT 20\"\n      );\n      setMessages(messagesResult.rows);\n    } catch (error) {\n      // Fallback to Blob storage\n      const chatData = await blob.getJSON(`${KEY}_chat_messages`) || [];\n      setMessages(chatData);\n    }\n  };\n\n  const handleMessageSend = async (messageData) => {\n    const KEY = \"stirringPlumXerinae\";\n    \n    try {\n      // Try SQLite first\n      const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n      await sqlite.execute(\n        \"INSERT INTO \" + KEY + \"_chat_messages \" +\n        \"(username, message) \" +\n        \"VALUES (?, ?)\",\n        [messageData.username, messageData.message]\n      );\n    } catch (error) {\n      // Fallback to Blob storage\n      const existingMessages = await blob.getJSON(`${KEY}_chat_messages`) || [];\n      const newMessages = [...existingMessages, {\n        id: Date.now(),\n        username: messageData.username,\n        message: messageData.message,\n        created_at: new Date().toISOString()\n      }];\n      await blob.setJSON(`${KEY}_chat_messages`, newMessages);\n    }\n\n    await loadChatMessages();\n  };\n\n  useEffect(() => {\n    const initChatRoom = async () => {\n      try {\n        // Try SQLite first\n        const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n        const KEY = \"stirringPlumXerinae\";\n\n        await sqlite.execute(\n          \"CREATE TABLE IF NOT EXISTS \" + KEY + \"_chat_messages (\" +\n          \"id INTEGER PRIMARY KEY AUTOINCREMENT,\" +\n          \"username TEXT NOT NULL,\" +\n          \"message TEXT NOT NULL,\" +\n          \"created_at DATETIME DEFAULT CURRENT_TIMESTAMP\" +\n          \")\"\n        );\n      } catch (error) {\n        // Fallback initialization for Blob storage\n        const KEY = \"stirringPlumXerinae\";\n        await blob.getJSON(`${KEY}_chat_messages`) || \n          await blob.setJSON(`${KEY}_chat_messages`, []);\n      }\n\n      await loadChatMessages();\n    };\n\n    initChatRoom();\n    const interval = setInterval(loadChatMessages, 5000);\n    return () => clearInterval(interval);\n  }, []);\n\n  return (\n    <div className=\"chat-room\">\n      <h2>💬 Opportunity Chat</h2>\n      <ChatForm onMessageSend={handleMessageSend} />\n      <div id=\"chat-messages\">\n        {messages.map(msg => (\n          <div key={msg.id} className=\"chat-message\">\n            <strong>{msg.username}</strong>: {msg.message}\n            <div className=\"timestamp\">\n              {new Date(msg.created_at).toLocaleString()}\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\nfunction App() {\n  return (\n    <div>\n      <h1>🚀 Job Opportunities Platform</h1>\n      <div className=\"container\">\n        <JobBoard />\n        <ChatRoom />\n      </div>\n    </div>\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(<App />);\n}\n\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise<Response> {\n  return new Response(`\n    <!DOCTYPE html>\n    <html lang=\"en\">\n    <head>\n      <meta charset=\"UTF-8\">\n      <title>Job Opportunities Platform</title>\n      <style>\n        body {\n          font-family: Arial, sans-serif;\n          max-width: 800px;\n          margin: 0 auto;\n          padding: 20px;\n          line-height: 1.6;\n        }\n        .container {\n          display: grid;\n          grid-template-columns: 1fr 1fr;\n          gap: 20px;\n        }\n        .job-board, .chat-room {\n          border: 1px solid #ddd;\n          padding: 15px;\n          border-radius: 8px;\n        }\n        form {\n          display: flex;\n          flex-direction: column;\n          gap: 10px;\n          margin-bottom: 15px;\n        }\n        input, textarea, button {\n          padding: 10px;\n          margin-bottom: 10px;\n        }\n        #job-listings, #chat-messages {\n          max-height: 400px;\n          overflow-y: auto;\n          border: 1px solid #eee;\n          padding: 10px;\n        }\n        .job-post, .chat-message {\n          background-color: #f4f4f4;\n          margin-bottom: 10px;\n          padding: 10px;\n          border-radius: 5px;\n        }\n        .timestamp {\n          color: #888;\n          font-size: 0.8em;\n        }\n      </style>\n      <script src=\"https://esm.town/v/std/catch\"></script>\n    </head>\n    <body>\n      <div id=\"root\"></div>\n      <script type=\"module\" src=\"${import.meta.url}\"></script>\n    </body>\n    </html>\n  `, {\n    headers: {\n      'Content-Type': 'text/html; charset=utf-8'\n    }\n  });\n}","deleted","label",[99],"permalink","https://www.val.town/x/samual/stirringPlumXerinae/code/main.tsx","extension","actionData","errors"]
</article></body></html>