1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState, useEffect } from "https://esm.sh/react@18.2.0";
3import { Category, VocabularyItem, QuizQuestion, QuizResult } from "../../shared/types.ts";
4import { generateQuizQuestions } from "../../shared/utils.ts";
9}
10
11const QuizPage: React.FC<QuizPageProps> = ({ categories, vocabulary }) => {
12 const [selectedCategoryId, setSelectedCategoryId] = useState<number | null>(null);
13 const [quizMode, setQuizMode] = useState<"french-to-english" | "english-to-french">("french-to-english");
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState } from "https://esm.sh/react@18.2.0";
3import { Category, VocabularyItem } from "../../shared/types.ts";
4
10}
11
12const VocabularyPage: React.FC<VocabularyPageProps> = ({
13 categories,
14 vocabulary,
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0";
3import { Category } from "../../shared/types.ts";
4
9}
10
11const HomePage: React.FC<HomePageProps> = ({ categories, onNavigate, onSelectCategory }) => {
12 return (
13 <div className="py-8">
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0";
3
4interface HeaderProps {
7}
8
9const Header: React.FC<HeaderProps> = ({ onNavigate, currentPage }) => {
10 return (
11 <header className="bg-blue-600 text-white p-4 shadow-md">
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 React, { useState, useEffect } from "https://esm.sh/react@18.2.0";
3import { parseProject } from "https://esm.town/v/std/utils@85-main/index.ts";
4import { UserResponse } from "../../shared/types.ts";
32}
33
34const App: React.FC = () => {
35 const [user, setUser] = useState<UserResponse | null>(null);
36 const [loading, setLoading] = useState<boolean>(true);
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4import App from "./components/App.tsx";
5
10const root = createRoot(rootElement);
11root.render(
12 <React.StrictMode>
13 <App />
14 </React.StrictMode>
15);
40 <div id="root"></div>
41
42 <!-- React and dependencies -->
43 <script type="module" src="/frontend/index.tsx"></script>
44</body>
44## Technologies Used
45
46- **Frontend**: React, TailwindCSS
47- **Backend**: Deno, Hono (API framework)
48- **Database**: SQLite
1/** @jsxImportSource https://esm.sh/preact@10.19.6 */
2import {h, FunctionComponent, JSX} from "https://esm.sh/preact@10.19.6"
3import {useState, useEffect} from "https://esm.sh/preact@10.19.6/hooks"
4import {User, Product, ProductDetectionResponse} from "../../shared/types.ts"
5// import * as apiClient from "../apiClient.ts"; // Will be removed
