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 * Icons are added for each category, and additional pill boxes are included for specific topics.
9 */
10
11/** @jsxImportSource https://esm.sh/react */
12import React, { useEffect, useState, useCallback } from "https://esm.sh/react";
13import { createRoot } from "https://esm.sh/react-dom/client";
14
15const ITEMS_PER_PAGE = 30;
1/** @jsxImportSource https://esm.sh/react */
2import React, { useState } from "https://esm.sh/react";
3import { createRoot } from "https://esm.sh/react-dom/client";
4
5const popularCombos = [
1/** @jsxImportSource npm:preact */
2import { render } from "npm:preact-render-to-string";
3
4export function it(name, fn) {
1/**
2 * This program creates a text storage and management application with a dynamic CSS theme switcher.
3 * It uses Val Town's SQLite for persistence and React for the UI.
4 * The app allows users to add, view, edit, and delete text entries with titles, tags, and categories.
5 * It includes a header with navigation, search bar, filters, a tabbed template page with 100 templates,
7 */
8
9/** @jsxImportSource https://esm.sh/react */
10import React, { useState, useEffect } from "https://esm.sh/react";
11import { createRoot } from "https://esm.sh/react-dom/client";
12
13interface TextEntry {
81 };
82
83 const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
84 event.preventDefault();
85 const form = event.currentTarget;
111 };
112
113 const handleTemplateSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
114 event.preventDefault();
115 const form = event.currentTarget;
4 */
5
6/** @jsxImportSource https://esm.sh/react */
7import React, { useState, useRef, useEffect } from "https://esm.sh/react";
8import { createRoot } from "https://esm.sh/react-dom/client";
9
10interface MemeTemplate {
134 };
135
136 const handleSubmit = (e: React.FormEvent) => {
137 e.preventDefault();
138 generateMeme();
1/** @jsxImportSource https://esm.sh/react */
2import { renderToString } from "npm:react-dom/server";
3
4export default async function(req: Request) {
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.
