[V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { BrowserRouter as Router, Routes, Route, Navigate } from "react-router-dom" import { ThemeProvider, CssBaseline, Box } from "@mui/material" import { QuizProvider } from "./contexts/QuizContext" import { ThemeContextProvider, useThemeContext } from "./contexts/ThemeContext" import Dashboard from "./pages/Dashboard" import MyQuizzes from "./pages/MyQuizzes" import QuizDetail from "./pages/QuizDetail" import MedusaAI from "./pages/MedusaAI" import Settings from "./pages/Settings" import BottomNav from "./components/BottomNav" function AppContent() { const { theme } = useThemeContext() return ( } /> } /> } /> } /> } /> } /> ) } export default function App() { return ( ) } [V0_FILE]typescriptreact:file="app/contexts/ThemeContext.tsx" "use client" import { createContext, useContext, useState, useEffect, type ReactNode } from "react" import { createTheme, type Theme } from "@mui/material/styles" const lightTheme = createTheme({ palette: { mode: "light", primary: { main: "#6750a4" }, secondary: { main: "#625b71" }, background: { default: "#f7f2fa", paper: "#fff" }, text: { primary: "#1c1b1f", secondary: "#49454f" }, }, shape: { borderRadius: 16 }, components: { MuiCard: { styleOverrides: { root: { boxShadow: "0 2px 8px rgba(0,0,0,0.1)", "&:hover": { boxShadow: "0 4px 16px rgba(0,0,0,0.15)", }, }, }, }, }, }) const darkTheme = createTheme({ palette: { mode: "dark", primary: { main: "#d0bcff" }, secondary: { main: "#ccc2dc" }, background: { default: "#1c1b1f", paper: "#2c2935" }, text: { primary: "#e6e1e5", secondary: "#c9c5ca" }, }, shape: { borderRadius: 16 }, components: { MuiCard: { styleOverrides: { root: { boxShadow: "0 2px 8px rgba(0,0,0,0.3)", "&:hover": { boxShadow: "0 4px 16px rgba(0,0,0,0.4)", }, }, }, }, }, }) interface ThemeContextType { theme: Theme isDarkMode: boolean toggleTheme: () => void } const ThemeContext = createContext(undefined) export function ThemeContextProvider({ children }: { children: ReactNode }) { const [isDarkMode, setIsDarkMode] = useState(false) useEffect(() => { const savedTheme = localStorage.getItem("theme") if (savedTheme) { setIsDarkMode(savedTheme === "dark") } }, []) const toggleTheme = () => { const newMode = !isDarkMode setIsDarkMode(newMode) localStorage.setItem("theme", newMode ? "dark" : "light") } const theme = isDarkMode ? darkTheme : lightTheme return {children} } export function useThemeContext() { const context = useContext(ThemeContext) if (!context) { throw new Error("useThemeContext must be used within ThemeContextProvider") } return context } [V0_FILE]typescriptreact:file="app/contexts/QuizContext.tsx" "use client" import { createContext, useContext, useState, type ReactNode } from "react" export interface Quiz { id: string title: string description: string difficulty: "easy" | "medium" | "hard" status: "Active" | "Inactive" type: "manual" | "auto" timePerQuestion: number pointsPerQuestion: number order: "fixed" | "random" timesPlayed: number avgScore: number totalPlayers: number participantLimit: number createdAt: string host?: string } interface QuizContextType { quizzes: Quiz[] activeQuizzes: Quiz[] getQuizById: (id: string) => Quiz | undefined } const QuizContext = createContext(undefined) const sampleQuizzes: Quiz[] = [ { id: "1", title: "Flutter Basics", description: "Learn the fundamentals of Flutter development", difficulty: "medium", status: "Active", type: "manual", timePerQuestion: 30, pointsPerQuestion: 500, order: "fixed", timesPlayed: 45, avgScore: 78, totalPlayers: 120, participantLimit: 50, createdAt: "2024-01-15", host: "Alice Johnson", }, { id: "2", title: "React Advanced Concepts", description: "Deep dive into React hooks, context, and performance", difficulty: "hard", status: "Active", type: "auto", timePerQuestion: 45, pointsPerQuestion: 750, order: "random", timesPlayed: 23, avgScore: 65, totalPlayers: 89, participantLimit: 30, createdAt: "2024-01-10", host: "Bob Smith", }, { id: "3", title: "JavaScript Fundamentals", description: "Master the basics of JavaScript programming", difficulty: "easy", status: "Inactive", type: "manual", timePerQuestion: 20, pointsPerQuestion: 300, order: "fixed", timesPlayed: 156, avgScore: 82, totalPlayers: 245, participantLimit: 100, createdAt: "2024-01-05", host: "Carol Davis", }, ] export function QuizProvider({ children }: { children: ReactNode }) { const [quizzes] = useState(sampleQuizzes) const activeQuizzes = quizzes.filter((quiz) => quiz.status === "Active") const getQuizById = (id: string) => quizzes.find((quiz) => quiz.id === id) return {children} } export function useQuizContext() { const context = useContext(QuizContext) if (!context) { throw new Error("useQuizContext must be used within QuizProvider") } return context } [V0_FILE]typescriptreact:file="app/components/BottomNav.tsx" "use client" import type React from "react" import { useLocation, useNavigate } from "react-router-dom" import { BottomNavigation, BottomNavigationAction, Paper } from "@mui/material" import { Dashboard, Quiz, SmartToy, Settings } from "@mui/icons-material" export default function BottomNav() { const location = useLocation() const navigate = useNavigate() const getValue = () => { const path = location.pathname if (path === "/dashboard") return 0 if (path === "/myquizzes") return 1 if (path === "/medusa-ai") return 2 if (path === "/settings") return 3 return 0 } const handleChange = (event: React.SyntheticEvent, newValue: number) => { const routes = ["/dashboard", "/myquizzes", "/medusa-ai", "/settings"] navigate(routes[newValue]) } return ( } /> } /> } /> } /> ) } [V0_FILE]typescriptreact:file="app/components/QuizCard.tsx" "use client" import { useNavigate } from "react-router-dom" import { Card, CardContent, Typography, Box, Chip } from "@mui/material" import { ChevronRight, FlashOn, Timer, Star } from "@mui/icons-material" import type { Quiz } from "../contexts/QuizContext" interface QuizCardProps { quiz: Quiz variant?: "active" | "detailed" } export default function QuizCard({ quiz, variant = "detailed" }: QuizCardProps) { const navigate = useNavigate() const handleClick = () => { navigate(`/quiz/${quiz.id}`) } const getDifficultyColor = (difficulty: string) => { switch (difficulty) { case "easy": return "success" case "medium": return "warning" case "hard": return "error" default: return "default" } } if (variant === "active") { return ( {quiz.title} Hosted by: {quiz.host} ) } return ( {quiz.title} {quiz.description} } label={quiz.difficulty} color={getDifficultyColor(quiz.difficulty) as any} size="small" /> {quiz.timePerQuestion}s per question {quiz.pointsPerQuestion} points/question ) } [V0_FILE]typescriptreact:file="app/pages/Dashboard.tsx" "use client" import { useState } from "react" import { Container, Typography, Box, TextField, Button, Grid, Alert } from "@mui/material" import { useQuizContext } from "../contexts/QuizContext" import QuizCard from "../components/QuizCard" export default function Dashboard() { const [lobbyCode, setLobbyCode] = useState("") const [showAlert, setShowAlert] = useState(false) const { activeQuizzes } = useQuizContext() const handleJoinLobby = () => { if (lobbyCode.trim()) { setShowAlert(true) setTimeout(() => setShowAlert(false), 3000) setLobbyCode("") } } return ( Dashboard {showAlert && ( Attempting to join lobby with code: {lobbyCode} )} setLobbyCode(e.target.value)} sx={{ flexGrow: 1, minWidth: 200 }} /> Active Quizzes (Waiting to Start) {activeQuizzes.map((quiz) => ( ))} {activeQuizzes.length === 0 && ( No active quizzes at the moment )} ) } [V0_FILE]typescriptreact:file="app/pages/MyQuizzes.tsx" "use client" import { useState } from "react" import { Container, Typography, Box, Button, Grid, Alert } from "@mui/material" import { Add } from "@mui/icons-material" import { useQuizContext } from "../contexts/QuizContext" import QuizCard from "../components/QuizCard" export default function MyQuizzes() { const [showAlert, setShowAlert] = useState(false) const { quizzes } = useQuizContext() const handleAddNewQuiz = () => { setShowAlert(true) setTimeout(() => setShowAlert(false), 3000) } return ( My Quizzes {showAlert && ( Add new quiz functionality would open here )} {quizzes.map((quiz) => ( ))} {quizzes.length === 0 && ( No quizzes created yet )} ) } [V0_FILE]typescriptreact:file="app/pages/QuizDetail.tsx" "use client" import { useState } from "react" import { useParams, useNavigate } from "react-router-dom" import { Container, Typography, Box, IconButton, Card, CardContent, Chip, Grid, Paper, Button, Alert, } from "@mui/material" import { ArrowBack, Delete, Visibility, Edit, PlayArrow } from "@mui/icons-material" import { useQuizContext } from "../contexts/QuizContext" export default function QuizDetail() { const { quizId } = useParams<{ quizId: string }>() const navigate = useNavigate() const { getQuizById } = useQuizContext() const [showAlert, setShowAlert] = useState("") const quiz = quizId ? getQuizById(quizId) : undefined if (!quiz) { return ( Quiz not found ) } const handleAction = (action: string) => { setShowAlert(`${action} action triggered for ${quiz.title}`) setTimeout(() => setShowAlert(""), 3000) } const getDifficultyColor = (difficulty: string) => { switch (difficulty) { case "easy": return "success" case "medium": return "warning" case "hard": return "error" default: return "default" } } return ( navigate(-1)}> {quiz.title} handleAction("Delete")}> {showAlert && ( {showAlert} )} {quiz.title} {quiz.description} Type {quiz.type} Time per Question {quiz.timePerQuestion} sec Order {quiz.order} Points per Question {quiz.pointsPerQuestion} Times Played {quiz.timesPlayed} Avg. Score {quiz.avgScore}% Total Players {quiz.totalPlayers} Participant Limit {quiz.participantLimit} Created At {quiz.createdAt} ) } [V0_FILE]typescriptreact:file="app/pages/MedusaAI.tsx" "use client" import type React from "react" import { useState } from "react" import { Container, Typography, Box, Card, CardContent, TextField, Button, Input, Alert } from "@mui/material" import { AutoAwesome, CloudUpload } from "@mui/icons-material" export default function MedusaAI() { const [prompt, setPrompt] = useState("") const [filePrompt, setFilePrompt] = useState("") const [selectedFile, setSelectedFile] = useState(null) const [showAlert, setShowAlert] = useState("") const handleGenerateFromPrompt = () => { if (prompt.trim()) { setShowAlert(`Generating quiz from prompt: "${prompt}"`) setTimeout(() => setShowAlert(""), 3000) setPrompt("") } } const handleGenerateFromFile = () => { if (selectedFile) { setShowAlert(`Generating quiz from file: ${selectedFile.name}`) setTimeout(() => setShowAlert(""), 3000) setSelectedFile(null) setFilePrompt("") } } const handleFileChange = (event: React.ChangeEvent) => { const file = event.target.files?.[0] if (file && (file.type === "application/pdf" || file.type === "text/csv")) { setSelectedFile(file) } } return ( Medusa AI {showAlert && ( {showAlert} )} Enter Your Prompt setPrompt(e.target.value)} sx={{ mb: 3 }} /> Upload PDF or CSV {selectedFile && ( Selected: {selectedFile.name} )} setFilePrompt(e.target.value)} sx={{ mb: 3 }} /> ) } [V0_FILE]typescriptreact:file="app/pages/Settings.tsx" "use client" import { Container, Typography, Box, Card, CardContent, Switch, FormControlLabel } from "@mui/material" import { useThemeContext } from "../contexts/ThemeContext" export default function Settings() { const { isDarkMode, toggleTheme } = useThemeContext() return ( Settings Appearance } label="Dark Mode" /> More Features Additional settings and features coming soon... ) } [V0_FILE]json:file="package.json" { "name": "material-quiz-app", "version": "0.1.0", "private": true, "dependencies": { "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", "@mui/icons-material": "^5.15.0", "@mui/material": "^5.15.0", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "next": "14.0.4", "react": "^18", "react-dom": "^18", "react-router-dom": "^6.20.0", "typescript": "^5" }, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "eslintConfig": { "extends": ["next/core-web-vitals"] } }