1// This val creates a SQLite dashboard admin panel with a sidebar for table names
2// It uses React for the frontend and the Val Town SQLite API for database operations
3// Now includes functionality to edit rows, using rowid or all columns as identifiers
4// and the ability to add new rows to tables
5// Column types are displayed next to column names in the UI
6
7/** @jsxImportSource https://esm.sh/react */
8import React, { useEffect, useState } from "https://esm.sh/react";
9import { createRoot } from "https://esm.sh/react-dom/client";
10import { vtTokenSessionAuth } from "https://esm.town/v/stevekrouse/vtTokenSessionAuthSafe";
11
1/** @jsxImportSource https://esm.sh/react */
2import React, { useState } from "https://esm.sh/react";
3import { createRoot } from "https://esm.sh/react-dom/client";
4
5function App() {
1// This approach creates a PC application with a left-side menu structure as requested.
2// We'll use React for the UI components and React Router for navigation.
3// The server will serve the HTML, and the client-side React application will handle the menu and routing.
4
5/** @jsxImportSource https://esm.sh/react */
6import ReactDOM from "https://esm.sh/react-dom@18.2.0";
7import { BrowserRouter, Link, Route, Routes } from "https://esm.sh/react-router-dom@6.11.2";
8import React from "https://esm.sh/react@18.2.0";
9
10const menuStructure = [
43
44function MenuItem({ item }) {
45 const [isOpen, setIsOpen] = React.useState(false);
46 const [isHovered, setIsHovered] = React.useState(false);
47
48 return (
109
110function client() {
111 ReactDOM.createRoot(document.getElementById("root")).render(<App />);
112}
113
1/** @jsxImportSource https://esm.sh/react */
2import React, { useEffect, useRef, useState } from "https://esm.sh/react";
3import { createRoot } from "https://esm.sh/react-dom/client";
4import styled, { createGlobalStyle, keyframes } from "https://esm.sh/styled-components";
5
399
400function App() {
401 const [isNavOpen, setIsNavOpen] = React.useState(false);
402 const toggleNav = () => {
403 setIsNavOpen(!isNavOpen);
34
35 const dist_nowcast_warnings =
36 "https://reactjs.imd.gov.in/geoserver/imd/wms?service=WMS&request=GetMap&layers=imd%3ANowcast_StateDistrict_Merged&styles=&format=image%2Fsvg&transparent=true&version=1.1.1&width=256&height=256&srs=EPSG%3A4326&bbox="
37 + bbox;
38
39 // env=day:Day1_Color
40 const dist_warnings_today =
41 "https://reactjs.imd.gov.in/geoserver/imd/wms?service=WMS&request=GetMap&layers=imd%3AWarnings_StateDistrict_Merged&styles=&format=image%2Fsvg&transparent=true&version=1.1.1&env=day%3ADay1_Color&width=256&height=256&srs=EPSG%3A4326&bbox="
42 + bbox;
43
44 // env=day:Day2_Color
45 const dist_warnings_today_plus_1 =
46 "https://reactjs.imd.gov.in/geoserver/imd/wms?service=WMS&request=GetMap&layers=imd%3AWarnings_StateDistrict_Merged&styles=&format=image%2Fsvg&transparent=true&version=1.1.1&env=day%3ADay2_Color&width=256&height=256&srs=EPSG%3A4326&bbox="
47 + bbox;
48
49 // env=day:Day3_Color
50 const dist_warnings_today_plus_2 =
51 "https://reactjs.imd.gov.in/geoserver/imd/wms?service=WMS&request=GetMap&layers=imd%3AWarnings_StateDistrict_Merged&styles=&format=image%2Fsvg&transparent=true&version=1.1.1&env=day%3ADay3_Color&width=256&height=256&srs=EPSG%3A4326&bbox="
52 + bbox;
53
54 // env=day:Day4_Color
55 const dist_warnings_today_plus_3 =
56 "https://reactjs.imd.gov.in/geoserver/imd/wms?service=WMS&request=GetMap&layers=imd%3AWarnings_StateDistrict_Merged&styles=&format=image%2Fsvg&transparent=true&version=1.1.1&env=day%3ADay4_Color&width=256&height=256&srs=EPSG%3A4326&bbox="
57 + bbox;
58
59 // env=day:Day5_Color
60 const dist_warnings_today_plus_4 =
61 "https://reactjs.imd.gov.in/geoserver/imd/wms?service=WMS&request=GetMap&layers=imd%3AWarnings_StateDistrict_Merged&styles=&format=image%2Fsvg&transparent=true&version=1.1.1&env=day%3ADay5_Color&width=256&height=256&srs=EPSG%3A4326&bbox="
62 + bbox;
63 /*
1// This approach will create a Game of Life simulation using React for the frontend and
2// a simple backend to serve the HTML. We'll use a canvas element for efficient rendering
3// of the game grid and implement the Game of Life rules on the client side. An explanation
4// dialog is added to provide information about the game and common patterns.
5
6/** @jsxImportSource https://esm.sh/react */
7import React, { useCallback, useEffect, useRef, useState } from "https://esm.sh/react";
8import { createRoot } from "https://esm.sh/react-dom/client";
9
10const CELL_SIZE = 10;
1/** @jsxImportSource https://esm.sh/react */
2import React from "https://esm.sh/react";
3import { renderToString } from "https://esm.sh/react-dom/server";
4import { createRoot } from "https://esm.sh/react-dom/client";
5
6const BLOB_KEY = 'health_data';
1/** @jsxImportSource https://esm.sh/react */
2import React, { useState, useEffect } from "https://esm.sh/react";
3import { createRoot } from "https://esm.sh/react-dom/client";
4import ReactMarkdown from "https://esm.sh/react-markdown";
5import remarkGfm from "https://esm.sh/remark-gfm";
6import { faker } from "https://esm.sh/@faker-js/faker";
170 </div>
171 <div className="preview">
172 <ReactMarkdown remarkPlugins={[remarkGfm]}>{markdown}</ReactMarkdown>
173 </div>
174 </div>
1/** @jsxImportSource https://esm.sh/react */
2import { sqlite } from "https://esm.town/v/std/sqlite?v=6";
3import { html } from "https://esm.town/v/stevekrouse/html";
4import { SparklineSVG } from "https://esm.town/v/stevekrouse/sparklineSVGReact";
5import { renderToString } from "npm:react-dom/server";
6
7function StatusRow({ rows }) {
1/**
2 * This game challenges players to click and hold a button for as long as possible.
3 * It uses React for the UI, SQLite for storing high scores, and includes a leaderboard.
4 * The game features vibrant colors and a pre-game explanation.
5 */
6/** @jsxImportSource https://esm.sh/react */
7import React, { useState, useEffect, useRef } from "https://esm.sh/react";
8import { createRoot } from "https://esm.sh/react-dom/client";
9
10function App() {
