/** @jsxImportSource https://esm.sh/react@18.2.0 */ import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import React, { useEffect, useState } from "https://esm.sh/react@18.2.0"; function App() { const [writings, setWritings] = useState([]); const [title, setTitle] = useState(""); const [content, setContent] = useState(""); const [genre, setGenre] = useState(""); const handleSubmit = async (e) => { e.preventDefault(); const newWriting = { id: Date.now(), title, content, genre, createdAt: new Date().toLocaleString(), }; try { const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); const KEY = new URL(import.meta.url).pathname.split("/").at(-1); await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_writings ( id INTEGER PRIMARY KEY, title TEXT, content TEXT, genre TEXT, created_at DATETIME ) `); await sqlite.execute( ` INSERT INTO ${KEY}_writings (id, title, content, genre, created_at) VALUES (?, ?, ?, ?, ?) `, [ newWriting.id, newWriting.title, newWriting.content, newWriting.genre, newWriting.createdAt, ], ); setWritings([...writings, newWriting]); setTitle(""); setContent(""); setGenre(""); } catch (error) { console.error("Error saving writing:", error); } }; useEffect(() => { async function fetchWritings() { try { const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); const KEY = new URL(import.meta.url).pathname.split("/").at(-1); const result = await sqlite.execute(` SELECT * FROM ${KEY}_writings ORDER BY created_at DESC `); setWritings(result.rows); } catch (error) { console.error("Error fetching writings:", error); } } fetchWritings(); }, []); return (

Creative Writing Platform 📖

setTitle(e.target.value)} required style={inputStyle} />

setContent(e.target.value)}
          required
          rows={6}
          style={inputStyle}
        />
        <button type="submit" style={buttonStyle}>
          Submit Writing
        </button>
      </form>

<div>
        <h2
          style={{
            color: "#333",
            borderBottom: "1px solid #0fa",
          }}
        >
          Recent Writings
        </h2>
        {writings.map((writing) => (
          <div
            key={writing.id}
            style={{
              backgroundColor: "white",
              border: "1px solid #ddd",
              borderRadius: "5px",
              padding: "15px",
              marginBottom: "10px",
            }}
          >
            <h3 style={{ margin: 0, color: "#0fa" }}>{writing.title}</h3>
            <p style={{ color: "#666", fontSize: "0.8em" }}>
              Genre: {writing.genre} | {writing.created_at}
            </p>
            <p>{writing.content}</p>
          </div>
        ))}
      </div>
      <a
        href={import.meta.url.replace("esm.town", "val.town")}
        target="_top"
        style={{
          display: "block",
          textAlign: "center",
          color: "#666",
          textDecoration: "none",
          marginTop: "20px",
        }}
      >
        View Source
      </a>
    </div>
  );
}

const inputStyle = {
  padding: "10px",
  borderRadius: "5px",
  border: "1px solid #ddd",
  fontSize: "16px",
};

const buttonStyle = {
  backgroundColor: "#0fa",
  color: "white",
  border: "none",
  padding: "10px 15px",
  borderRadius: "5px",
  cursor: "pointer",
  fontSize: "16px",
  transition: "background-color 0.3s",
};

function client() {
  createRoot(document.getElementById("root")).render(<App />);
}
if (typeof document !== "undefined") { client(); }

export default async function server(request: Request): Promise<Response> {
  return new Response(
    `
    <html>
      <head>
        <title>Creative Writing Platform</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
          body { margin: 0; background-color: #f4f4f4; }
        </style>
      </head>
      <body>
        <div id="root"></div>
        <script src="https://esm.town/v/std/catch"></script>
        <script type="module" src="${import.meta.url}"></script>
      </body>
    </html>
  `,
    {
      headers: { "content-type": "text/html" },
    },
  );
}</article></body></html>

glowingText