1/** @jsxImportSource https://esm.sh/react@19 */
2import React from "https://esm.sh/react@19";
3import {
4 createBrowserRouter,
7 Link,
8 Outlet,
9} from "https://esm.sh/react-router@7";
10
11const API_URL = "https://jxnblk--bc1e880c319511f0bf2d569c3dd06744.web.val.run";
12
13function HTML ({ children }: {
14 children: React.ReactNode;
15}) {
16 return (
17 <html lang="en">
18 <head>
19 <title>React Router Data Mode Starter</title>
20 </head>
21 <body>
31 <div>
32 <header>
33 <div>React Router Data Mode Starter</div>
34 <nav>
35 <ul>
45 <Outlet />
46 <footer>
47 <a href="https://val.town/x/jxnblk/react-router-data-mode-starter">Remix it on Val Town</a>
48 </footer>
49 </div>
53
54function Home () {
55 const [count, setCount] = React.useState(0);
56 return (
57 <div>
1/** @jsxImportSource https://esm.sh/react@19 */
2import React from "https://esm.sh/react@19";
3import ReactDOM from "https://esm.sh/react-dom@19/client";
4import { createBrowserRouter, RouterProvider } from "https://esm.sh/react-router";
5import routes from "./routes.tsx";
6
9const router = createBrowserRouter(routes);
10
11ReactDOM.hydrateRoot(
12 document,
13 <RouterProvider router={router} />
1/** @jsxImportSource https://esm.sh/react@19 */
2import * as React from "https://esm.sh/react@19";
3import ReactDOMServer from "https://esm.sh/react-dom@19/server";
4import {
5 createStaticHandler,
6 createStaticRouter,
7 StaticRouterProvider,
8} from "https://esm.sh/react-router";
9import routes from "./routes.tsx";
10
16 const router = createStaticRouter(dataRoutes, context);
17
18 let html = await ReactDOMServer.renderToReadableStream(
19 <StaticRouterProvider
20 router={router}
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import React, { useState } from "https://esm.sh/react@18.2.0";
4
5interface Message {
21 const [loading, setLoading] = useState(false);
22
23 const handleSubmit = async (e: React.FormEvent) => {
24 e.preventDefault();
25 if (!question.trim()) return;
1import { View, Text, ScrollView } from 'react-native'
2import React, { useEffect, useState } from 'react'
3import MainLayout from '@/components/reports/MainLayout'
4import DateRangeSelector from '@/components/reports/DateRangeSelector'
6import { WaiterPerformance } from '@/types/reports/WaiterPerformace'
7import { getSaleWaiters } from '@/api/reports/saleWaitersApi'
8import Animated, { FadeIn, FadeOut } from 'react-native-reanimated'
9import DailySalesTable from '@/components/reports/DailySalesTable'
10import { Payments } from '@/types/Payments'
21 <div id="app" class="container mx-auto px-4 py-8"></div>
22
23 <!-- React and dependencies -->
24 <script type="module">
25 import React from "https://esm.sh/react@18.2.0";
26 import ReactDOM from "https://esm.sh/react-dom@18.2.0";
27 import { App } from "/frontend/index.tsx";
28
29 ReactDOM.render(
30 React.createElement(App),
31 document.getElementById("app")
32 );
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 from "https://esm.sh/react@18.2.0";
3import { PlantProfile } from "../../shared/types.ts";
4
10}
11
12const PlantDetail: React.FC<PlantDetailProps> = ({ plant, onEdit, onDelete, onBack }) => {
13 // Format date for display
14 const formatDate = (dateString: string) => {
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState } from "https://esm.sh/react@18.2.0";
3import { PlantProfile } from "../../shared/types.ts";
4
9}
10
11const PlantForm: React.FC<PlantFormProps> = ({ plant, onSubmit, onCancel }) => {
12 const [formData, setFormData] = useState<Omit<PlantProfile, "id" | "created_at" | "updated_at">>({
13 name: plant?.name || "",
23 const [errors, setErrors] = useState<Record<string, string>>({});
24
25 const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
26 const { name, value } = e.target;
27 setFormData((prev) => ({
51 };
52
53 const handleSubmit = (e: React.FormEvent) => {
54 e.preventDefault();
55
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0";
3import { PlantProfile } from "../../shared/types.ts";
4
9}
10
11const PlantList: React.FC<PlantListProps> = ({ plants, onSelectPlant, selectedPlantId }) => {
12 if (plants.length === 0) {
13 return (
