Val Town Code SearchReturn to Val Town

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from 'https://esm.sh/react@18.2.0';
3import { createRoot } from 'https://esm.sh/react-dom@18.2.0/client';
4import App from './App.jsx';
5
6const root = createRoot(document.getElementById('root'));
7root.render(
8  <React.StrictMode>
9    <App />
10  </React.StrictMode>
11);

125        </div>
126        <div class="bg-white p-6 rounded-lg shadow-md text-center">
127          <i class="fab fa-react text-4xl text-blue-400 mb-4"></i>
128          <h3 class="text-xl font-semibold">React</h3>
129        </div>
130        <div class="bg-white p-6 rounded-lg shadow-md text-center">
162            <p class="text-gray-600 mb-4">A fully responsive e-commerce platform with product catalog, shopping cart, and payment integration.</p>
163            <div class="flex flex-wrap gap-2 mb-4">
164              <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded">React</span>
165              <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded">Node.js</span>
166              <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded">MongoDB</span>

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import {
4  BrowserRouter as Router,
9  useNavigate,
10  useParams,
11} from "https://esm.sh/react-router-dom@6.11.2?deps=react@18.2.0";
12import React, { createContext, useContext, useEffect, useState } from "https://esm.sh/react@18.2.0";
13
14// --- Sync ID Management ---

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?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 {
3  ClerkProvider,
9  UserButton,
10  useUser,
11} from "https://esm.sh/@clerk/clerk-react?bundle-deps&deps=react@18.2.0";
12import { clerkMiddleware, getAuth } from "https://esm.sh/@hono/clerk-auth?bundle-deps&deps=react@18.2.0";
13import { id, init, lookup, tx } from "https://esm.sh/@instantdb/react@0.18.1?bundle-deps&deps=react@18.2.0";
14import {
15  IconChevronDown,
25  IconUser,
26  IconX,
27} from "https://esm.sh/@tabler/icons-react?deps=react@18.2.0";
28import useEmblaCarousel, { EmblaCarouselType } from "https://esm.sh/embla-carousel-react@8.0.0-rc07?deps=react@18.2.0";
29import { Hono } from "https://esm.sh/hono?bundle-deps&deps=react@18.2.0";
30import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
31import { renderToString } from "https://esm.sh/react-dom@18.2.0/server";
32import {
33  BrowserRouter,
37  useLocation,
38  useParams,
39} from "https://esm.sh/react-router-dom?deps=react@18.2.0";
40import React, { useCallback, useEffect, useMemo, useRef, useState } from "https://esm.sh/react@18.2.0";
41import { toast, Toaster } from "https://esm.sh/sonner?deps=react@18.2.0";
42import { Drawer } from "https://esm.sh/vaul?deps=react@18.2.0,react-dom@18.2.0";
43
44function SideDrawer({ trigger, title, content, initialOpen = false }: {
45  trigger: React.JSX.Element;
46  title: string;
47  content: (setOpen: React.Dispatch<React.SetStateAction<boolean>>) => React.JSX.Element;
48  initialOpen?: boolean;
49}) {
50  const [open, setOpen] = React.useState(initialOpen);
51
52  return (
75
76function BottomDrawer({ trigger, title, content, initialOpen = false }: {
77  trigger: React.JSX.Element;
78  title: string;
79  content: (setOpen: React.Dispatch<React.SetStateAction<boolean>>) => React.JSX.Element;
80  initialOpen?: boolean;
81}) {
82  const [open, setOpen] = React.useState(initialOpen);
83
84  return (
127  const getQuantity = () => product?.cartItems?.[0]?.quantity || 0;
128
129  const handleDecreaseQuantity = async (e: React.MouseEvent) => {
130    e.stopPropagation();
131
151  };
152
153  const handleIncreaseQuantity = async (e: React.MouseEvent) => {
154    e.stopPropagation();
155
285    product: any;
286    activeProductId: string | null;
287    setActiveProductId: React.Dispatch<React.SetStateAction<string>>;
288  },
289) {
311  }, [isActive, setActiveProductId]);
312
313  const handleButtonClick = async (e: React.MouseEvent) => {
314    e.stopPropagation();
315
326  };
327
328  const handleQuantitySelectorClick = (e: React.MouseEvent) => {
329    e.stopPropagation();
330  };
331
332  const handleDecreaseQuantity = async (e: React.MouseEvent) => {
333    e.stopPropagation();
334
355  };
356
357  const handleIncreaseQuantity = async (e: React.MouseEvent) => {
358    e.stopPropagation();
359
439}
440
441function ProductCarousel({ children }: { children: React.ReactNode }) {
442  const [emblaRef, emblaApi] = useEmblaCarousel({
443    axis: "x",
1190
1191app.get("*", async (c) => {
1192  const { id, init, lookup, tx } = await import("https://esm.sh/@instantdb/admin@0.19.2?bundle-deps&deps=react@18.2.0");
1193  const db = init({
1194    appId: "880cb820-b987-4019-9b0a-7805721e74d2",

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState } from "https://esm.sh/react@18.2.0";
3import { Interaction, InteractionType } from "../../shared/types.ts";
4
17
18  const handleChange = (
19    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
20  ) => {
21    const { name, value } = e.target;
47  };
48
49  const handleSubmit = (e: React.FormEvent) => {
50    e.preventDefault();
51    

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState, useEffect } from "https://esm.sh/react@18.2.0";
3import { Contact, Interaction, InteractionType } from "../../shared/types.ts";
4import InteractionForm from "./InteractionForm.tsx";

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState } from "https://esm.sh/react@18.2.0";
3import { Contact } from "../../shared/types.ts";
4
20  const [errors, setErrors] = useState<Record<string, string>>({});
21
22  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
23    const { name, value } = e.target;
24    setFormData(prev => ({ ...prev, [name]: value }));
49  };
50
51  const handleSubmit = (e: React.FormEvent) => {
52    e.preventDefault();
53    

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0";
3import { Contact } from "../../shared/types.ts";
4