1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState } from 'https://esm.sh/react@18.2.0';
3
4interface LoginFormProps {
7}
8
9export const LoginForm: React.FC<LoginFormProps> = ({ onLogin, error }) => {
10 const [email, setEmail] = useState('');
11 const [password, setPassword] = useState('');
12 const [isLoading, setIsLoading] = useState(false);
13
14 const handleSubmit = async (e: React.FormEvent) => {
15 e.preventDefault();
16 setIsLoading(true);
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState, useEffect } from 'https://esm.sh/react@18.2.0';
3import { Dashboard } from './components/Dashboard';
4import { LoginForm } from './components/LoginForm';
5import { DashboardData } from '../backend/types';
6
7export const App: React.FC = () => {
8 const [isLoading, setIsLoading] = useState<boolean>(true);
9 const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
38 <div id="app" class="min-h-screen bg-gray-50"></div>
39
40 <!-- React and dependencies -->
41 <script type="module">
42 import React from 'https://esm.sh/react@18.2.0';
43 import ReactDOM from 'https://esm.sh/react-dom@18.2.0';
44 import { App } from '/frontend/index.tsx';
45
46 ReactDOM.render(
47 React.createElement(App),
48 document.getElementById('app')
49 );
15- `frontend/` - Client-side code
16 - `index.html` - Main HTML template
17 - `index.tsx` - Main React component
18 - `components/` - React components
19 - `Dashboard.tsx` - Main dashboard component
20 - `QuizList.tsx` - Quiz list component
33
34- **Technologies Used**
35 - React for UI components and state management
36 - TailwindCSS for styling
37 - LocalStorage API for data persistence
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import { Link } from "react-router";
3import { useProjects } from "../hooks/useProjects.tsx";
4import { Loading } from "./Loading.tsx";
159 {
160 "imports": {
161 "react": "https://esm.sh/react@18.2.0?dev",
162 "react-dom": "https://esm.sh/react-dom@18.2.0/client?dev",
163 "react-router": "https://esm.sh/react-router@7.4.0?dev&deps=react@18.2.0&react-dom@18.2.0",
164 "react-use": "https://esm.sh/react-use?dev&deps=react@18.2.0&react-dom@18.2.0",
165 "@ai-sdk/react": "https://esm.sh/@ai-sdk/react?dev&deps=react@18.2.0&react-dom@18.2.0",
166 "react-markdown": "https://esm.sh/react-markdown?dev&deps=react@18.2.0&react-dom@18.2.0"
167 }
168 }
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import { useEffect, useContext } from "react";
3import { Link, useNavigate } from "react-router";
4import { useLocalStorage } from "react-use";
5import { Circle, Volume2Icon, VolumeOffIcon } from "./icons.tsx";
6import { AppContext } from "./App.tsx";
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/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import { useState, useEffect, useContext, createContext } from "react";
3import { useParams } from "react-router";
4
5import { AppContext } from "./App.tsx";
