Val Town Code SearchReturn to Val Town

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
5const NO_PHRASES = [

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState, useEffect } from "https://esm.sh/react@18.2.0";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4
5function App() {

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import React, { useEffect, useRef, useState } from "https://esm.sh/react@18.2.0";
4
5const THEMES = {

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import React, { useEffect, useRef, useState } from "https://esm.sh/react@18.2.0";
4
5const THEMES = {

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import React from "https://esm.sh/react@18.2.0";
4
5function LinkInBio() {

1/** @jsxImportSource https://esm.sh/react */
2import { renderToString } from "npm:react-dom/server";
3
4export default async function(req: Request) {

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 { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import React, { useState } from "https://esm.sh/react@18.2.0";
4
5const NO_PHRASES = [

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState, useEffect, useRef } from "https://esm.sh/react@18.2.0";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4
5function App() {

1/** @jsxImportSource https://esm.sh/react */
2// Set to true to disable all editing functionality
3const READ_ONLY = false;
4
5import { nanoid } from "https://esm.sh/nanoid";
6import React from "https://esm.sh/react";
7import { createRoot } from "https://esm.sh/react-dom/client";
8
9interface Song {
17
18function AddSongForm({ onAdd }: { onAdd: (song: Omit<Song, "id" | "created_at">) => void }) {
19  const [url, setUrl] = React.useState("");
20  const [title, setTitle] = React.useState("");
21  const [tag, setTag] = React.useState("");
22  const [isLoading, setIsLoading] = React.useState(false);
23  const [error, setError] = React.useState("");
24
25  const handleSubmit = async (e: React.FormEvent) => {
26    e.preventDefault();
27    setIsLoading(true);
97  },
98) {
99  const [isEditing, setIsEditing] = React.useState(false);
100  const [editUrl, setEditUrl] = React.useState(song.url);
101  const [editTitle, setEditTitle] = React.useState(song.title);
102  const [editTag, setEditTag] = React.useState(song.tag || "");
103  const [isDeleting, setIsDeleting] = React.useState(false);
104  const [isLoading, setIsLoading] = React.useState(false);
105
106  const handleDelete = () => {
113  };
114
115  const handleSubmit = async (e: React.FormEvent) => {
116    e.preventDefault();
117    setIsLoading(true);
190
191function App() {
192  const [songs, setSongs] = React.useState<Song[]>([]);
193  const [sortBy, setSortBy] = React.useState<"date" | "title">("date");
194  const [selectedTag, setSelectedTag] = React.useState<string>("");
195  const [isLoading, setIsLoading] = React.useState(true);
196  const [error, setError] = React.useState("");
197
198  const fetchSongs = async () => {
209  };
210
211  React.useEffect(() => {
212    fetchSongs();
213  }, []);
253  };
254
255  const tags = React.useMemo(() => {
256    const tagSet = new Set(songs.map((s) => s.tag).filter(Boolean));
257    return Array.from(tagSet);
258  }, [songs]);
259
260  const filteredAndSortedSongs = React.useMemo(() => {
261    let filtered = selectedTag ? songs.filter((s) => s.tag === selectedTag) : songs;
262    return [...filtered].sort((a, b) => {