Val Town Code SearchReturn to Val Town

1/** @jsxImportSource https://esm.sh/react */
2import React, { useState } from "https://esm.sh/react";
3import { createRoot } from "https://esm.sh/react-dom/client";
4import { Light as SyntaxHighlighter } from "https://esm.sh/react-syntax-highlighter";
5import json from "https://esm.sh/react-syntax-highlighter/dist/esm/languages/hljs/json";
6import { docco } from "https://esm.sh/react-syntax-highlighter/dist/esm/styles/hljs";
7
8SyntaxHighlighter.registerLanguage('json', json);

1/** @jsxImportSource https://esm.sh/react */
2import React, { useEffect, useState } from "https://esm.sh/react";
3import { createRoot } from "https://esm.sh/react-dom/client";
4
5function App() {
52      {embedCode && (
53        <div className="result">
54          <h2>Embed Code (Copy and paste this into your React component):</h2>
55          <textarea readOnly value={embedCode} />
56          <p>Current Visitor Count: {visitorCount}</p>
90      const encodedUrl = encodeURIComponent(websiteUrl);
91      const embedCode = `
92import { useState, useEffect } from 'react';
93
94function VisitorCounter() {

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 confetti from "https://esm.sh/canvas-confetti@1.6.0";
5

1/** @jsxImportSource https://esm.sh/react */
2import React, { useState } from "https://esm.sh/react";
3import { createRoot } from "https://esm.sh/react-dom/client";
4import { Light as SyntaxHighlighter } from "https://esm.sh/react-syntax-highlighter";
5import json from "https://esm.sh/react-syntax-highlighter/dist/esm/languages/hljs/json";
6import { docco } from "https://esm.sh/react-syntax-highlighter/dist/esm/styles/hljs";
7
8SyntaxHighlighter.registerLanguage('json', json);

1import { createElement as h, useReducer } from "https://esm.sh/react";
2import { createRoot } from "https://esm.sh/react-dom/client";
3
4let shapes = [

1/** @jsxImportSource https://esm.sh/react */
2import React, { useEffect, useState } from "https://esm.sh/react";
3import { createRoot } from "https://esm.sh/react-dom/client";
4
5function App() {
10  useEffect(() => {
11    // Load the Spline component dynamically
12    import("https://esm.sh/@splinetool/react-spline@2.2.6")
13      .then((module) => {
14        setSplineComponent(() => module.default);

1/** @jsxImportSource https://esm.sh/react */
2import React, { useState, useEffect } from "https://esm.sh/react";
3import { createRoot } from "https://esm.sh/react-dom/client";
4
5// Define our word-picture pairs

1/** @jsxImportSource https://esm.sh/react */
2import React, { useEffect, useState } from "https://esm.sh/react";
3import { createRoot } from "https://esm.sh/react-dom/client";
4
5// Utility function to generate a unique 16-character ID

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

1/** @jsxImportSource https://esm.sh/react */
2import React, { useState } from "https://esm.sh/react";
3import { createRoot } from "https://esm.sh/react-dom/client";
4import { convertRelativeDateToString } from "https://esm.town/v/sarahxc/convertRelativeDateToString";
5
62  const [loading, setLoading] = useState(false);
63
64  const handleSearch = async (e: React.FormEvent) => {
65    e.preventDefault();
66    setLoading(true);