Tile

import React, { useState, useEffect } from 'react'; import { Play, Star, Download, Settings, User, Home, Search, Award, Clock, Filter, ChevronRight, Heart, BookOpen, Palette, Calculator, Globe, Music } from 'lucide-react'; const LearnJoyKidsApp = () => { const [currentView, setCurrentView] = useState('welcome'); const [selectedChild, setSelectedChild] = useState(null); const [watchedVideos, setWatchedVideos] = useState(new Set()); const [earnedStars, setEarnedStars] = useState(0); const [selectedCategory, setSelectedCategory] = useState('all'); const [isParentMode, setIsParentMode] = useState(false); const [screenTime, setScreenTime] = useState(0); const children = [ { id: 1, name: 'Emma', age: 5, avatar: '👧', interests: ['animals', 'colors'], stars: 15 }, { id: 2, name: 'Lucas', age: 8, avatar: '👦', interests: ['space', 'math'], stars: 23 } ]; const categories = [ { id: 'all', name: 'All', icon: '🌟', color: 'bg-purple-500' }, { id: 'math', name: 'Math', icon: '🔢', color: 'bg-blue-500' }, { id: 'science', name: 'Science', icon: '🔬', color: 'bg-green-500' }, { id: 'animals', name: 'Animals', icon: '🐾', color: 'bg-orange-500' }, { id: 'arts', name: 'Arts', icon: '🎨', color: 'bg-pink-500' }, { id: 'space', name: 'Space', icon: '🚀', color: 'bg-indigo-500' } ]; const eduReels = [ { id: 1, title: "Dinosaur Dance Math", duration: "45s", category: 'math', thumbnail: "🦕", description: "Count to 10 with dancing dinosaurs!", stars: 2, ageGroup: "3-5" }, { id: 2, title: "Why Leaves Change Colors", duration: "30s", category: 'science', thumbnail: "🍂", description: "Discover autumn magic!", stars: 2, ageGroup: "6-8" }, { id: 3, title: "Alphabet Animal Parade", duration: "60s", category: 'animals', thumbnail: "🐘", description: "Learn letters with animal friends!", stars: 1, ageGroup: "3-5" }, { id: 4, title: "Solar System Spin", duration: "50s", category: 'space', thumbnail: "🪐", description: "Meet the planets!", stars: 3, ageGroup: "6-8" } ]; const longFormVideos = [ { id: 5, title: "Detective Digits Mystery", duration: "8m", category: 'math', thumbnail: "🕵️", description: "Solve math mysteries with Detective Digits!", stars: 4, ageGroup: "6-8" }, { id: 6, title: "Captain Kindness Adventure", duration: "12m", category: 'social', thumbnail: "🦸", description: "Learn about kindness and friendship!", stars: 3, ageGroup: "3-5" } ]; const allVideos = [...eduReels, ...longFormVideos]; const filteredVideos = selectedCategory === 'all' ? allVideos : allVideos.filter(video => video.category === selectedCategory); const handleVideoClick = (videoId) => { setWatchedVideos(new Set([...watchedVideos, videoId])); const video = allVideos.find(v => v.id === videoId); setEarnedStars(prev => prev + video.stars); setScreenTime(prev => prev + (video.duration.includes('m') ? parseInt(video.duration) : 1)); setCurrentView('player'); }; const WelcomeScreen = () => (

🦉

LearnJoy Kids

Where Learning Meets Laughter!

Choose Your Profile

{children.map(child => ( ))}

); const HomeScreen = () => (

{/* Header */}

{selectedChild?.avatar}

Hi {selectedChild?.name}!

{earnedStars} stars earned

🦉

{/* Categories */}

What do you want to learn today?

{categories.map(category => ( ))}

{/* Edu-Reels Section */}

Quick Learning Reels

{filteredVideos.filter(v => v.duration.includes('s')).map(video => ( handleVideoClick(video.id)} /> ))}

{/* Long-form Videos */}

Adventure Videos

{filteredVideos.filter(v => v.duration.includes('m')).map(video => ( handleVideoClick(video.id)} /> ))}

{/* Bottom Navigation */}

); const VideoCard = ({ video, isReel, onClick }) => (

{video.thumbnail}

{video.duration}

{watchedVideos.has(video.id) && (

✓

)}

{video.title}

{video.description}

{[...Array(video.stars)].map((_, i) => ( ))}

{video.ageGroup}

); const VideoPlayer = () => (

🎬

Playing Video...

Learning in progress!

{/* Mock quiz popup */}

Quick Quiz! ðŸ§

How many dinosaurs were dancing?

{['5 dinosaurs', '10 dinosaurs', '3 dinosaurs'].map((option, i) => ( ))}

); const ParentDashboard = () => (

Parent Dashboard

{/* Children Overview */}

Children's Progress

{children.map(child => (

{child.avatar}

{child.name}

Age {child.age}

Stars Earned {child.stars} ⭐

Screen Time Today {screenTime}min

Favorite Topics {child.interests.join(', ')}

))}

{/* Controls */}

Parental Controls

Screen Time Limit

Daily viewing time restriction

30 minutes 1 hour 2 hours

Age Filter

Content age appropriateness

Auto (Based on child age) 3-5 years only 6-8 years only

Download Limit

Offline video storage

20 videos 50 videos Unlimited

{/* Weekly Report */}

This Week's Learning

📚

24

Videos Watched

⭐

38

Stars Earned

🎯

5

Topics Explored

); // Screen time timer effect useEffect(() => { if (currentView === 'player') { const timer = setInterval(() => { setScreenTime(prev => prev + 1); }, 60000); // Add 1 minute every minute return () => clearInterval(timer); } }, [currentView]); // Render current view switch (currentView) { case 'welcome': return ; case 'home': return isParentMode ? : ; case 'player': return ; default: return ; } }; export default LearnJoyKidsApp;import React, { useState, useEffect } from 'react'; import { Play, Star, Download, Settings, User, Home, Search, Award, Clock, Filter, ChevronRight, Heart, BookOpen, Palette, Calculator, Globe, Music } from 'lucide-react'; const LearnJoyKidsApp = () => { const [currentView, setCurrentView] = useState('welcome'); const [selectedChild, setSelectedChild] = useState(null); const [watchedVideos, setWatchedVideos] = useState(new Set()); const [earnedStars, setEarnedStars] = useState(0); const [selectedCategory, setSelectedCategory] = useState('all'); const [isParentMode, setIsParentMode] = useState(false); const [screenTime, setScreenTime] = useState(0); const children = [ { id: 1, name: 'Emma', age: 5, avatar: '👧', interests: ['animals', 'colors'], stars: 15 }, { id: 2, name: 'Lucas', age: 8, avatar: '👦', interests: ['space', 'math'], stars: 23 } ]; const categories = [ { id: 'all', name: 'All', icon: '🌟', color: 'bg-purple-500' }, { id: 'math', name: 'Math', icon: '🔢', color: 'bg-blue-500' }, { id: 'science', name: 'Science', icon: '🔬', color: 'bg-green-500' }, { id: 'animals', name: 'Animals', icon: '🐾', color: 'bg-orange-500' }, { id: 'arts', name: 'Arts', icon: '🎨', color: 'bg-pink-500' }, { id: 'space', name: 'Space', icon: '🚀', color: 'bg-indigo-500' } ]; const eduReels = [ { id: 1, title: "Dinosaur Dance Math", duration: "45s", category: 'math', thumbnail: "🦕", description: "Count to 10 with dancing dinosaurs!", stars: 2, ageGroup: "3-5" }, { id: 2, title: "Why Leaves Change Colors", duration: "30s", category: 'science', thumbnail: "🍂", description: "Discover autumn magic!", stars: 2, ageGroup: "6-8" }, { id: 3, title: "Alphabet Animal Parade", duration: "60s", category: 'animals', thumbnail: "🐘", description: "Learn letters with animal friends!", stars: 1, ageGroup: "3-5" }, { id: 4, title: "Solar System Spin", duration: "50s", category: 'space', thumbnail: "🪐", description: "Meet the planets!", stars: 3, ageGroup: "6-8" } ]; const longFormVideos = [ { id: 5, title: "Detective Digits Mystery", duration: "8m", category: 'math', thumbnail: "🕵️", description: "Solve math mysteries with Detective Digits!", stars: 4, ageGroup: "6-8" }, { id: 6, title: "Captain Kindness Adventure", duration: "12m", category: 'social', thumbnail: "🦸", description: "Learn about kindness and friendship!", stars: 3, ageGroup: "3-5" } ]; const allVideos = [...eduReels, ...longFormVideos]; const filteredVideos = selectedCategory === 'all' ? allVideos : allVideos.filter(video => video.category === selectedCategory); const handleVideoClick = (videoId) => { setWatchedVideos(new Set([...watchedVideos, videoId])); const video = allVideos.find(v => v.id === videoId); setEarnedStars(prev => prev + video.stars); setScreenTime(prev => prev + (video.duration.includes('m') ? parseInt(video.duration) : 1)); setCurrentView('player'); }; const WelcomeScreen = () => (

🦉

LearnJoy Kids

Where Learning Meets Laughter!

Choose Your Profile

{children.map(child => ( ))}

); const HomeScreen = () => (

{/* Header */}

{selectedChild?.avatar}

Hi {selectedChild?.name}!

{earnedStars} stars earned

🦉

{/* Categories */}

What do you want to learn today?

{categories.map(category => ( ))}

{/* Edu-Reels Section */}

Quick Learning Reels

{filteredVideos.filter(v => v.duration.includes('s')).map(video => ( handleVideoClick(video.id)} /> ))}

{/* Long-form Videos */}

Adventure Videos

{filteredVideos.filter(v => v.duration.includes('m')).map(video => ( handleVideoClick(video.id)} /> ))}

{/* Bottom Navigation */}

); const VideoCard = ({ video, isReel, onClick }) => (

{video.thumbnail}

{video.duration}

{watchedVideos.has(video.id) && (

✓

)}

{video.title}

{video.description}

{[...Array(video.stars)].map((_, i) => ( ))}

{video.ageGroup}

); const VideoPlayer = () => (

🎬

Playing Video...

Learning in progress!

{/* Mock quiz popup */}

Quick Quiz! ðŸ§

How many dinosaurs were dancing?

{['5 dinosaurs', '10 dinosaurs', '3 dinosaurs'].map((option, i) => ( ))}

); const ParentDashboard = () => (

Parent Dashboard

{/* Children Overview */}

Children's Progress

{children.map(child => (

{child.avatar}

{child.name}

Age {child.age}

Stars Earned {child.stars} ⭐

Screen Time Today {screenTime}min

Favorite Topics {child.interests.join(', ')}

))}

{/* Controls */}

Parental Controls

Screen Time Limit

Daily viewing time restriction

30 minutes 1 hour 2 hours

Age Filter

Content age appropriateness

Auto (Based on child age) 3-5 years only 6-8 years only

Download Limit

Offline video storage

20 videos 50 videos Unlimited

{/* Weekly Report */}

This Week's Learning

📚

24

Videos Watched

⭐

38

Stars Earned

🎯

5

Topics Explored

); // Screen time timer effect useEffect(() => { if (currentView === 'player') { const timer = setInterval(() => { setScreenTime(prev => prev + 1); }, 60000); // Add 1 minute every minute return () => clearInterval(timer); } }, [currentView]); // Render current view switch (currentView) { case 'welcome': return ; case 'home': return isParentMode ? : ; case 'player': return ; default: return ; } }; export default LearnJoyKidsApp;