1/** @jsxImportSource https://esm.sh/react */
2import { renderToString } from "npm:react-dom/server";
3
4// Learn more: https://docs.val.town/vals/http/jsx/
5export const reactExample = (request: Request) =>
6 new Response(renderToString(<div>Test {1 + 1}</div>), {
7 headers: {
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="/frontend/style.css"> -->
8 <link rel="icon" href="/frontend/favicon.svg" type="image/svg+xml">
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, {
3 useEffect,
4 useState,
5} from "https://esm.sh/react@18.2.0?deps=react@18.2.0";
6import { createPortal } from "https://esm.sh/react-dom@18.2.0?deps=react@18.2.0,react-dom@18.2.0";
7import { NotionBlocks } from "./NotionBlock.tsx";
8import { NotionProperty } from "./NotionProperty.tsx";
34
35If you want more interactivity, check out this
36[React starter](https://www.val.town/x/std/reactHonoStarter).
37
38### ← favicon.svg
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2
3import { blob } from "https://esm.town/v/std/blob";
1/** @jsxImportSource npm:react@18.2.0 */
2import type { ReactNode } from "npm:react@18.2.0";
3
4export function Layout({ children }: { children: ReactNode }) {
5 return (
6 <html lang="en">
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import Markdown from "https://esm.sh/react-markdown@9?deps=react@18.2.0";
3import { listFiles, readFile } from "https://esm.town/v/std/utils@85-main/index.ts";
4import { renderToString } from "npm:react-dom@18.2.0/server";
5import { Layout } from "./Layout.tsx";
6
44}
45
46function html(children: React.ReactNode) {
47 return new Response(
48 renderToString(
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2
3export function ValTownLogo () {
1import { useState, useEffect } from "react";
2
3const USER_ENDPOINT = "/api/user";
