1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import {
3 Outlet,
4 Navigate,
5 useLocation,
6} from "https://esm.sh/react-router@7?dev&deps=react@18.2.0&react-dom@18.2.0";
7import { useAuth } from "../hooks/useAuth.tsx";
8
46
47OpenTownie is built with:
48- React frontend with TypeScript
49- React Router
50- Hono API server backend
51- Web Audio API for sound notifications
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import { Link } from "https://esm.sh/react-router@7?dev&deps=react@18.2.0&react-dom@18.2.0";
3import { useProjects } from "../hooks/useProjects.tsx";
4import { Loading } from "./Loading.tsx";
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import { useLocalStorage } from "https://esm.sh/react-use?dev&deps=react@18.2.0&react-dom@18.2.0";
3import React, { useEffect, useRef, useState } from "https://esm.sh/react@18.2.0?dev";
4import { RefreshIcon } from "./icons.tsx";
5
39 }, [messages, running, currentEndpoint, customPath]);
40
41 const handleEndpointChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
42 setSelectedEndpointIndex(Number(e.target.value));
43 };
44
45 const handlePathChange = (e: React.ChangeEvent<HTMLInputElement>) => {
46 setCustomPath(e.target.value);
47 };
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import { useRef, useEffect, useState } from "https://esm.sh/react@18.2.0?dev";
3import { RefreshIcon } from "./icons.tsx";
4
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2
3export function NotFoundRoute () {
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import { useState } from "https://esm.sh/react@18.2.0?dev";
3import { useNavigate } from "https://esm.sh/react-router@7?dev&deps=react@18.2.0&react-dom@18.2.0";
4import { useCreateProject } from "../hooks/useCreateProject.tsx";
5
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import { useEffect, useState } from "https://esm.sh/react@18.2.0?dev";
3
4const formatTime = (ms: number): string => {
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import ReactMarkdown from "https://esm.sh/react-markdown?dev&deps=react@18.2.0&react-dom@18.2.0";
3
4import { Loading } from "./Loading.tsx";
102function TextPart ({ part }) {
103 return (
104 <ReactMarkdown>
105 {part.text}
106 </ReactMarkdown>
107 );
108}
227 {message.parts.map((part, i) => part.type === "text" ? (
228 <div key={i} className="user-message">
229 <ReactMarkdown>
230 {part.text}
231 </ReactMarkdown>
232 </div>
233 ) : (
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import { useState, useEffect } from "https://esm.sh/react@18.2.0?dev";
3import { useNavigate } from "https://esm.sh/react-router@7?dev&deps=react@18.2.0&react-dom@18.2.0";
4import { useAuth } from "../hooks/useAuth.tsx";
5
Starter template with client-side React & Hono server
A web-based dice roller using React on Val Town
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