1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { blob } from "https://esm.town/v/std/blob";
3
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 { id, init, tx } from "https://esm.sh/@instantdb/react?bundle-deps&deps=react@18.2.0,react-dom@18.2.0";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4import React, { useState } from "https://esm.sh/react@18.2.0";
5import Footer from "./yongeStreetFooter";
6import Logo from "./yongeStreetLogo";
142
143export default async function server(request: Request): Promise<Response> {
144 const { renderToString } = await import("https://esm.sh/react-dom@18.2.0/server");
145 const Footer = (await import("https://esm.town/v/vawogbemi/yongeStreetFooter")).default;
146 const footerSvg = renderToString(<Footer props={{ width: 48, height: 48 }} />);
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { PauseCircle, PlayCircle } from "https://esm.sh/lucide-react";
3import ReactDOM from "https://esm.sh/react-dom@18.2.0";
4import React, { useState } from "https://esm.sh/react@18.2.0";
5
6const Layout = () => {
85};
86
87ReactDOM.createRoot(document.getElementById("root")).render(
88 <React.StrictMode>
89 <Layout />
90 </React.StrictMode>,
91);
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";
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2export function SparklineSVG({ strokeWidth = 2, data = [], fill = "none", stroke = "black" }) {
3 const padding = 2;
1/** @jsxImportSource npm:react */
2import { Form, Link, Outlet, useLoaderData } from "npm:react-router";
3import { type loader } from "./layout.server.ts";
4
8 <html>
9 <head>
10 <title>React Router Custom Framework</title>
11 </head>
12 <body>
13 <div>
14 <h1>React Router Custom Framework</h1>
15
16 <Form method="post">
1import { ActionFunctionArgs, type LoaderFunctionArgs } from "npm:react-router";
2
3let db = { message: "Hello world!" };
1import { type LoaderFunctionArgs } from "npm:react-router";
2
3export async function loader({ request }: LoaderFunctionArgs) {
1import { ActionFunctionArgs, LoaderFunctionArgs } from "npm:react-router";
2import aboutLoader from "./about.loader.ts";
3import About from "./about.tsx";
