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@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";
4
5// เฆจเฆคเงเฆจ NoInternetPage เฆเฆฎเงเฆชเงเฆจเงเฆจเงเฆ
26โ โโโ index.html # Main application
27โ โโโ components/
28โ โ โโโ App.tsx # Main React component
29โ โ โโโ LessonViewer.tsx # Lesson display
30โ โ โโโ CodeEditor.tsx # Python code editor
57
58- **Backend**: Hono (TypeScript) for API routes
59- **Frontend**: React with TypeScript
60- **Database**: SQLite for progress tracking
61- **Styling**: TailwindCSS for responsive design
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { array } from "https://esm.sh/@types/prop-types@15.7.14/index";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4import React, { createRef, useEffect, useRef, useState } from "https://esm.sh/react@18.2.0";
5
6const quoteCount = 3186;
340 const [isRevealed, setIsRevealed] = useState(false);
341 const [currentFocusIndex, setCurrentFocusIndex] = useState<number | null>(null);
342 const inputRefs = useRef<React.RefObject<HTMLInputElement>[]>([]);
343 const [copied, setCopied] = useState(false);
344 const [knownTextsShown, setKnownTextsShown] = useState(false);
488 };
489
490 const handleKeyDown = (index: number, event: React.KeyboardEvent<HTMLInputElement>) => {
491 if (!cipher) return;
492
46
47- Backend: Hono.js with SQLite
48- Frontend: React with TypeScript
49- Styling: TailwindCSS
50- Authentication: Session-based with cookies
58 <div id="root"></div>
59
60 <!-- React and app scripts -->
61 <script type="module" src="/frontend/index.tsx"></script>
62</body>
1# TravelEase - Complete Travel Booking Website
2
3A comprehensive travel booking platform built with React, Hono, and SQLite on Val Town.
4
5## Features
32โ โ โโโ Layout/ # Header, Footer, Navigation
33โ โโโ index.html # Main HTML template
34โ โโโ index.tsx # React entry point
35โ โโโ style.css # Custom styles
36โโโ shared/
49## Tech Stack
50
51- **Frontend**: React 18.2.0 with TypeScript
52- **Backend**: Hono framework
53- **Database**: SQLite
57## Getting Started
58
59The main entry point is `/backend/index.ts` which serves the React frontend and API routes.
21
22- **Backend**: Hono.js API with Together AI integration
23- **Frontend**: React with TypeScript
24- **AI**: Together AI for content analysis and generation
25- **Storage**: Val Town Blob for file handling
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { useState, useRef } from "https://esm.sh/react@18.2.0";
3import type { AppState, UploadResponse } from "../../shared/types.ts";
4
13 const fileInputRef = useRef<HTMLInputElement>(null);
14
15 const handleDragOver = (e: React.DragEvent) => {
16 e.preventDefault();
17 setDragOver(true);
18 };
19
20 const handleDragLeave = (e: React.DragEvent) => {
21 e.preventDefault();
22 setDragOver(false);
23 };
24
25 const handleDrop = (e: React.DragEvent) => {
26 e.preventDefault();
27 setDragOver(false);
48 };
49
50 const handleFileInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
51 const files = e.target.files;
52 if (files && files.length > 0) {
