12 */
13
14/** @jsxImportSource https://esm.sh/react */
15import React, { useState, useEffect, useRef } from "https://esm.sh/react";
16import { createRoot } from "https://esm.sh/react-dom/client";
17import jsQR from "https://esm.sh/jsqr";
18
1/** @jsxImportSource https://esm.sh/react */
2import React, { useState } from "https://esm.sh/react";
3import { createRoot } from "https://esm.sh/react-dom/client";
4import type { User } from "https://esm.town/v/stevekrouse/zod_demo_shared";
5
9 const [serverResponse, setServerResponse] = useState<string>("");
10
11 const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
12 const { name, value } = e.target;
13 setUser(prev => ({ ...prev, [name]: name === "age" ? parseInt(value) || 0 : value }));
14 };
15
16 const handleSubmit = async (e: React.FormEvent) => {
17 e.preventDefault();
18 setErrors({});
2
3* @stevekrouse/zod_demo_http (this val)
4* @stevekrouse/zod_demo_frontend (client-side react component)
5* @stevekrouse/zod_demo_shared (code that is imported in both vals, but only run on the backend)
6
1/**
2 * This val creates a simple web interface using Hono framework to convert HTML to Markdown.
3 * It uses HTMX for dynamic updates and Alpine.js for reactivity.
4 * The Turndown library is used for HTML to Markdown conversion.
5 * The interface includes two text areas (input and output) and buttons for conversion and copying.
141. The application uses the Hono framework to create a simple web server.
152. HTMX is used for handling AJAX requests without writing JavaScript.
163. Alpine.js provides reactivity for the clipboard functionality.
174. The Turndown library is used to convert HTML to Markdown.
18
2 * This val creates an enhanced NPM package explorer using the npm registry API.
3 * It displays a grid of npm packages with basic information, categories, and navigation.
4 * The approach uses React for the frontend and fetch for API calls.
5 * It includes a details view for each package, a link to the npm page, and category navigation.
6 */
7
8/** @jsxImportSource https://esm.sh/react */
9import React, { useState, useEffect } from "https://esm.sh/react";
10import { createRoot } from "https://esm.sh/react-dom/client";
11
12const ITEMS_PER_PAGE = 30;
1/**
2 * This app implements a "Would You Rather" game with a ranking system for answers and a progress bar.
3 * It uses React for the frontend and SQLite for persistent storage on the backend.
4 * The ranking system updates based on user choices and displays in the Answers tab.
5 * A progress bar is added to show completion of 20 questions.
6 */
7/** @jsxImportSource https://esm.sh/react */
8import React, { useCallback, useEffect, useState } from "https://esm.sh/react";
9import { createRoot } from "https://esm.sh/react-dom/client";
10import {
11 BrowserRouter as Router,
15 useLocation,
16 useNavigate,
17} from "https://esm.sh/react-router-dom";
18
19// Types
240 const [username, setUsername] = useState("");
241
242 const handleLogin = useCallback(async (e: React.FormEvent) => {
243 e.preventDefault();
244 const response = await fetch("/api/login", {
1/**
2 * This val creates an elegant and professional web app for managing panel members for the State Street discussion.
3 * It uses React for the UI, SQLite for storing panel member information, and the Fetch API to communicate with the server.
4 * The design is clean and sophisticated, with a muted color palette and subtle animations.
5 */
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";
10
11function App() {
6 */
7
8/** @jsxImportSource https://esm.sh/react */
9import React, { useState } from "https://esm.sh/react";
10import { createRoot } from "https://esm.sh/react-dom/client";
11
12function App() {
3- [x] Pill box style navigation
4- [ ] Tufte-inspired CSS
5- [ ] React
6- [ ] Lorum Ipsum Text Sample with all features
7- [ ] Admonishments
