1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import { App } from "./components/App.tsx";
4
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>React Hono Val Town Starter</title>
7 <link rel="stylesheet" href="/public/style.css">
8 <link rel="icon" href="/public/favicon.svg" sizes="any" type="image/svg+xml">
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { useState } from "https://esm.sh/react@18.2.0";
3
4export function App() {
6 return (
7 <div>
8 <h1>Val Town React + Hono Starter</h1>
9 I've been clicked <button onClick={() => setClicked((c) => c + 1)}>{clicked}</button> times
10 </div>
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import React, { useEffect, useState } from "https://esm.sh/react@18.2.0";
4
5function App() {
13 const [isSystemPromptEditing, setIsSystemPromptEditing] = useState(false);
14
15 const handleSubmit = async (e: React.FormEvent) => {
16 e.preventDefault();
17 if (!input.trim()) return;
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import React from "https://esm.sh/react@18.2.0";
4
5function ImageGenerator() {
6 const [prompt, setPrompt] = React.useState("");
7 const [images, setImages] = React.useState<any>([]);
8 const [loading, setLoading] = React.useState(false);
9
10 const samplePrompts = [
31 };
32
33 React.useEffect(() => {
34 // Set a random prompt when component mounts
35 setPrompt(getRandomPrompt());
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client?deps=react@18.2.0";
3import { Prism as SyntaxHighlighter } from "https://esm.sh/react-syntax-highlighter?deps=react@18.2.0,react-dom@18.2.0";
4import React, { useEffect, useState } from "https://esm.sh/react@18.2.0";
5import STARTER_PROMPTS from "./starter-prompts.js";
6
30}: {
31 prompt: string;
32 setPrompt: React.Dispatch<React.SetStateAction<string>>;
33 handleSubmit: (e: React.FormEvent) => void;
34 handleStarterPromptClick: (promptItem: PromptItem) => void;
35}) {
116
117function App() {
118 const previewRef = React.useRef<HTMLDivElement>(null);
119 const [prompt, setPrompt] = useState("");
120 const [projectId, setProjectId] = useState<number | null>(null);
174 }
175
176 async function handleSubmit(e: React.FormEvent | string) {
177 if (typeof e !== "string") {
178 e.preventDefault();
673 </div>
674 <div className="bg-white w-full h-full flex flex-col grow rounded-xl border-2 border-white overflow-hidden">
675 <React.Fragment key={iframeKey}>
676 <iframe
677 srcDoc={code}
679 className="w-full grow"
680 />
681 </React.Fragment>
682 </div>
683 </div>
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState, useEffect } from "https://esm.sh/react@18.2.0";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4
5function App() {
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState, useEffect } from "https://esm.sh/react@18.2.0";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4
5function App() {
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState, useRef, useEffect } from "https://esm.sh/react@18.2.0";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4
5function MusicPlayerApp() {
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { parseProject } from "https://esm.town/v/std/parseImportMeta/project";
3import { sqlite } from "https://esm.town/v/std/sqlite?v=6";
4import { html } from "https://esm.town/v/stevekrouse/html";
5import { renderToString } from "npm:react-dom@18.2.0/server";
6import config from "./config.json" with { type: "json" };
7import { SparklineSVG } from "./sparklineSVG";
