Val Town Code SearchReturn to Val Town

1/** @jsxImportSource https://esm.sh/react@19 */
2import fcsdk from "https://esm.sh/@farcaster/frame-sdk";
3import { useEffect, useState } from "https://esm.sh/react@19";
4import { formatAddress, formatJSON } from "../util/format.ts";
5import { MonoButtonWithStatus, Section } from "./ui.tsx";

1/** @jsxImportSource https://esm.sh/react@19 */
2import { useState } from "https://esm.sh/react@19";
3
4export function Example() {
6    <div class="m-5 mb-8">
7      <h1 class="text-4xl font-semibold mb-2">Mini App Starter</h1>
8      <div class="opacity-50">Hono + React + Tailwind + Farcaster Mini App Starter Project on Val Town</div>
9    </div>
10  );

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0";
3
4/**

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0";
3
4// Convert emoji to codepoint

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0";
3
4// Check if a color is close to white, black, or gray

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import ReactMarkdown from "https://esm.sh/react-markdown@9.0.1?deps=react@18.2.0";
4import React, { useState } from "https://esm.sh/react@18.2.0";
5import { Prism as SyntaxHighlighter } from "https://esm.sh/react-syntax-highlighter@15.5.0?deps=react@18.2.0";
6import { vscDarkPlus } from "https://esm.sh/react-syntax-highlighter@15.5.0/dist/esm/styles/prism?deps=react@18.2.0";
7
8/*******************************************
24## Introduction
25
26This is an example of a markdown article that will be rendered properly using React Markdown.
27
28### Features
76 * Renders markdown content with custom styling
77 *******************************************/
78const MarkdownArticle: React.FC = () => {
79  return (
80    <div className={styles.containers.article}>
81      <ReactMarkdown
82        components={{
83          // Custom rendering for headings
140      >
141        {markdownContent}
142      </ReactMarkdown>
143    </div>
144  );
158 * Showcases various UI components and styles
159 *******************************************/
160const ThemeDemo: React.FC = () => {
161  // Theme state management
162  const [theme, setTheme] = useState(localStorage.getItem("theme") || "retro");
188  
189  // Effect to set the initial theme
190  React.useEffect(() => {
191    document.documentElement.setAttribute("data-theme", theme);
192  }, []);

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import React, { useEffect, useState } from "https://esm.sh/react@18.2.0";
4import bookmarksData from "./hm_links.json" with { type: "json" };
5

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import fcsdk from "https://esm.sh/@farcaster/frame-sdk";
3import { useEffect, useState } from "https://esm.sh/react@18.2.0";
4import { formatAddress, formatJSON, MonoButtonWithStatus, Section } from "./ui.tsx";
5

1import { useState, useEffect } from "https://esm.sh/react@18.2.0?dev";
2import { fetchProjectFiles } from "../utils/api.ts";
3

1import { useChat } from "https://esm.sh/@ai-sdk/react?dev&deps=react@18.2.0&react-dom@18.2.0";
2import React, { useCallback, useMemo, useRef, useState } from "https://esm.sh/react@18.2.0?dev";
3import { playBellSound } from "../utils/soundEffects.ts";
4
99  }, [stop, pendingMessageId, soundEnabled]);
100
101  React.useEffect(() => {
102    customStopRef.current = handleStop;
103  }, [handleStop]);
104
105  React.useEffect(() => {
106    (window as any).customStopRef = customStopRef;
107  }, []);