1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { useEffect, useState } from "https://esm.sh/react@18.2.0";
3import { DemoData, isApiError, isNotionPage } from "../index.tsx";
4import { CheckoutContent } from "./content/checkout/checkout.tsx";
50 // current hash for nav styling
51 const currentHash = useCurrentHash();
52 // a little light logging so we can see that React is connecting the /frontend and the /backend
53 console.log("Current path:", location.pathname);
54 console.log("Demo data:", demoData);
321 };
322
323 // this last return puts the page elements from renderDemoData into a div, which React likes
324 return (
325 <div>
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { useState } from "https://esm.sh/react@18.2.0";
3
4export function CheckoutContent({ data, content }) {
1/** @jsxImportSource npm:react@18.2.0 */
2import type { ReactNode } from "npm:react@18.2.0";
3
4export function Layout({ children }: { children: ReactNode }) {
5 return (
6 <html lang="en">
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import Markdown from "https://esm.sh/react-markdown@9?deps=react@18.2.0";
3import { listFiles, readFile } from "https://esm.town/v/std/utils@85-main/index.ts";
4import { renderToString } from "npm:react-dom@18.2.0/server";
5import { Layout } from "./Layout.tsx";
6
44}
45
46function html(children: React.ReactNode) {
47 return new Response(
48 renderToString(
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 { useState } from "https://esm.sh/react@18.2.0";
3
4export function FormContent({ data, content }) {
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2
3export function IframeContent({ data, content }) {
22โ โโโ index.html # Main application interface
23โ โโโ components/
24โ โ โโโ App.tsx # Main React component
25โ โ โโโ AnalysisTable.tsx # Results display
26โ โโโ style.css # Application styles
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2
3export type ToastTypes =
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import type { TimerState } from "../../shared/types.ts";
3import { Button } from "./Button.tsx";
Hono + React + Tailwind + Farcaster Mini App Starter Project
Write business logic with ease
Meet the new standard for modern TypeScript development.
Type-safe, reactive, framework-agnostic library to manage your business logic.
Follow me if you learn more about JavaScript | TypeScript | React.js | Next.js | Linux | NixOS | Frontend Developer | https://linktr.ee/officialrajdeepsingh
