1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import React, { createContext, useState } from "react";
3import { BrowserRouter, Link, Navigate, Outlet, Route, Routes, useLocation } from "react-router";
4import { useLocalStorage } from "react-use";
5import { useUser } from "../hooks/useUser.tsx";
6import { ChatRouteSingleColumn } from "./ChatRouteSingleColumn.tsx";
1# Frontend
2
3React-based frontend for the Football Live Scores app.
4
5## Components
38## State Management
39
40- React hooks (useState, useEffect)
41- Auto-refresh logic for live matches
42- Error handling and loading states
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client?deps=react@18.2.0";
4import App from "./components/App.tsx";
5
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 */
2
3import type { Match } from "../../shared/types.ts";
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2
3interface LoadingSpinnerProps {
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 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">
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
