[V0_FILE]typescriptreact:file="app/profile/page.tsx" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" import { Progress } from "@/components/ui/progress" import { ArrowLeft, Award, Calendar, Flame, Languages, Settings, Trophy, User } from "lucide-react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" export default function ProfilePage() { return (

Profile

John Doe

Learning Spanish

Stats Achievements Settings Current Streak

5 days

Keep it up! You're doing great.

Weekly Progress

{["M", "T", "W", "T", "F", "S", "S"].map((day, i) => (

{day}

))} {[true, true, true, true, true, false, false].map((completed, i) => (

{completed && }

))}

5/7 days completed Goal: 20 min/day

Speaking Skills

Pronunciation 75%

Fluency 60%

Vocabulary 80%

Achievements

{[ { name: "First Lesson", icon: Trophy, unlocked: true }, { name: "5 Day Streak", icon: Flame, unlocked: true }, { name: "Perfect Pronunciation", icon: Languages, unlocked: false }, { name: "Conversation Master", icon: Award, unlocked: false }, { name: "30 Day Streak", icon: Calendar, unlocked: false }, { name: "Vocabulary Expert", icon: Award, unlocked: false }, ].map((achievement, index) => (

{achievement.name} {!achievement.unlocked && Locked}

))}

Language Settings

Learning Language

Native Language

Daily Goal

Notification Settings

Daily Reminders

Weekly Progress

Achievement Alerts

) } [V0_FILE]typescriptreact:file="app/components/unit-progress.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { ChevronDown, ChevronUp } from "lucide-react" import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible" import { Progress } from "@/components/ui/progress" interface UnitProgressProps { title: string level: string progress: number totalLessons: number completedLessons: number } export function UnitProgress({ title, level, progress, totalLessons, completedLessons }: UnitProgressProps) { const [isOpen, setIsOpen] = useState(false) return (

{title}

{level}

{completedLessons}/{totalLessons}

lessons

Speaking Score

{Math.round(progress * 0.8)}%

Vocabulary

{Math.round(progress * 1.1)}%

Recent Activity

Last lesson completed 2 days ago

) } [V0_FILE]typescriptreact:file="app/progress/page.tsx" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" import { ArrowLeft, BarChart3 } from "lucide-react" import { UnitProgress } from "../components/unit-progress" export default function ProgressPage() { return (

Learning Progress

{/* Spacer for alignment */}

Overall Progress

You've completed 12% of all lessons

Beginner Units

Intermediate Units

Advanced Units

) } [V0_FILE]typescriptreact:file="app/components/exercise-types/multiple-choice.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { CheckCircle2, XCircle } from "lucide-react" interface MultipleChoiceProps { question: string options: string[] correctAnswer: string onComplete: (isCorrect: boolean) => void } export function MultipleChoice({ question, options, correctAnswer, onComplete }: MultipleChoiceProps) { const [selectedOption, setSelectedOption] = useState(null) const [isSubmitted, setIsSubmitted] = useState(false) const isCorrect = selectedOption === correctAnswer const handleSubmit = () => { if (!selectedOption) return setIsSubmitted(true) onComplete(isCorrect) } return (

{question}

{options.map((option) => (

!isSubmitted && setSelectedOption(option)} className={`p-4 rounded-lg border cursor-pointer transition-all ${ selectedOption === option ? isSubmitted ? isCorrect ? "bg-green-100 border-green-500 dark:bg-green-900/20 dark:border-green-500" : option === correctAnswer ? "bg-green-100 border-green-500 dark:bg-green-900/20 dark:border-green-500" : "bg-red-100 border-red-500 dark:bg-red-900/20 dark:border-red-500" : "bg-primary/10 border-primary" : isSubmitted && option === correctAnswer ? "bg-green-100 border-green-500 dark:bg-green-900/20 dark:border-green-500" : "bg-background hover:bg-muted/50" }`} >

{option} {isSubmitted && (option === correctAnswer ? ( ) : selectedOption === option ? ( ) : null)}

))}

{!isSubmitted && ( )} {isSubmitted && (

{isCorrect ? "Correct! Well done." : `Incorrect. The correct answer is "${correctAnswer}".`}

)}

) } [V0_FILE]typescriptreact:file="app/components/exercise-types/matching-exercise.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Shuffle } from "lucide-react" interface MatchingPair { id: string term: string definition: string } interface MatchingExerciseProps { pairs: MatchingPair[] onComplete: (score: number) => void } export function MatchingExercise({ pairs, onComplete }: MatchingExerciseProps) { const [terms, setTerms] = useState<(MatchingPair & { selected: boolean })[]>([]) const [definitions, setDefinitions] = useState<(MatchingPair & { selected: boolean })[]>([]) const [selectedTerm, setSelectedTerm] = useState(null) const [selectedDefinition, setSelectedDefinition] = useState(null) const [matches, setMatches] = useState([]) const [isComplete, setIsComplete] = useState(false) // Initialize and shuffle useEffect(() => { const termsWithSelected = pairs.map((pair) => ({ ...pair, selected: false })) const definitionsWithSelected = [...termsWithSelected] // Shuffle definitions for (let i = definitionsWithSelected.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)) ;[definitionsWithSelected[i], definitionsWithSelected[j]] = [ definitionsWithSelected[j], definitionsWithSelected[i], ] } setTerms(termsWithSelected) setDefinitions(definitionsWithSelected) }, [pairs]) const handleTermClick = (id: string) => { if (matches.includes(id) || isComplete) return setSelectedTerm(id) setTerms( terms.map((term) => ({ ...term, selected: term.id === id, })), ) // If definition already selected, check for match if (selectedDefinition) { const matchingTerm = terms.find((term) => term.id === id) const matchingDef = definitions.find((def) => def.id === selectedDefinition) if (matchingTerm && matchingDef && matchingTerm.id === matchingDef.id) { // Match found setMatches([...matches, id]) setSelectedTerm(null) setSelectedDefinition(null) } else { // No match, reset selection after delay setTimeout(() => { setSelectedTerm(null) setSelectedDefinition(null) setTerms(terms.map((term) => ({ ...term, selected: false }))) setDefinitions(definitions.map((def) => ({ ...def, selected: false }))) }, 1000) } } } const handleDefinitionClick = (id: string) => { if (matches.includes(id) || isComplete) return setSelectedDefinition(id) setDefinitions( definitions.map((def) => ({ ...def, selected: def.id === id, })), ) // If term already selected, check for match if (selectedTerm) { const matchingTerm = terms.find((term) => term.id === selectedTerm) const matchingDef = definitions.find((def) => def.id === id) if (matchingTerm && matchingDef && matchingTerm.id === matchingDef.id) { // Match found setMatches([...matches, id]) setSelectedTerm(null) setSelectedDefinition(null) } else { // No match, reset selection after delay setTimeout(() => { setSelectedTerm(null) setSelectedDefinition(null) setTerms(terms.map((term) => ({ ...term, selected: false }))) setDefinitions(definitions.map((def) => ({ ...def, selected: false }))) }, 1000) } } } // Check if exercise is complete useEffect(() => { if (matches.length === pairs.length && !isComplete) { setIsComplete(true) onComplete(matches.length) } }, [matches, pairs, isComplete, onComplete]) const resetExercise = () => { const termsWithSelected = pairs.map((pair) => ({ ...pair, selected: false })) const definitionsWithSelected = [...termsWithSelected] // Shuffle definitions for (let i = definitionsWithSelected.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)) ;[definitionsWithSelected[i], definitionsWithSelected[j]] = [ definitionsWithSelected[j], definitionsWithSelected[i], ] } setTerms(termsWithSelected) setDefinitions(definitionsWithSelected) setSelectedTerm(null) setSelectedDefinition(null) setMatches([]) setIsComplete(false) } return (

Match the pairs

Terms

{terms.map((term) => (

handleTermClick(term.id)} className={`p-3 rounded-lg border transition-all ${ matches.includes(term.id) ? "bg-green-100 border-green-500 dark:bg-green-900/20 dark:border-green-500" : term.selected ? "bg-primary/10 border-primary" : "bg-background hover:bg-muted/50 cursor-pointer" }`} > {term.term}

))}

Definitions

{definitions.map((definition) => (

handleDefinitionClick(definition.id)} className={`p-3 rounded-lg border transition-all ${ matches.includes(definition.id) ? "bg-green-100 border-green-500 dark:bg-green-900/20 dark:border-green-500" : definition.selected ? "bg-primary/10 border-primary" : "bg-background hover:bg-muted/50 cursor-pointer" }`} > {definition.definition}

))}

{isComplete && (

Great job! You've matched all the pairs correctly.

)}

) } [V0_FILE]typescriptreact:file="app/components/exercise-types/audio-exercise.tsx" isMerged="true" "use client" import { useState, useRef, useEffect } from "react" import { Button } from "@/components/ui/button" import { Mic, MicOff, Play, Pause, RotateCcw } from "lucide-react" import { Slider } from "@/components/ui/slider" interface AudioExerciseProps { audioSrc: string transcript: string translation?: string onComplete: () => void } export function AudioExercise({ audioSrc, transcript, translation, onComplete }: AudioExerciseProps) { const [isPlaying, setIsPlaying] = useState(false) const [currentTime, setCurrentTime] = useState(0) const [duration, setDuration] = useState(0) const [isRecording, setIsRecording] = useState(false) const [userTranscript, setUserTranscript] = useState("") const [hasCompleted, setHasCompleted] = useState(false) const audioRef = useRef(null) const recognitionRef = useRef(null) // Initialize audio useEffect(() => { audioRef.current = new Audio(audioSrc) audioRef.current.addEventListener("loadedmetadata", () => { if (audioRef.current) { setDuration(audioRef.current.duration) } }) audioRef.current.addEventListener("timeupdate", () => { if (audioRef.current) { setCurrentTime(audioRef.current.currentTime) } }) audioRef.current.addEventListener("ended", () => { setIsPlaying(false) }) return () => { if (audioRef.current) { audioRef.current.pause() audioRef.current.src = "" } } }, [audioSrc]) // Initialize speech recognition useEffect(() => { if (typeof window !== "undefined" && ("SpeechRecognition" in window || "webkitSpeechRecognition" in window)) { const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition recognitionRef.current = new SpeechRecognition() recognitionRef.current.continuous = true recognitionRef.current.interimResults = true recognitionRef.current.lang = "en-US" recognitionRef.current.onresult = (event: any) => { const transcript = Array.from(event.results) .map((result: any) => result[0]) .map((result) => result.transcript) .join("") setUserTranscript(transcript) } recognitionRef.current.onerror = (event: any) => { console.error("Speech recognition error", event.error) setIsRecording(false) } recognitionRef.current.onend = () => { setIsRecording(false) } } return () => { if (recognitionRef.current) { recognitionRef.current.stop() } } }, []) const togglePlayPause = () => { if (!audioRef.current) return if (isPlaying) { audioRef.current.pause() } else { audioRef.current.play() } setIsPlaying(!isPlaying) } const handleSliderChange = (value: number[]) => { if (!audioRef.current) return const newTime = value[0] audioRef.current.currentTime = newTime setCurrentTime(newTime) } const formatTime = (time: number) => { const minutes = Math.floor(time / 60) const seconds = Math.floor(time % 60) return `${minutes}:${seconds < 10 ? "0" : ""}${seconds}` } const startRecording = () => { if (recognitionRef.current) { setUserTranscript("") setIsRecording(true) recognitionRef.current.start() } } const stopRecording = () => { if (recognitionRef.current) { recognitionRef.current.stop() setIsRecording(false) setHasCompleted(true) onComplete() } } const resetExercise = () => { setUserTranscript("") setHasCompleted(false) if (audioRef.current) { audioRef.current.currentTime = 0 setCurrentTime(0) setIsPlaying(false) } } return (

Listen and Repeat

{formatTime(currentTime)} {formatTime(duration)}

{transcript && (

{transcript}

{translation &&

{translation}

}

)}

{userTranscript && (

Your recording:

{userTranscript}

)} {hasCompleted && (

)}

) } [V0_FILE]typescriptreact:file="app/components/exercise-types/practice-test.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Progress } from "@/components/ui/progress" import { MultipleChoice } from "./multiple-choice" import { AudioExercise } from "./audio-exercise" import { MatchingExercise } from "./matching-exercise" import { CheckCircle2 } from "lucide-react" type Question = { id: string type: "multiple-choice" | "audio" | "matching" content: any } interface PracticeTestProps { title: string questions: Question[] onComplete: (score: number) => void } export function PracticeTest({ title, questions, onComplete }: PracticeTestProps) { const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0) const [score, setScore] = useState(0) const [answers, setAnswers] = useState([]) const [isComplete, setIsComplete] = useState(false) const currentQuestion = questions[currentQuestionIndex] const progress = ((currentQuestionIndex + 1) / questions.length) * 100 const handleQuestionComplete = (isCorrect: boolean) => { const newAnswers = [...answers] newAnswers[currentQuestionIndex] = isCorrect setAnswers(newAnswers) if (isCorrect) { setScore(score + 1) } // Move to next question after a delay setTimeout(() => { if (currentQuestionIndex < questions.length - 1) { setCurrentQuestionIndex(currentQuestionIndex + 1) } else { setIsComplete(true) onComplete(score + (isCorrect ? 1 : 0)) } }, 1500) } const handleAudioComplete = () => { // For audio exercises, we don't score automatically setTimeout(() => { if (currentQuestionIndex < questions.length - 1) { setCurrentQuestionIndex(currentQuestionIndex + 1) } else { setIsComplete(true) onComplete(score) } }, 500) } const handleMatchingComplete = (matchScore: number) => { const newAnswers = [...answers] newAnswers[currentQuestionIndex] = true setAnswers(newAnswers) setScore(score + 1) // Move to next question after a delay setTimeout(() => { if (currentQuestionIndex < questions.length - 1) { setCurrentQuestionIndex(currentQuestionIndex + 1) } else { setIsComplete(true) onComplete(score + 1) } }, 1500) } return (

{title}

Question {currentQuestionIndex + 1} of {questions.length} Score: {score}/{questions.length}

{!isComplete ? (

{currentQuestion.type === "multiple-choice" && ( )} {currentQuestion.type === "audio" && ( )} {currentQuestion.type === "matching" && ( )}

) : (

Test Complete!

You scored {score} out of {questions.length}

)}

) } [V0_FILE]typescriptreact:file="app/practice/page.tsx" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { ArrowLeft, BookOpen, CheckCircle2, Gamepad2, Puzzle } from "lucide-react" import { MobileNav } from "../components/mobile-nav" import { MatchingExercise } from "../components/exercise-types/matching-exercise" import { AudioExercise } from "../components/exercise-types/audio-exercise" import { PracticeTest } from "../components/exercise-types/practice-test" export default function PracticePage() { const [activeExercise, setActiveExercise] = useState(null) const [testComplete, setTestComplete] = useState(false) const [testScore, setTestScore] = useState(0) const handleTestComplete = (score: number) => { setTestComplete(true) setTestScore(score) } return (

Practice

{/* Spacer for alignment */}

Exercises Quizzes Practice Tests {!activeExercise ? ( <>

Speaking Exercises

setActiveExercise("pronunciation")} > Pronunciation Practice Practice your pronunciation with audio exercises

10 exercises

setActiveExercise("matching")} > Vocabulary Matching Match words with their definitions

8 exercises

) : activeExercise === "pronunciation" ? ( Pronunciation Practice Listen and repeat the phrases setActiveExercise(null)} /> ) : activeExercise === "matching" ? ( Vocabulary Matching Match the words with their definitions setActiveExercise(null)} /> ) : null}

Unit Quizzes

Beginner Unit 1 Quiz Test your knowledge of basic phrases

Completed

Beginner Unit 2 Quiz Test your knowledge of daily life vocabulary

10 questions

Beginner Unit 3 Quiz Test your knowledge of getting around

10 questions

Intermediate Unit 1 Quiz Test your conversation skills

12 questions

{!testComplete ? ( Beginner Comprehensive Test Test your overall beginner level knowledge ) : (

Test Results Beginner Comprehensive Test

{testScore}/4

Performance Summary

Vocabulary

Good

Grammar

Excellent

Listening

Fair

Speaking

Good

More Practice Tests

Intermediate Test Test your intermediate level knowledge

15 questions

Advanced Test Test your advanced level knowledge

20 questions

)}

) } [V0_FILE]typescriptreact:file="app/api/auth/[...nextauth]/route.ts" isEdit="true" isMerged="true" import NextAuth from "next-auth" import CredentialsProvider from "next-auth/providers/credentials" const handler = NextAuth({ providers: [ CredentialsProvider({ name: "Credentials", credentials: { email: { label: "Email", type: "email" }, password: { label: "Password", type: "password" }, }, async authorize(credentials) { // In a real app, you would verify credentials against a database if (credentials?.email === "demo@example.com" && credentials?.password === "password") { return { id: "1", name: "Demo User", email: "demo@example.com", } } return null }, }), ], pages: { signIn: "/auth/signin", }, session: { strategy: "jwt", }, callbacks: { async session({ session, token }) { if (token && session.user) { session.user.id = token.sub as string } return session }, }, }) export { handler as GET, handler as POST } [V0_FILE]typescriptreact:file="app/auth/signin/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import Link from "next/link" import { signIn } from "next-auth/react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { BookOpen } from "lucide-react" export default function SignIn() { const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState("") const router = useRouter() const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) setError("") try { const result = await signIn("credentials", { redirect: false, email, password, }) if (result?.error) { setError("Invalid email or password") setIsLoading(false) } else { router.push("/") } } catch (error) { setError("An error occurred. Please try again.") setIsLoading(false) } } return (

LinguaLeap Enter your email and password to sign in

Don't have an account?{" "} Sign up

Demo credentials:

Email: demo@example.com

Password: password

) } [V0_FILE]typescriptreact:file="app/error.tsx" isMerged="true" "use client" import { useEffect } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { AlertTriangle } from "lucide-react" export default function Error({ error, reset, }: { error: Error & { digest?: string } reset: () => void }) { useEffect(() => { console.error(error) }, [error]) return (

Something went wrong!

We apologize for the inconvenience. An error occurred while loading this page.

) } [V0_FILE]typescriptreact:file="app/not-found.tsx" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" import { Search } from "lucide-react" export default function NotFound() { return (

404

Page Not Found

The page you are looking for doesn't exist or has been moved.

) } [V0_FILE]typescriptreact:file="app/loading.tsx" isMerged="true" export default function Loading() { return (

) } [V0_FILE]typescriptreact:file="tailwind.config.ts" isMerged="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]typescript:file="lib/data/spanish-vocabulary.ts" isEdit="true" isMerged="true" // This file contains a comprehensive database of Spanish vocabulary organized by units and lessons export type VocabularyItem = { id: string spanish: string english: string example?: string exampleTranslation?: string audioFile?: string difficulty: "beginner" | "intermediate" | "advanced" tags: string[] } export type Lesson = { id: string title: string description: string vocabulary: VocabularyItem[] phrases: VocabularyItem[] conversations?: { id: string speakers: { role: string; text: string; translation: string }[] }[] } export type Unit = { id: string title: string level: "beginner" | "intermediate" | "advanced" description: string animal: string animalIcon: string color: string lessons: Lesson[] } // Generate a large set of vocabulary items for each unit function generateVocabularyItems( unitId: string, baseId: string, count: number, difficulty: "beginner" | "intermediate" | "advanced", tags: string[], ): VocabularyItem[] { const items: VocabularyItem[] = [] // Common Spanish words and phrases with English translations const commonPhrases = [ { spanish: "hola", english: "hello" }, { spanish: "adiós", english: "goodbye" }, { spanish: "por favor", english: "please" }, { spanish: "gracias", english: "thank you" }, { spanish: "de nada", english: "you're welcome" }, { spanish: "sí", english: "yes" }, { spanish: "no", english: "no" }, { spanish: "disculpe", english: "excuse me" }, { spanish: "lo siento", english: "I'm sorry" }, { spanish: "buenos días", english: "good morning" }, { spanish: "buenas tardes", english: "good afternoon" }, { spanish: "buenas noches", english: "good evening/night" }, { spanish: "¿cómo estás?", english: "how are you?" }, { spanish: "estoy bien", english: "I'm fine" }, { spanish: "¿cómo te llamas?", english: "what's your name?" }, { spanish: "me llamo...", english: "my name is..." }, { spanish: "mucho gusto", english: "nice to meet you" }, { spanish: "igualmente", english: "likewise" }, { spanish: "¿de dónde eres?", english: "where are you from?" }, { spanish: "soy de...", english: "I'm from..." }, { spanish: "¿hablas inglés?", english: "do you speak English?" }, { spanish: "hablo español", english: "I speak Spanish" }, { spanish: "no entiendo", english: "I don't understand" }, { spanish: "¿puedes repetir?", english: "can you repeat?" }, { spanish: "más despacio, por favor", english: "slower, please" }, { spanish: "¿cuánto cuesta?", english: "how much does it cost?" }, { spanish: "¿dónde está...?", english: "where is...?" }, { spanish: "a la derecha", english: "to the right" }, { spanish: "a la izquierda", english: "to the left" }, { spanish: "todo recto", english: "straight ahead" }, { spanish: "cerca", english: "near" }, { spanish: "lejos", english: "far" }, { spanish: "aquí", english: "here" }, { spanish: "allí", english: "there" }, { spanish: "ahora", english: "now" }, { spanish: "después", english: "after" }, { spanish: "antes", english: "before" }, { spanish: "hoy", english: "today" }, { spanish: "mañana", english: "tomorrow" }, { spanish: "ayer", english: "yesterday" }, { spanish: "uno", english: "one" }, { spanish: "dos", english: "two" }, { spanish: "tres", english: "three" }, { spanish: "cuatro", english: "four" }, { spanish: "cinco", english: "five" }, { spanish: "¿qué hora es?", english: "what time is it?" }, { spanish: "es la una", english: "it's one o'clock" }, { spanish: "son las dos", english: "it's two o'clock" }, { spanish: "por la mañana", english: "in the morning" }, { spanish: "por la tarde", english: "in the afternoon" }, { spanish: "por la noche", english: "in the evening/night" }, { spanish: "el desayuno", english: "breakfast" }, { spanish: "el almuerzo", english: "lunch" }, { spanish: "la cena", english: "dinner" }, { spanish: "agua", english: "water" }, { spanish: "café", english: "coffee" }, { spanish: "té", english: "tea" }, { spanish: "cerveza", english: "beer" }, { spanish: "vino", english: "wine" }, { spanish: "jugo/zumo", english: "juice" }, { spanish: "pan", english: "bread" }, { spanish: "queso", english: "cheese" }, { spanish: "carne", english: "meat" }, { spanish: "pescado", english: "fish" }, { spanish: "verduras", english: "vegetables" }, { spanish: "frutas", english: "fruits" }, { spanish: "manzana", english: "apple" }, { spanish: "plátano/banana", english: "banana" }, { spanish: "naranja", english: "orange" }, { spanish: "la cuenta, por favor", english: "the bill, please" }, { spanish: "¿puedo pagar con tarjeta?", english: "can I pay with card?" }, { spanish: "efectivo", english: "cash" }, { spanish: "baño", english: "bathroom" }, { spanish: "hotel", english: "hotel" }, { spanish: "aeropuerto", english: "airport" }, { spanish: "estación de tren", english: "train station" }, { spanish: "estación de autobuses", english: "bus station" }, { spanish: "taxi", english: "taxi" }, { spanish: "autobús", english: "bus" }, { spanish: "tren", english: "train" }, { spanish: "avión", english: "airplane" }, { spanish: "coche/carro", english: "car" }, { spanish: "bicicleta", english: "bicycle" }, { spanish: "playa", english: "beach" }, { spanish: "montaña", english: "mountain" }, { spanish: "ciudad", english: "city" }, { spanish: "pueblo", english: "town/village" }, { spanish: "calle", english: "street" }, { spanish: "plaza", english: "square" }, { spanish: "parque", english: "park" }, { spanish: "museo", english: "museum" }, { spanish: "iglesia", english: "church" }, { spanish: "mercado", english: "market" }, { spanish: "tienda", english: "store/shop" }, { spanish: "supermercado", english: "supermarket" }, { spanish: "farmacia", english: "pharmacy" }, { spanish: "hospital", english: "hospital" }, { spanish: "policía", english: "police" }, { spanish: "ayuda", english: "help" }, { spanish: "emergencia", english: "emergency" }, { spanish: "médico", english: "doctor" }, { spanish: "enfermo", english: "sick" }, { spanish: "dolor", english: "pain" }, { spanish: "cabeza", english: "head" }, { spanish: "estómago", english: "stomach" }, { spanish: "mano", english: "hand" }, { spanish: "pie", english: "foot" }, ] // Generate the requested number of items for (let i = 0; i < count; i++) { // Use items from commonPhrases first, then generate variations const basePhrase = i < commonPhrases.length ? commonPhrases[i] : commonPhrases[i % commonPhrases.length] // Create variations for items beyond the common phrases list const variation = i >= commonPhrases.length ? ` (variation ${Math.floor(i / commonPhrases.length)})` : "" const item: VocabularyItem = { id: `${baseId}${i + 1}`, spanish: basePhrase.spanish + variation, english: basePhrase.english + variation, example: `${basePhrase.spanish} es una frase común.`, exampleTranslation: `${basePhrase.english} is a common phrase.`, audioFile: `/audio/${basePhrase.spanish.replace(/\s/g, "-").toLowerCase()}.mp3`, difficulty, tags: [...tags], } items.push(item) } return items } // Generate phrases for each lesson function generatePhrases( unitId: string, lessonId: string, count: number, difficulty: "beginner" | "intermediate" | "advanced", tags: string[], ): VocabularyItem[] { return generateVocabularyItems(unitId, `${unitId}-${lessonId}-p`, count, difficulty, tags) } // Define the units with their lessons export const spanishUnits: Unit[] = [ { id: "beginner-unit-1", title: "First Steps", level: "beginner", description: "Learn basic greetings and introductions in Spanish", animal: "Owl", animalIcon: "owl", color: "yellow", lessons: [ { id: "greetings", title: "Greetings", description: "Learn how to say hello and goodbye in Spanish", vocabulary: generateVocabularyItems("beginner-unit-1", "b1v", 100, "beginner", ["greeting"]), phrases: generatePhrases("beginner-unit-1", "greetings", 75, "beginner", ["greeting"]), conversations: [ { id: "b1c1", speakers: [ { role: "Person A", text: "¡Hola! ¿Cómo estás?", translation: "Hello! How are you?", }, { role: "Person B", text: "Estoy bien, gracias. ¿Y tú?", translation: "I'm fine, thank you. And you?", }, { role: "Person A", text: "Muy bien. Me llamo Carlos. ¿Cómo te llamas?", translation: "Very well. My name is Carlos. What's your name?", }, { role: "Person B", text: "Me llamo Ana. Mucho gusto en conocerte.", translation: "My name is Ana. Nice to meet you.", }, { role: "Person A", text: "El gusto es mío. ¿De dónde eres?", translation: "The pleasure is mine. Where are you from?", }, { role: "Person B", text: "Soy de México. ¿Y tú?", translation: "I'm from Mexico. And you?", }, { role: "Person A", text: "Soy de España. Estoy aquí de vacaciones.", translation: "I'm from Spain. I'm here on vacation.", }, ], }, ], }, { id: "introductions", title: "Introductions", description: "Learn how to introduce yourself in Spanish", vocabulary: generateVocabularyItems("beginner-unit-1", "b1v-intro", 100, "beginner", ["introduction"]), phrases: generatePhrases("beginner-unit-1", "introductions", 75, "beginner", ["introduction"]), conversations: [ { id: "b1c2", speakers: [ { role: "Person A", text: "Hola, soy María. ¿Y tú?", translation: "Hello, I'm María. And you?", }, { role: "Person B", text: "Hola María, me llamo Juan. Encantado de conocerte.", translation: "Hello María, my name is Juan. Pleased to meet you.", }, { role: "Person A", text: "Igualmente. ¿De dónde eres?", translation: "Likewise. Where are you from?", }, { role: "Person B", text: "Soy de Argentina. ¿Y tú?", translation: "I'm from Argentina. And you?", }, { role: "Person A", text: "Soy de Colombia. ¿Cuánto tiempo llevas aquí?", translation: "I'm from Colombia. How long have you been here?", }, { role: "Person B", text: "Llevo dos semanas. Estoy estudiando español.", translation: "I've been here for two weeks. I'm studying Spanish.", }, ], }, ], }, { id: "basic-phrases", title: "Basic Phrases", description: "Essential phrases for everyday conversations", vocabulary: generateVocabularyItems("beginner-unit-1", "b1v-basic", 100, "beginner", ["common"]), phrases: generatePhrases("beginner-unit-1", "basic-phrases", 75, "beginner", ["common"]), conversations: [ { id: "b1c3", speakers: [ { role: "Person A", text: "Disculpe, ¿dónde está el baño?", translation: "Excuse me, where is the bathroom?", }, { role: "Person B", text: "El baño está al final del pasillo a la derecha.", translation: "The bathroom is at the end of the hallway on the right.", }, { role: "Person A", text: "Gracias. ¿Y hay un restaurante cerca de aquí?", translation: "Thank you. And is there a restaurant near here?", }, { role: "Person B", text: "Sí, hay un buen restaurante a dos cuadras de aquí.", translation: "Yes, there's a good restaurant two blocks from here.", }, { role: "Person A", text: "Perfecto. Muchas gracias por su ayuda.", translation: "Perfect. Thank you very much for your help.", }, { role: "Person B", text: "De nada. Que tenga un buen día.", translation: "You're welcome. Have a nice day.", }, ], }, ], }, { id: "simple-questions", title: "Simple Questions", description: "Learn how to ask and answer simple questions", vocabulary: generateVocabularyItems("beginner-unit-1", "b1v-questions", 100, "beginner", ["question"]), phrases: generatePhrases("beginner-unit-1", "simple-questions", 75, "beginner", ["question"]), conversations: [ { id: "b1c4", speakers: [ { role: "Person A", text: "¿Qué hora es?", translation: "What time is it?", }, { role: "Person B", text: "Son las tres y media.", translation: "It's three thirty.", }, { role: "Person A", text: "Gracias. ¿Sabes dónde está la estación de tren?", translation: "Thank you. Do you know where the train station is?", }, { role: "Person B", text: "Sí, está a cinco minutos caminando. Ve todo recto y luego gira a la izquierda.", translation: "Yes, it's a five-minute walk. Go straight ahead and then turn left.", }, { role: "Person A", text: "¿Cuánto cuesta un billete a Madrid?", translation: "How much is a ticket to Madrid?", }, { role: "Person B", text: "Creo que cuesta unos 20 euros.", translation: "I think it costs about 20 euros.", }, ], }, ], }, ], }, { id: "beginner-unit-2", title: "Daily Life", level: "beginner", description: "Essential vocabulary for everyday situations", animal: "Fox", animalIcon: "fox", color: "orange", lessons: [ { id: "numbers-time", title: "Numbers & Time", description: "Learn numbers and how to tell time in Spanish", vocabulary: generateVocabularyItems("beginner-unit-2", "b2v-numbers", 100, "beginner", ["numbers", "time"]), phrases: generatePhrases("beginner-unit-2", "numbers-time", 75, "beginner", ["numbers", "time"]), conversations: [ { id: "b2c1", speakers: [ { role: "Person A", text: "¿Qué hora es?", translation: "What time is it?", }, { role: "Person B", text: "Son las diez y cuarto de la mañana.", translation: "It's quarter past ten in the morning.", }, { role: "Person A", text: "Gracias. ¿A qué hora abre la tienda?", translation: "Thank you. What time does the store open?", }, { role: "Person B", text: "Abre a las nueve de la mañana y cierra a las ocho de la noche.", translation: "It opens at nine in the morning and closes at eight at night.", }, ], }, ], }, { id: "family-members", title: "Family Members", description: "Learn vocabulary related to family", vocabulary: generateVocabularyItems("beginner-unit-2", "b2v-family", 100, "beginner", ["family"]), phrases: generatePhrases("beginner-unit-2", "family-members", 75, "beginner", ["family"]), conversations: [ { id: "b2c2", speakers: [ { role: "Person A", text: "¿Tienes hermanos?", translation: "Do you have siblings?", }, { role: "Person B", text: "Sí, tengo un hermano y dos hermanas. ¿Y tú?", translation: "Yes, I have one brother and two sisters. And you?", }, { role: "Person A", text: "Soy hijo único. ¿Cómo se llaman tus padres?", translation: "I'm an only child. What are your parents' names?", }, { role: "Person B", text: "Mi padre se llama Roberto y mi madre se llama Elena.", translation: "My father's name is Roberto and my mother's name is Elena.", }, ], }, ], }, { id: "food-drinks", title: "Food & Drinks", description: "Learn vocabulary for ordering food and drinks", vocabulary: generateVocabularyItems("beginner-unit-2", "b2v-food", 100, "beginner", ["food", "drinks"]), phrases: generatePhrases("beginner-unit-2", "food-drinks", 75, "beginner", ["food", "drinks"]), conversations: [ { id: "b2c3", speakers: [ { role: "Person A", text: "¿Qué me recomiendas del menú?", translation: "What do you recommend from the menu?", }, { role: "Person B", text: "La paella está muy buena. También el pescado fresco.", translation: "The paella is very good. Also the fresh fish.", }, { role: "Person A", text: "Tomaré la paella entonces. Y para beber, una sangría por favor.", translation: "I'll have the paella then. And to drink, a sangria please.", }, { role: "Person B", text: "Excelente elección. ¿Algo más?", translation: "Excellent choice. Anything else?", }, { role: "Person A", text: "No, gracias. Eso es todo por ahora.", translation: "No, thank you. That's all for now.", }, ], }, ], }, { id: "shopping-phrases", title: "Shopping Phrases", description: "Essential phrases for shopping in Spanish", vocabulary: generateVocabularyItems("beginner-unit-2", "b2v-shopping", 100, "beginner", ["shopping"]), phrases: generatePhrases("beginner-unit-2", "shopping-phrases", 75, "beginner", ["shopping"]), conversations: [ { id: "b2c4", speakers: [ { role: "Person A", text: "Buenos días. ¿En qué puedo ayudarle?", translation: "Good morning. How can I help you?", }, { role: "Person B", text: "Estoy buscando una camisa azul. ¿Tiene en talla mediana?", translation: "I'm looking for a blue shirt. Do you have it in medium size?", }, { role: "Person A", text: "Sí, tenemos varias opciones. ¿Prefiere manga larga o corta?", translation: "Yes, we have several options. Do you prefer long or short sleeves?", }, { role: "Person B", text: "Manga larga, por favor. ¿Cuánto cuesta?", translation: "Long sleeves, please. How much does it cost?", }, { role: "Person A", text: "Cuesta 25 euros. ¿Le gustaría probársela?", translation: "It costs 25 euros. Would you like to try it on?", }, { role: "Person B", text: "Sí, por favor. ¿Dónde están los probadores?", translation: "Yes, please. Where are the fitting rooms?", }, ], }, ], }, ], }, // Additional units would follow the same pattern { id: "beginner-unit-3", title: "Getting Around", level: "beginner", description: "Navigation and transportation phrases", animal: "Turtle", animalIcon: "turtle", color: "green", lessons: [ { id: "directions", title: "Directions", description: "Learn how to ask for and give directions", vocabulary: generateVocabularyItems("beginner-unit-3", "b3v-directions", 100, "beginner", ["directions"]), phrases: generatePhrases("beginner-unit-3", "directions", 75, "beginner", ["directions"]), conversations: [], }, { id: "transportation", title: "Transportation", description: "Vocabulary for different modes of transportation", vocabulary: generateVocabularyItems("beginner-unit-3", "b3v-transport", 100, "beginner", ["transportation"]), phrases: generatePhrases("beginner-unit-3", "transportation", 75, "beginner", ["transportation"]), conversations: [], }, { id: "places-in-town", title: "Places in Town", description: "Learn names of common places in a town or city", vocabulary: generateVocabularyItems("beginner-unit-3", "b3v-places", 100, "beginner", ["places"]), phrases: generatePhrases("beginner-unit-3", "places-in-town", 75, "beginner", ["places"]), conversations: [], }, { id: "asking-for-help", title: "Asking for Help", description: "How to ask for assistance when needed", vocabulary: generateVocabularyItems("beginner-unit-3", "b3v-help", 100, "beginner", ["help"]), phrases: generatePhrases("beginner-unit-3", "asking-for-help", 75, "beginner", ["help"]), conversations: [], }, ], }, // Intermediate and Advanced units would follow the same pattern { id: "intermediate-unit-1", title: "Conversations", level: "intermediate", description: "Develop your conversation skills in Spanish", animal: "Parrot", animalIcon: "parrot", color: "purple", lessons: [ { id: "making-small-talk", title: "Making Small Talk", description: "Learn how to engage in casual conversation", vocabulary: generateVocabularyItems("intermediate-unit-1", "i1v-smalltalk", 100, "intermediate", [ "conversation", ]), phrases: generatePhrases("intermediate-unit-1", "making-small-talk", 75, "intermediate", ["conversation"]), conversations: [], }, { id: "expressing-opinions", title: "Expressing Opinions", description: "How to share your thoughts and opinions", vocabulary: generateVocabularyItems("intermediate-unit-1", "i1v-opinions", 100, "intermediate", ["opinions"]), phrases: generatePhrases("intermediate-unit-1", "expressing-opinions", 75, "intermediate", ["opinions"]), conversations: [], }, { id: "agreeing-disagreeing", title: "Agreeing & Disagreeing", description: "Phrases for agreement and disagreement", vocabulary: generateVocabularyItems("intermediate-unit-1", "i1v-agree", 100, "intermediate", [ "agreement", "disagreement", ]), phrases: generatePhrases("intermediate-unit-1", "agreeing-disagreeing", 75, "intermediate", [ "agreement", "disagreement", ]), conversations: [], }, { id: "telling-stories", title: "Telling Stories", description: "Learn to narrate events and tell stories", vocabulary: generateVocabularyItems("intermediate-unit-1", "i1v-stories", 100, "intermediate", [ "storytelling", ]), phrases: generatePhrases("intermediate-unit-1", "telling-stories", 75, "intermediate", ["storytelling"]), conversations: [], }, ], }, // Additional intermediate and advanced units would be defined similarly ] // In a real application, this would be a much larger dataset with 1000+ words/phrases per unit // This is just a sample to demonstrate the structure [V0_FILE]typescriptreact:file="lib/store/progress-store.ts" isMerged="true" import { create } from "zustand" import { persist } from "zustand/middleware" export type LessonProgress = { lessonId: string unitId: string completed: boolean score: number lastAccessed: string vocabularyMastered: string[] // IDs of mastered vocabulary items exercisesCompleted: string[] // IDs of completed exercises } export type UnitProgress = { unitId: string lessonsCompleted: number totalLessons: number lastAccessed: string } export type UserProgress = { currentUnitId: string currentLessonId: string streak: number lastStreak: string xp: number lessonProgress: Record unitProgress: Record } type ProgressStore = { progress: UserProgress completeLesson: (unitId: string, lessonId: string, score: number) => void startLesson: (unitId: string, lessonId: string) => void updateVocabularyMastery: (lessonId: string, vocabularyId: string, mastered: boolean) => void completeExercise: (lessonId: string, exerciseId: string) => void updateStreak: () => void addXP: (amount: number) => void } // Initial progress state const initialProgress: UserProgress = { currentUnitId: "beginner-unit-1", currentLessonId: "greetings", streak: 0, lastStreak: "", xp: 0, lessonProgress: {}, unitProgress: { "beginner-unit-1": { unitId: "beginner-unit-1", lessonsCompleted: 0, totalLessons: 4, lastAccessed: new Date().toISOString(), }, "beginner-unit-2": { unitId: "beginner-unit-2", lessonsCompleted: 0, totalLessons: 4, lastAccessed: "", }, "beginner-unit-3": { unitId: "beginner-unit-3", lessonsCompleted: 0, totalLessons: 4, lastAccessed: "", }, "intermediate-unit-1": { unitId: "intermediate-unit-1", lessonsCompleted: 0, totalLessons: 4, lastAccessed: "", }, "intermediate-unit-2": { unitId: "intermediate-unit-2", lessonsCompleted: 0, totalLessons: 4, lastAccessed: "", }, "intermediate-unit-3": { unitId: "intermediate-unit-3", lessonsCompleted: 0, totalLessons: 4, lastAccessed: "", }, "advanced-unit-1": { unitId: "advanced-unit-1", lessonsCompleted: 0, totalLessons: 4, lastAccessed: "", }, "advanced-unit-2": { unitId: "advanced-unit-2", lessonsCompleted: 0, totalLessons: 4, lastAccessed: "", }, "advanced-unit-3": { unitId: "advanced-unit-3", lessonsCompleted: 0, totalLessons: 4, lastAccessed: "", }, }, } export const useProgressStore = create()( persist( (set, get) => ({ progress: initialProgress, completeLesson: (unitId, lessonId, score) => { const { progress } = get() const lessonKey = `${unitId}-${lessonId}` const wasAlreadyCompleted = progress.lessonProgress[lessonKey]?.completed || false // Update lesson progress const updatedLessonProgress = { ...progress.lessonProgress, [lessonKey]: { lessonId, unitId, completed: true, score, lastAccessed: new Date().toISOString(), vocabularyMastered: progress.lessonProgress[lessonKey]?.vocabularyMastered || [], exercisesCompleted: progress.lessonProgress[lessonKey]?.exercisesCompleted || [], }, } // Update unit progress const unitProgress = progress.unitProgress[unitId] || { unitId, lessonsCompleted: 0, totalLessons: 4, // Default lastAccessed: "", } const updatedUnitProgress = { ...progress.unitProgress, [unitId]: { ...unitProgress, lessonsCompleted: wasAlreadyCompleted ? unitProgress.lessonsCompleted : unitProgress.lessonsCompleted + 1, lastAccessed: new Date().toISOString(), }, } // Add XP for completing the lesson const xpGained = wasAlreadyCompleted ? 5 : 20 // Less XP for repeating lessons set({ progress: { ...progress, lessonProgress: updatedLessonProgress, unitProgress: updatedUnitProgress, xp: progress.xp + xpGained, }, }) // Update streak get().updateStreak() }, startLesson: (unitId, lessonId) => { const { progress } = get() set({ progress: { ...progress, currentUnitId: unitId, currentLessonId: lessonId, }, }) }, updateVocabularyMastery: (lessonId, vocabularyId, mastered) => { const { progress } = get() const unitId = Object.keys(progress.unitProgress).find((id) => progress.unitProgress[id].lessonsCompleted > 0) || "beginner-unit-1" const lessonKey = `${unitId}-${lessonId}` const lessonProgress = progress.lessonProgress[lessonKey] || { lessonId, unitId, completed: false, score: 0, lastAccessed: new Date().toISOString(), vocabularyMastered: [], exercisesCompleted: [], } const vocabularyMastered = mastered ? [...lessonProgress.vocabularyMastered, vocabularyId] : lessonProgress.vocabularyMastered.filter((id) => id !== vocabularyId) set({ progress: { ...progress, lessonProgress: { ...progress.lessonProgress, [lessonKey]: { ...lessonProgress, vocabularyMastered, }, }, }, }) }, completeExercise: (lessonId, exerciseId) => { const { progress } = get() const unitId = Object.keys(progress.unitProgress).find((id) => progress.unitProgress[id].lessonsCompleted > 0) || "beginner-unit-1" const lessonKey = `${unitId}-${lessonId}` const lessonProgress = progress.lessonProgress[lessonKey] || { lessonId, unitId, completed: false, score: 0, lastAccessed: new Date().toISOString(), vocabularyMastered: [], exercisesCompleted: [], } const exercisesCompleted = [...lessonProgress.exercisesCompleted, exerciseId] set({ progress: { ...progress, lessonProgress: { ...progress.lessonProgress, [lessonKey]: { ...lessonProgress, exercisesCompleted, }, }, xp: progress.xp + 5, // Small XP gain for completing an exercise }, }) }, updateStreak: () => { const { progress } = get() const today = new Date().toISOString().split("T")[0] // If already logged in today, do nothing if (progress.lastStreak === today) { return } // Check if the last streak was yesterday const yesterday = new Date() yesterday.setDate(yesterday.getDate() - 1) const yesterdayString = yesterday.toISOString().split("T")[0] const newStreak = progress.lastStreak === yesterdayString ? progress.streak + 1 : 1 set({ progress: { ...progress, streak: newStreak, lastStreak: today, }, }) }, addXP: (amount) => { const { progress } = get() set({ progress: { ...progress, xp: progress.xp + amount, }, }) }, }), { name: "lingua-leap-progress", }, ), ) [V0_FILE]typescriptreact:file="app/components/unit-card.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import Link from "next/link" import { ChevronRight } from "lucide-react" import { useProgressStore } from "@/lib/store/progress-store" import { spanishUnits } from "@/lib/data/spanish-vocabulary" interface UnitCardProps { unitId: string title: string animal: string color: string lessons: { id: string title: string }[] } export function UnitCard({ unitId, title, animal, color, lessons }: UnitCardProps) { const { progress } = useProgressStore() const unitProgress = progress.unitProgress[unitId] // Get the unit data to show phrase counts const unitData = spanishUnits.find((unit) => unit.id === unitId) // Get the appropriate animal icon const getAnimalIcon = (animal: string) => { switch (animal.toLowerCase()) { case "owl": return "🦉" case "fox": return "🦊" case "turtle": return "🐢" case "parrot": return "🦜" case "beaver": return "🦫" case "flamingo": return "🦩" case "eagle": return "🦅" case "lion": return "🦁" case "dolphin": return "🐬" default: return "🐾" } } // Get color class based on the color prop const getColorClass = (color: string) => { const colorMap: Record = { yellow: "text-yellow-500", orange: "text-orange-500", green: "text-green-500", purple: "text-purple-500", pink: "text-pink-500", red: "text-red-500", cyan: "text-cyan-500", emerald: "text-emerald-500", blue: "text-blue-500", } return colorMap[color] || "text-primary" } // Calculate which lessons are completed and which is the current one const lessonStatus = lessons.map((lesson, index) => { const lessonKey = `${unitId}-${lesson.id}` const isCompleted = progress.lessonProgress[lessonKey]?.completed || false const isCurrent = !isCompleted && (index === 0 || progress.lessonProgress[`${unitId}-${lessons[index - 1].id}`]?.completed) // Get the lesson data to show phrase counts const lessonData = unitData?.lessons.find((l) => l.id === lesson.id) const phraseCount = lessonData ? lessonData.vocabulary.length + lessonData.phrases.length : 0 return { ...lesson, completed: isCompleted, current: isCurrent, phraseCount, } }) return (

{getAnimalIcon(animal)} {title}

{lessonStatus.map((lesson, index) => (

{lesson.completed ? (

) : (

{index + 1}

)}

{lesson.title}

{lesson.phraseCount} phrases

))}

) } [V0_FILE]typescriptreact:file="app/providers.tsx" isMerged="true" "use client" import type { ReactNode } from "react" import { ThemeProvider } from "@/components/theme-provider" export function Providers({ children }: { children: ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="package.json" isMerged="true" { "name": "lingua-leap", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@radix-ui/react-accordion": "^1.1.2", "@radix-ui/react-avatar": "^1.0.4", "@radix-ui/react-checkbox": "^1.0.4", "@radix-ui/react-collapsible": "^1.0.3", "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-dropdown-menu": "^2.0.6", "@radix-ui/react-label": "^2.0.2", "@radix-ui/react-navigation-menu": "^1.1.4", "@radix-ui/react-progress": "^1.0.3", "@radix-ui/react-select": "^2.0.0", "@radix-ui/react-separator": "^1.0.3", "@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-tabs": "^1.0.4", "@radix-ui/react-toast": "^1.1.5", "canvas-confetti": "^1.9.2", "class-variance-authority": "^0.7.0", "clsx": "^2.1.0", "lucide-react": "^0.323.0", "next": "14.1.0", "next-auth": "^4.24.5", "next-themes": "^0.2.1", "react": "^18", "react-dom": "^18", "tailwind-merge": "^2.2.1", "tailwindcss-animate": "^1.0.7", "zustand": "^4.5.0" }, "devDependencies": { "@types/canvas-confetti": "^1.6.4", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "autoprefixer": "^10.0.1", "eslint": "^8", "eslint-config-next": "14.1.0", "postcss": "^8", "tailwindcss": "^3.3.0", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/lesson-legacy/[id]/page.tsx" isMoved="true" isMovedFrom="app/lesson/[id]/page.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect, useRef } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Progress } from "@/components/ui/progress" import { ArrowLeft, CheckCircle2, Mic, MicOff, Play, Volume2, XCircle } from "lucide-react" import { Card, CardContent } from "@/components/ui/card" import { useToast } from "@/hooks/use-toast" export default function LessonPage({ params }: { params: { id: string } }) { const [step, setStep] = useState(0) const [progress, setProgress] = useState(0) const [isListening, setIsListening] = useState(false) const [transcript, setTranscript] = useState("") const [result, setResult] = useState<"correct" | "incorrect" | null>(null) const { toast } = useToast() const recognitionRef = useRef(null) const lessonSteps = [ { type: "listen", phrase: "How are you doing today?", translation: "¿Cómo estás hoy?", }, { type: "speak", phrase: "I'm doing well, thank you.", translation: "Estoy bien, gracias.", }, { type: "listen", phrase: "What did you do yesterday?", translation: "¿Qué hiciste ayer?", }, { type: "speak", phrase: "I went to the park with friends.", translation: "Fui al parque con amigos.", }, { type: "conversation", phrases: [ { speaker: "Person A", text: "Do you have plans for the weekend?" }, { speaker: "You", text: "Yes, I'm going to visit my family." }, { speaker: "Person A", text: "That sounds nice! Where do they live?" }, { speaker: "You", text: "They live in the countryside, about two hours from here." }, ], }, ] const currentStep = lessonSteps[step] useEffect(() => { setProgress(Math.round((step / lessonSteps.length) * 100)) // Initialize speech recognition if ((typeof window !== "undefined" && "SpeechRecognition" in window) || "webkitSpeechRecognition" in window) { const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition recognitionRef.current = new SpeechRecognition() recognitionRef.current.continuous = false recognitionRef.current.interimResults = true recognitionRef.current.lang = "en-US" recognitionRef.current.onresult = (event: any) => { const transcript = Array.from(event.results) .map((result: any) => result[0]) .map((result) => result.transcript) .join("") setTranscript(transcript) } recognitionRef.current.onerror = (event: any) => { console.error("Speech recognition error", event.error) setIsListening(false) toast({ title: "Error", description: "There was a problem with the speech recognition. Please try again.", variant: "destructive", }) } recognitionRef.current.onend = () => { setIsListening(false) } } else { toast({ title: "Not supported", description: "Speech recognition is not supported in your browser.", variant: "destructive", }) } return () => { if (recognitionRef.current) { recognitionRef.current.stop() } } }, [step, toast]) const startListening = () => { setTranscript("") setResult(null) setIsListening(true) recognitionRef.current.start() } const stopListening = () => { if (recognitionRef.current) { recognitionRef.current.stop() setIsListening(false) // Simple check - in a real app, you'd use more sophisticated matching const expectedPhrase = currentStep.type === "speak" ? currentStep.phrase.toLowerCase() : currentStep.type === "conversation" ? currentStep.phrases.find((p) => p.speaker === "You")?.text.toLowerCase() : "" const userSaid = transcript.toLowerCase() // Very simple check - in a real app, you'd use more sophisticated matching if (userSaid.includes(expectedPhrase.toLowerCase()) || expectedPhrase.toLowerCase().includes(userSaid)) { setResult("correct") } else { setResult("incorrect") } } } const playAudio = (text: string) => { if ("speechSynthesis" in window) { const utterance = new SpeechSynthesisUtterance(text) utterance.lang = "en-US" window.speechSynthesis.speak(utterance) } else { toast({ title: "Not supported", description: "Text-to-speech is not supported in your browser.", variant: "destructive", }) } } const nextStep = () => { if (step < lessonSteps.length - 1) { setStep(step + 1) setTranscript("") setResult(null) } else { // Lesson complete toast({ title: "Lesson Complete!", description: "You've completed this lesson. Great job!", }) } } return (

Lesson {params.id}: Basic Phrases

{/* Spacer for alignment */}

{currentStep.type === "listen" && (

Listen and Learn

{currentStep.phrase}

{currentStep.translation}

)} {currentStep.type === "speak" && (

Repeat the Phrase

{currentStep.phrase}

{currentStep.translation}

{transcript && (

{transcript}

)} {result && (

{result === "correct" ? ( <> Correct! Well done. ) : ( <> Try again. Listen carefully to the pronunciation. )}

)}

)} {currentStep.type === "conversation" && (

Practice Conversation

{currentStep.phrases.map((phrase, index) => (

{phrase.speaker}

{phrase.text}

))}

{transcript && (

{transcript}

)} {result && (

{result === "correct" ? ( <> Good job! Your response was appropriate. ) : ( <> Try again with the suggested response. )}

)}

) } [V0_FILE]typescriptreact:file="app/lesson/[[...slug]]/page.tsx" isMerged="true" import { redirect } from "next/navigation" export default function LessonCatchAll({ params }: { params: { slug?: string[] } }) { // If there's only one segment, it's the old format if (params.slug && params.slug.length === 1) { const id = params.slug[0] // Extract unit and lesson IDs from the legacy format // This is a simple redirect that assumes the ID format was "unitId-lessonId" const [unitId, lessonId] = id.includes("-") ? id.split("-", 2) : ["beginner-unit-1", "greetings"] // Default fallback // Redirect to the new URL structure redirect(`/lesson/${unitId}/${lessonId}`) } // If there are two segments, it's the new format - redirect to the proper page else if (params.slug && params.slug.length === 2) { const [unitId, lessonId] = params.slug redirect(`/lesson/${unitId}/${lessonId}`) } // If no segments, redirect to home else { redirect("/") } } [V0_FILE]typescriptreact:file="app/components/mobile-nav.tsx" isEdit="true" isQuickEdit="true" "use client" import Link from "next/link" import { usePathname } from "next/navigation" import { BookOpen, BarChart3, User, Gamepad2 } from "lucide-react" export function MobileNav() { const pathname = usePathname() const navItems = [ { href: "/", label: "Learn", icon: BookOpen }, { href: "/practice", label: "Practice", icon: Gamepad2 }, { href: "/progress", label: "Progress", icon: BarChart3 }, { href: "/profile", label: "Profile", icon: User }, ] return (

{navItems.map((item) => { const isActive = pathname === item.href return ( {item.label} ) })}

) } [V0_FILE]typescriptreact:file="app/lesson/[unitId]/[lessonId]/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect, useRef } from "react" import { useRouter } from "next/navigation" import Link from "next/link" import { Button } from "@/components/ui/button" import { Progress } from "@/components/ui/progress" import { ArrowLeft, CheckCircle2, Mic, MicOff, Play, Volume2, XCircle, ChevronLeft, ChevronRight } from "lucide-react" import { Card, CardContent } from "@/components/ui/card" import { useToast } from "@/hooks/use-toast" import { useProgressStore } from "@/lib/store/progress-store" import { spanishUnits } from "@/lib/data/spanish-vocabulary" import confetti from "canvas-confetti" import { MobileNav } from "@/app/components/mobile-nav" export default function LessonPage({ params }: { params: { unitId: string; lessonId: string } }) { const [step, setStep] = useState(0) const [progress, setProgress] = useState(0) const [isListening, setIsListening] = useState(false) const [transcript, setTranscript] = useState("") const [result, setResult] = useState<"correct" | "incorrect" | null>(null) const [lessonComplete, setLessonComplete] = useState(false) const [currentPage, setCurrentPage] = useState(0) const [phrasesPerPage] = useState(10) // Show 10 phrases per page const { toast } = useToast() const router = useRouter() const { completeLesson, startLesson } = useProgressStore() const recognitionRef = useRef(null) // Find the unit and lesson data const unit = spanishUnits.find((u) => u.id === params.unitId) const lesson = unit?.lessons.find((l) => l.id === params.lessonId) // If lesson not found, redirect to home useEffect(() => { if (!unit || !lesson) { router.push("/") return } // Mark this lesson as started startLesson(params.unitId, params.lessonId) }, [unit, lesson, router, params.unitId, params.lessonId, startLesson]) // Generate lesson steps from the lesson data const generateLessonSteps = () => { if (!lesson) return [] const steps = [] // Add vocabulary listening steps - paginated const startIndex = currentPage * phrasesPerPage const endIndex = startIndex + phrasesPerPage // Use the current page of vocabulary items const currentVocabulary = lesson.vocabulary.slice(startIndex, endIndex) currentVocabulary.forEach((vocab) => { steps.push({ type: "listen", phrase: vocab.spanish, translation: vocab.english, example: vocab.example, exampleTranslation: vocab.exampleTranslation, }) }) // Add speaking practice steps - also paginated const currentPhrases = lesson.phrases.slice(startIndex, endIndex) currentPhrases.forEach((phrase) => { steps.push({ type: "speak", phrase: phrase.spanish, translation: phrase.english, example: phrase.example, exampleTranslation: phrase.exampleTranslation, }) }) // Add conversation practice if available if (lesson.conversations && lesson.conversations.length > 0) { steps.push({ type: "conversation", phrases: lesson.conversations[0].speakers.map((speaker) => ({ speaker: speaker.role, text: speaker.text, translation: speaker.translation, })), }) } return steps } const lessonSteps = generateLessonSteps() const currentStep = lessonSteps[step] // Calculate total pages const totalPages = lesson ? Math.ceil(lesson.vocabulary.length / phrasesPerPage) : 0 useEffect(() => { setProgress(Math.round(((currentPage * phrasesPerPage + step) / (lesson?.vocabulary.length || 1)) * 100)) // Initialize speech recognition if ((typeof window !== "undefined" && "SpeechRecognition" in window) || "webkitSpeechRecognition" in window) { const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition recognitionRef.current = new SpeechRecognition() recognitionRef.current.continuous = false recognitionRef.current.interimResults = true recognitionRef.current.lang = "es-ES" // Set to Spanish recognitionRef.current.onresult = (event: any) => { const transcript = Array.from(event.results) .map((result: any) => result[0]) .map((result) => result.transcript) .join("") setTranscript(transcript) } recognitionRef.current.onerror = (event: any) => { console.error("Speech recognition error", event.error) setIsListening(false) toast({ title: "Error", description: "There was a problem with the speech recognition. Please try again.", variant: "destructive", }) } recognitionRef.current.onend = () => { setIsListening(false) } } else { toast({ title: "Not supported", description: "Speech recognition is not supported in your browser.", variant: "destructive", }) } return () => { if (recognitionRef.current) { recognitionRef.current.stop() } } }, [step, toast, lessonSteps.length, currentPage, lesson?.vocabulary.length, phrasesPerPage]) const startListening = () => { setTranscript("") setResult(null) setIsListening(true) recognitionRef.current.start() } const stopListening = () => { if (recognitionRef.current) { recognitionRef.current.stop() setIsListening(false) // Simple check - in a real app, you'd use more sophisticated matching const expectedPhrase = currentStep.type === "speak" ? currentStep.phrase.toLowerCase() : currentStep.type === "conversation" ? currentStep.phrases.find((p) => p.speaker === "You" || p.speaker === "Person B")?.text.toLowerCase() : "" const userSaid = transcript.toLowerCase() // Very simple check - in a real app, you'd use more sophisticated matching if (userSaid.includes(expectedPhrase.toLowerCase()) || expectedPhrase.toLowerCase().includes(userSaid)) { setResult("correct") } else { setResult("incorrect") } } } const playAudio = (text: string) => { if ("speechSynthesis" in window) { const utterance = new SpeechSynthesisUtterance(text) utterance.lang = "es-ES" // Set to Spanish window.speechSynthesis.speak(utterance) } else { toast({ title: "Not supported", description: "Text-to-speech is not supported in your browser.", variant: "destructive", }) } } const nextStep = () => { if (step < lessonSteps.length - 1) { setStep(step + 1) setTranscript("") setResult(null) } else { // Check if there are more pages if (currentPage < totalPages - 1) { setCurrentPage(currentPage + 1) setStep(0) setTranscript("") setResult(null) } else { // Lesson complete setLessonComplete(true) // Trigger confetti effect confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 }, }) // Mark lesson as completed in the store completeLesson(params.unitId, params.lessonId, 100) toast({ title: "Lesson Complete!", description: "You've completed this lesson. Great job!", }) } } } const handleFinishLesson = () => { router.push("/") } if (!unit || !lesson) { return null // Will redirect in useEffect } return (

{unit.title}: {lesson.title}

{/* Spacer for alignment */}

Page {currentPage + 1} of {totalPages} {currentPage * phrasesPerPage + step + 1} of {lesson.vocabulary.length + lesson.phrases.length} phrases

{!lessonComplete ? ( {currentStep.type === "listen" && (

Listen and Learn

{currentStep.phrase}

{currentStep.translation}

{currentStep.example && (

{currentStep.example}

{currentStep.exampleTranslation}

)}

)} {currentStep.type === "speak" && (

Repeat the Phrase

{currentStep.phrase}

{currentStep.translation}

{currentStep.example && (

{currentStep.example}

{currentStep.exampleTranslation}

)}

{transcript && (

{transcript}

)} {result && (

{result === "correct" ? ( <> Correct! Well done. ) : ( <> Try again. Listen carefully to the pronunciation. )}

)}

)} {currentStep.type === "conversation" && (

Practice Conversation

{currentStep.phrases.map((phrase, index) => (

{phrase.speaker}

{phrase.text}

{phrase.translation}

))}

{transcript && (

{transcript}

)} {result && (

{result === "correct" ? ( <> Good job! Your response was appropriate. ) : ( <> Try again with the suggested response. )}

)}

)} ) : (

¡Excelente! Lesson Complete

You've successfully completed this lesson with over {lesson.vocabulary.length + lesson.phrases.length}{" "} phrases. Keep up the good work!

)} {!lessonComplete && (

{currentPage + 1} / {totalPages}

)}

) } [V0_FILE]typescriptreact:file="app/components/device-debug.tsx" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" export function DeviceDebug() { const [isVisible, setIsVisible] = useState(false) const [info, setInfo] = useState({ width: 0, height: 0, userAgent: "", }) useEffect(() => { setInfo({ width: window.innerWidth, height: window.innerHeight, userAgent: navigator.userAgent, }) const handleResize = () => { setInfo((prev) => ({ ...prev, width: window.innerWidth, height: window.innerHeight, })) } window.addEventListener("resize", handleResize) return () => window.removeEventListener("resize", handleResize) }, []) if (!isVisible) { return ( ) } return (

Device Info

Width: {info.width}px

Height: {info.height}px

UA: {info.userAgent}

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { Providers } from "./providers" import { DeviceDebug } from "./components/device-debug" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "LinguaLeap - Advanced Language Learning", description: "Learn languages with advanced speaking activities, quizzes, and interactive exercises", keywords: ["language learning", "speaking practice", "language app", "duolingo alternative", "speaking exercises"], authors: [{ name: "LinguaLeap" }], viewport: "width=device-width, initial-scale=1, maximum-scale=1", openGraph: { type: "website", locale: "en_US", url: "https://lingualleap.vercel.app", title: "LinguaLeap - Advanced Language Learning", description: "Learn languages with advanced speaking activities, quizzes, and interactive exercises", siteName: "LinguaLeap", }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} {process.env.NODE_ENV !== "production" && } ) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import Link from "next/link" import { Button } from "@/components/ui/button" import { Progress } from "@/components/ui/progress" import { BookOpen, Flame, User } from "lucide-react" import { UnitCard } from "./components/unit-card" import { MobileNav } from "./components/mobile-nav" import { spanishUnits } from "@/lib/data/spanish-vocabulary" export default function Dashboard() { // Group units by level const beginnerUnits = spanishUnits.filter((unit) => unit.level === "beginner") const intermediateUnits = spanishUnits.filter((unit) => unit.level === "intermediate") const advancedUnits = spanishUnits.filter((unit) => unit.level === "advanced") return (

LinguaLeap

Daily Goal

15 min / 20 min

{beginnerUnits.map((unit) => ( ({ id: lesson.id, title: lesson.title, }))} /> ))} {intermediateUnits.map((unit) => ( ({ id: lesson.id, title: lesson.title, }))} /> ))} {advancedUnits.map((unit) => ( ({ id: lesson.id, title: lesson.title, }))} /> ))}

) }