+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| playwright.config.ts | +
+
+ |
+ 0% | +0/24 | +0% | +0/1 | +0% | +0/1 | +0% | +0/24 | +
| postcss.config.js | +
+
+ |
+ 0% | +0/6 | +0% | +0/1 | +0% | +0/1 | +0% | +0/6 | +
| tailwind.config.js | +
+
+ |
+ 0% | +0/25 | +0% | +0/1 | +0% | +0/1 | +0% | +0/25 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 | + + + + + + + + + + + + + + + + + + + + + + + | import { defineConfig, devices } from '@playwright/test'; + +export default defineConfig({ + testDir: './src/e2e', + fullyParallel: true, + forbidOnly: !!process.env.CI, + retries: process.env.CI ? 2 : 0, + workers: process.env.CI ? 1 : undefined, + reporter: 'html', + use: { + baseURL: 'http://localhost:4173', + trace: 'on-first-retry', + }, + projects: [ + { + name: 'chromium', + use: { ...devices['Desktop Chrome'] }, + }, + ], + webServer: { + command: 'npm run preview', + port: 4173, + }, +}); |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 | + + + + + + | export default { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; + |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import React, { useState } from 'react'; +import { ThemeProvider } from './contexts/ThemeContext'; +import Sidebar from './components/Sidebar'; +import Header from './components/Header'; +import Dashboard from './components/Dashboard'; +import Flashcards from './components/Flashcards'; +import Quiz from './components/Quiz'; +import FileUpload from './components/FileUpload'; +import Analytics from './components/Analytics'; +import StudyTimer from './components/StudyTimer'; +import Achievements from './components/Achievements'; +import Materials from './components/Materials'; +import SearchResults from './components/SearchResults'; +import Settings from './components/Settings'; +import AIChat from './components/AIChat'; + +function App() { + const [activeSection, setActiveSection] = useState('dashboard'); + const [showAIChat, setShowAIChat] = useState(false); + const [sidebarOpen, setSidebarOpen] = useState(false); + + const renderActiveSection = () => { + switch (activeSection) { + case 'dashboard': + return <Dashboard />; + case 'flashcards': + return <Flashcards />; + case 'quiz': + return <Quiz />; + case 'upload': + return <FileUpload />; + case 'analytics': + return <Analytics />; + case 'study-timer': + return <StudyTimer />; + case 'achievements': + return <Achievements />; + case 'materials': + return <Materials />; + case 'search': + return <SearchResults />; + case 'settings': + return <Settings />; + default: + return <Dashboard />; + } + }; + + return ( + <ThemeProvider> + <div className="flex h-screen bg-gray-50 dark:bg-gray-900 overflow-hidden"> + <Sidebar + activeSection={activeSection} + setActiveSection={setActiveSection} + isOpen={sidebarOpen} + onClose={() => setSidebarOpen(false)} + /> + + <div className="flex-1 flex flex-col overflow-hidden lg:ml-0"> + <Header + showAIChat={showAIChat} + setShowAIChat={setShowAIChat} + onMenuClick={() => setSidebarOpen(true)} + /> + + <main className="flex-1 overflow-y-auto"> + {renderActiveSection()} + </main> + </div> + + {/* AI Chat Assistant */} + <AIChat isOpen={showAIChat} onClose={() => setShowAIChat(false)} /> + </div> + </ThemeProvider> + ); +} + +export default App; |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import React, { useState, useRef, useEffect } from 'react'; +import { motion, AnimatePresence } from 'framer-motion'; +import { MessageCircle, X, Send, Bot, User, Sparkles, BookOpen, Brain, Target } from 'lucide-react'; + +interface Message { + id: string; + text: string; + sender: 'user' | 'ai'; + timestamp: Date; + suggestions?: string[]; +} + +interface AIChatProps { + isOpen: boolean; + onClose: () => void; +} + +const AIChat: React.FC<AIChatProps> = ({ isOpen, onClose }) => { + const [messages, setMessages] = useState<Message[]>([ + { + id: '1', + text: "Hi! I'm your AI study assistant. I can help you with creating flashcards, explaining concepts, generating quiz questions, and optimizing your study schedule. What would you like to work on today?", + sender: 'ai', + timestamp: new Date(), + suggestions: [ + "Create flashcards from my notes", + "Explain quantum physics concepts", + "Generate a quiz on biology", + "Optimize my study schedule" + ] + } + ]); + const [inputText, setInputText] = useState(''); + const [isTyping, setIsTyping] = useState(false); + const messagesEndRef = useRef<HTMLDivElement>(null); + const inputRef = useRef<HTMLInputElement>(null); + + const aiResponses = [ + "I'd be happy to help you with that concept. Let me break it down into simpler terms.", + "That's a great question! Based on your recent study sessions, I notice you might benefit from reviewing this topic again.", + "Excellent work! You're showing great progress in this subject area. Let me create some practice questions for you.", + "I recommend focusing on the key concepts we discussed earlier. Would you like me to generate some flashcards?", + "Based on your learning patterns, I suggest using spaced repetition for this material. Let me set up a study schedule.", + "I can see you're struggling with this topic. Let me provide a different explanation approach that might help.", + "Your study streak is impressive! To maintain momentum, let's focus on reinforcing what you've learned.", + "I've analyzed your quiz results and identified areas for improvement. Would you like me to create targeted practice materials?" + ]; + + const scrollToBottom = () => { + messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }); + }; + + useEffect(() => { + scrollToBottom(); + }, [messages]); + + useEffect(() => { + if (isOpen && inputRef.current) { + inputRef.current.focus(); + } + }, [isOpen]); + + const handleSendMessage = async () => { + if (!inputText.trim()) return; + + const userMessage: Message = { + id: Date.now().toString(), + text: inputText, + sender: 'user', + timestamp: new Date() + }; + + setMessages(prev => [...prev, userMessage]); + setInputText(''); + setIsTyping(true); + + // Simulate AI response delay + setTimeout(() => { + const aiResponse: Message = { + id: (Date.now() + 1).toString(), + text: aiResponses[Math.floor(Math.random() * aiResponses.length)], + sender: 'ai', + timestamp: new Date(), + suggestions: Math.random() > 0.5 ? [ + "Create practice quiz", + "Generate summary", + "Schedule review session", + "Explain in detail" + ] : undefined + }; + + setMessages(prev => [...prev, aiResponse]); + setIsTyping(false); + }, 1000 + Math.random() * 2000); + }; + + const handleSuggestionClick = (suggestion: string) => { + setInputText(suggestion); + if (inputRef.current) { + inputRef.current.focus(); + } + }; + + const formatTime = (date: Date) => { + return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); + }; + + return ( + <> + {/* Chat Toggle Button */} + <AnimatePresence> + {!isOpen && ( + <motion.button + initial={{ scale: 0, opacity: 0 }} + animate={{ scale: 1, opacity: 1 }} + exit={{ scale: 0, opacity: 0 }} + onClick={() => setIsOpen(true)} + className="fixed bottom-4 right-4 lg:bottom-6 lg:right-6 w-12 h-12 lg:w-14 lg:h-14 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-full shadow-lg hover:shadow-xl transition-all duration-300 flex items-center justify-center z-50 touch-manipulation" + whileHover={{ scale: 1.1 }} + whileTap={{ scale: 0.9 }} + > + <MessageCircle className="w-5 h-5 lg:w-6 lg:h-6" /> + <div className="absolute -top-1 -right-1 w-3 h-3 lg:w-4 lg:h-4 bg-orange-500 rounded-full animate-pulse"></div> + </motion.button> + )} + </AnimatePresence> + + {/* Chat Panel */} + <AnimatePresence> + {isOpen && ( + <motion.div + initial={{ opacity: 0, x: 400, y: 100 }} + animate={{ opacity: 1, x: 0, y: 0 }} + exit={{ opacity: 0, x: 400, y: 100 }} + className="fixed bottom-4 right-4 lg:bottom-6 lg:right-6 w-[calc(100vw-2rem)] max-w-sm lg:w-96 h-[70vh] lg:h-[600px] bg-white dark:bg-gray-800 rounded-2xl shadow-2xl border border-gray-200 dark:border-gray-700 flex flex-col z-50" + > + {/* Header */} + <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700 bg-gradient-to-r from-blue-500 to-purple-600 rounded-t-2xl text-white"> + <div className="flex items-center gap-3"> + <div className="w-8 h-8 bg-white/20 rounded-full flex items-center justify-center"> + <Sparkles className="w-4 h-4" /> + </div> + <div> + <h3 className="font-semibold text-sm lg:text-base">AI Study Assistant</h3> + <p className="text-xs text-blue-100">Always here to help</p> + </div> + </div> + <button + onClick={onClose} + className="w-8 h-8 bg-white/20 rounded-full flex items-center justify-center hover:bg-white/30 transition-colors touch-manipulation" + > + <X className="w-4 h-4" /> + </button> + </div> + + {/* Messages */} + <div className="flex-1 overflow-y-auto p-4 space-y-4"> + {messages.map((message) => ( + <div + key={message.id} + className={`flex ${message.sender === 'user' ? 'justify-end' : 'justify-start'}`} + > + <div className={`flex gap-2 max-w-[85%] ${message.sender === 'user' ? 'flex-row-reverse' : ''}`}> + <div className={`w-6 h-6 lg:w-8 lg:h-8 rounded-full flex items-center justify-center flex-shrink-0 ${ + message.sender === 'user' + ? 'bg-blue-500 text-white' + : 'bg-gradient-to-r from-purple-500 to-pink-500 text-white' + }`}> + {message.sender === 'user' ? <User className="w-3 h-3 lg:w-4 lg:h-4" /> : <Bot className="w-3 h-3 lg:w-4 lg:h-4" />} + </div> + <div className={`rounded-2xl px-3 py-2 lg:px-4 lg:py-2 ${ + message.sender === 'user' + ? 'bg-blue-500 text-white rounded-br-md' + : 'bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-white rounded-bl-md' + }`}> + <p className="text-xs lg:text-sm">{message.text}</p> + <p className={`text-xs mt-1 ${ + message.sender === 'user' ? 'text-blue-100' : 'text-gray-500 dark:text-gray-400' + }`}> + {formatTime(message.timestamp)} + </p> + </div> + </div> + </div> + ))} + + {/* Suggestions */} + {messages.length > 0 && messages[messages.length - 1].suggestions && ( + <div className="flex flex-wrap gap-2"> + {messages[messages.length - 1].suggestions!.map((suggestion, index) => ( + <button + key={index} + onClick={() => handleSuggestionClick(suggestion)} + className="px-2 py-1 lg:px-3 lg:py-1 bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 rounded-full text-xs hover:bg-blue-100 dark:hover:bg-blue-900/50 transition-colors touch-manipulation" + > + {suggestion} + </button> + ))} + </div> + )} + + {/* Typing Indicator */} + {isTyping && ( + <div className="flex justify-start"> + <div className="flex gap-2 max-w-[85%]"> + <div className="w-6 h-6 lg:w-8 lg:h-8 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 text-white flex items-center justify-center flex-shrink-0"> + <Bot className="w-3 h-3 lg:w-4 lg:h-4" /> + </div> + <div className="bg-gray-100 dark:bg-gray-700 rounded-2xl rounded-bl-md px-3 py-2 lg:px-4 lg:py-2"> + <div className="flex gap-1"> + <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div> + <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '0.1s' }}></div> + <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '0.2s' }}></div> + </div> + </div> + </div> + </div> + )} + + <div ref={messagesEndRef} /> + </div> + + {/* Quick Actions */} + <div className="p-3 lg:p-4 border-t border-gray-200 dark:border-gray-700"> + <div className="flex gap-1 lg:gap-2 mb-3"> + <button + onClick={() => handleSuggestionClick("Create flashcards from my notes")} + className="flex-1 flex items-center gap-1 lg:gap-2 px-2 py-2 lg:px-3 lg:py-2 bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 rounded-lg hover:bg-blue-100 dark:hover:bg-blue-900/50 transition-colors touch-manipulation" + > + <Brain className="w-3 h-3 lg:w-4 lg:h-4" /> + <span className="text-xs">Cards</span> + </button> + <button + onClick={() => handleSuggestionClick("Generate a practice quiz")} + className="flex-1 flex items-center gap-1 lg:gap-2 px-2 py-2 lg:px-3 lg:py-2 bg-green-50 dark:bg-green-900/30 text-green-600 dark:text-green-400 rounded-lg hover:bg-green-100 dark:hover:bg-green-900/50 transition-colors touch-manipulation" + > + <BookOpen className="w-3 h-3 lg:w-4 lg:h-4" /> + <span className="text-xs">Quiz</span> + </button> + <button + onClick={() => handleSuggestionClick("Optimize my study schedule")} + className="flex-1 flex items-center gap-1 lg:gap-2 px-2 py-2 lg:px-3 lg:py-2 bg-purple-50 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400 rounded-lg hover:bg-purple-100 dark:hover:bg-purple-900/50 transition-colors touch-manipulation" + > + <Target className="w-3 h-3 lg:w-4 lg:h-4" /> + <span className="text-xs">Plan</span> + </button> + </div> + + {/* Input */} + <div className="flex gap-2"> + <input + ref={inputRef} + type="text" + value={inputText} + onChange={(e) => setInputText(e.target.value)} + onKeyPress={(e) => e.key === 'Enter' && handleSendMessage()} + placeholder="Ask me anything..." + className="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm" + /> + <button + onClick={handleSendMessage} + disabled={!inputText.trim() || isTyping} + className="px-3 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors touch-manipulation" + > + <Send className="w-4 h-4" /> + </button> + </div> + </div> + </motion.div> + )} + </AnimatePresence> + </> + ); +}; + +export default AIChat; |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 +295 +296 +297 +298 +299 +300 +301 +302 +303 +304 +305 +306 +307 +308 +309 +310 +311 +312 +313 +314 +315 +316 +317 +318 +319 +320 +321 +322 +323 +324 +325 +326 +327 +328 +329 +330 +331 +332 +333 +334 +335 +336 +337 +338 +339 +340 +341 +342 +343 +344 +345 +346 +347 +348 +349 +350 +351 +352 +353 +354 +355 +356 +357 +358 +359 +360 +361 +362 +363 +364 +365 +366 +367 +368 +369 +370 +371 +372 +373 +374 +375 +376 +377 +378 +379 +380 +381 +382 +383 +384 +385 +386 +387 +388 +389 +390 +391 +392 +393 +394 +395 +396 +397 +398 +399 +400 +401 +402 +403 +404 +405 +406 +407 +408 +409 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import React from 'react'; +import { motion } from 'framer-motion'; +import { + Trophy, + Award, + Star, + Target, + Flame, + Brain, + Clock, + BookOpen, + Zap, + Crown, + Medal, + Shield, + Lock +} from 'lucide-react'; + +interface Achievement { + id: string; + title: string; + description: string; + icon: React.ReactNode; + unlocked: boolean; + progress: number; + maxProgress: number; + rarity: 'common' | 'rare' | 'epic' | 'legendary'; + category: 'study' | 'quiz' | 'streak' | 'time' | 'special'; + unlockedDate?: string; + xpReward: number; +} + +const Achievements: React.FC = () => { + const achievements: Achievement[] = [ + { + id: '1', + title: 'First Steps', + description: 'Complete your first study session', + icon: <BookOpen className="w-6 h-6" />, + unlocked: true, + progress: 1, + maxProgress: 1, + rarity: 'common', + category: 'study', + unlockedDate: '2025-06-15', + xpReward: 100 + }, + { + id: '2', + title: 'Quiz Master', + description: 'Score 90% or higher on 10 quizzes', + icon: <Brain className="w-6 h-6" />, + unlocked: true, + progress: 10, + maxProgress: 10, + rarity: 'rare', + category: 'quiz', + unlockedDate: '2025-06-20', + xpReward: 250 + }, + { + id: '3', + title: 'Study Streak', + description: 'Study for 7 consecutive days', + icon: <Flame className="w-6 h-6" />, + unlocked: true, + progress: 7, + maxProgress: 7, + rarity: 'rare', + category: 'streak', + unlockedDate: '2025-06-22', + xpReward: 300 + }, + { + id: '4', + title: 'Time Warrior', + description: 'Complete 50 hours of focused study', + icon: <Clock className="w-6 h-6" />, + unlocked: false, + progress: 23, + maxProgress: 50, + rarity: 'epic', + category: 'time', + xpReward: 500 + }, + { + id: '5', + title: 'Flashcard Hero', + description: 'Review 1000 flashcards', + icon: <Zap className="w-6 h-6" />, + unlocked: false, + progress: 342, + maxProgress: 1000, + rarity: 'epic', + category: 'study', + xpReward: 400 + }, + { + id: '6', + title: 'Perfect Score', + description: 'Achieve 100% on any quiz', + icon: <Star className="w-6 h-6" />, + unlocked: false, + progress: 0, + maxProgress: 1, + rarity: 'rare', + category: 'quiz', + xpReward: 200 + }, + { + id: '7', + title: 'Marathon Learner', + description: 'Study for 30 consecutive days', + icon: <Shield className="w-6 h-6" />, + unlocked: false, + progress: 15, + maxProgress: 30, + rarity: 'epic', + category: 'streak', + xpReward: 750 + }, + { + id: '8', + title: 'Knowledge Emperor', + description: 'Complete all available courses', + icon: <Crown className="w-6 h-6" />, + unlocked: false, + progress: 2, + maxProgress: 5, + rarity: 'legendary', + category: 'special', + xpReward: 1000 + }, + { + id: '9', + title: 'Speed Demon', + description: 'Complete a quiz in under 2 minutes', + icon: <Zap className="w-6 h-6" />, + unlocked: false, + progress: 0, + maxProgress: 1, + rarity: 'rare', + category: 'quiz', + xpReward: 250 + }, + { + id: '10', + title: 'Dedication Medal', + description: 'Study for 100 total hours', + icon: <Medal className="w-6 h-6" />, + unlocked: false, + progress: 67, + maxProgress: 100, + rarity: 'legendary', + category: 'time', + xpReward: 1500 + } + ]; + + const getRarityColor = (rarity: string) => { + switch (rarity) { + case 'common': return 'from-gray-400 to-gray-600'; + case 'rare': return 'from-blue-400 to-blue-600'; + case 'epic': return 'from-purple-400 to-purple-600'; + case 'legendary': return 'from-yellow-400 to-orange-500'; + default: return 'from-gray-400 to-gray-600'; + } + }; + + const getRarityBorder = (rarity: string) => { + switch (rarity) { + case 'common': return 'border-gray-300 dark:border-gray-600'; + case 'rare': return 'border-blue-300 dark:border-blue-600'; + case 'epic': return 'border-purple-300 dark:border-purple-600'; + case 'legendary': return 'border-yellow-300 dark:border-yellow-600'; + default: return 'border-gray-300 dark:border-gray-600'; + } + }; + + const getCategoryIcon = (category: string) => { + switch (category) { + case 'study': return <BookOpen className="w-4 h-4" />; + case 'quiz': return <Brain className="w-4 h-4" />; + case 'streak': return <Flame className="w-4 h-4" />; + case 'time': return <Clock className="w-4 h-4" />; + case 'special': return <Crown className="w-4 h-4" />; + default: return <Target className="w-4 h-4" />; + } + }; + + const totalAchievements = achievements.length; + const unlockedAchievements = achievements.filter(a => a.unlocked).length; + const totalXP = achievements.filter(a => a.unlocked).reduce((sum, a) => sum + a.xpReward, 0); + const overallProgress = (unlockedAchievements / totalAchievements) * 100; + + const categories = ['all', 'study', 'quiz', 'streak', 'time', 'special']; + const [selectedCategory, setSelectedCategory] = React.useState('all'); + + const filteredAchievements = selectedCategory === 'all' + ? achievements + : achievements.filter(a => a.category === selectedCategory); + + return ( + <div className="p-6 space-y-6"> + {/* Header */} + <div className="flex items-center justify-between"> + <div> + <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Achievements</h1> + <p className="text-gray-600 dark:text-gray-400 mt-1"> + Track your learning milestones and unlock rewards + </p> + </div> + <div className="flex items-center gap-2 text-sm text-yellow-600 dark:text-yellow-400"> + <Trophy className="w-4 h-4" /> + <span>{totalXP} XP Earned</span> + </div> + </div> + + {/* Progress Overview */} + <div className="grid grid-cols-1 md:grid-cols-4 gap-6"> + <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700"> + <div className="flex items-center justify-between mb-4"> + <div className="w-12 h-12 bg-yellow-100 dark:bg-yellow-900 rounded-lg flex items-center justify-center"> + <Trophy className="w-6 h-6 text-yellow-600 dark:text-yellow-400" /> + </div> + </div> + <h3 className="text-2xl font-bold text-gray-900 dark:text-white">{unlockedAchievements}</h3> + <p className="text-gray-600 dark:text-gray-400">Achievements Unlocked</p> + </div> + + <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700"> + <div className="flex items-center justify-between mb-4"> + <div className="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center"> + <Target className="w-6 h-6 text-blue-600 dark:text-blue-400" /> + </div> + </div> + <h3 className="text-2xl font-bold text-gray-900 dark:text-white">{Math.round(overallProgress)}%</h3> + <p className="text-gray-600 dark:text-gray-400">Overall Progress</p> + </div> + + <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700"> + <div className="flex items-center justify-between mb-4"> + <div className="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center"> + <Star className="w-6 h-6 text-purple-600 dark:text-purple-400" /> + </div> + </div> + <h3 className="text-2xl font-bold text-gray-900 dark:text-white">{totalXP}</h3> + <p className="text-gray-600 dark:text-gray-400">Total XP</p> + </div> + + <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700"> + <div className="flex items-center justify-between mb-4"> + <div className="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center"> + <Award className="w-6 h-6 text-green-600 dark:text-green-400" /> + </div> + </div> + <h3 className="text-2xl font-bold text-gray-900 dark:text-white"> + {achievements.filter(a => a.rarity === 'legendary' && a.unlocked).length} + </h3> + <p className="text-gray-600 dark:text-gray-400">Legendary Unlocked</p> + </div> + </div> + + {/* Category Filters */} + <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700"> + <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Categories</h3> + <div className="flex flex-wrap gap-2"> + {categories.map((category) => ( + <button + key={category} + onClick={() => setSelectedCategory(category)} + className={`px-4 py-2 rounded-lg font-medium transition-colors flex items-center gap-2 ${ + selectedCategory === category + ? 'bg-blue-500 text-white' + : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600' + }`} + > + {category !== 'all' && getCategoryIcon(category)} + <span className="capitalize">{category}</span> + <span className="text-xs opacity-75"> + ({category === 'all' ? achievements.length : achievements.filter(a => a.category === category).length}) + </span> + </button> + ))} + </div> + </div> + + {/* Achievements Grid */} + <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> + {filteredAchievements.map((achievement, index) => ( + <motion.div + key={achievement.id} + initial={{ opacity: 0, y: 20 }} + animate={{ opacity: 1, y: 0 }} + transition={{ delay: index * 0.1 }} + className={`bg-white dark:bg-gray-800 rounded-xl p-6 border-2 ${getRarityBorder(achievement.rarity)} relative overflow-hidden ${ + achievement.unlocked ? '' : 'opacity-75' + }`} + > + {/* Rarity Background */} + <div className={`absolute top-0 right-0 w-16 h-16 bg-gradient-to-br ${getRarityColor(achievement.rarity)} opacity-10 rounded-bl-3xl`} /> + + {/* Lock Overlay for Locked Achievements */} + {!achievement.unlocked && ( + <div className="absolute inset-0 bg-black/5 dark:bg-black/20 rounded-xl flex items-center justify-center"> + <div className="w-12 h-12 bg-gray-400 dark:bg-gray-600 rounded-full flex items-center justify-center"> + <Lock className="w-6 h-6 text-white" /> + </div> + </div> + )} + + <div className="relative"> + {/* Achievement Icon */} + <div className={`w-16 h-16 bg-gradient-to-br ${getRarityColor(achievement.rarity)} rounded-xl flex items-center justify-center text-white mb-4 ${ + achievement.unlocked ? '' : 'grayscale' + }`}> + {achievement.icon} + </div> + + {/* Achievement Info */} + <div className="mb-4"> + <div className="flex items-center justify-between mb-2"> + <h4 className="font-semibold text-gray-900 dark:text-white">{achievement.title}</h4> + <div className="flex items-center gap-1"> + {getCategoryIcon(achievement.category)} + <span className={`text-xs px-2 py-1 rounded-full font-medium ${ + achievement.rarity === 'legendary' ? 'bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200' : + achievement.rarity === 'epic' ? 'bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200' : + achievement.rarity === 'rare' ? 'bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200' : + 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200' + }`}> + {achievement.rarity} + </span> + </div> + </div> + <p className="text-sm text-gray-600 dark:text-gray-400 mb-3"> + {achievement.description} + </p> + </div> + + {/* Progress Bar */} + <div className="mb-4"> + <div className="flex justify-between items-center mb-2"> + <span className="text-sm font-medium text-gray-700 dark:text-gray-300"> + Progress + </span> + <span className="text-sm text-gray-600 dark:text-gray-400"> + {achievement.progress}/{achievement.maxProgress} + </span> + </div> + <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2"> + <div + className={`bg-gradient-to-r ${getRarityColor(achievement.rarity)} h-2 rounded-full transition-all duration-300`} + style={{ width: `${(achievement.progress / achievement.maxProgress) * 100}%` }} + /> + </div> + </div> + + {/* Reward & Date */} + <div className="flex items-center justify-between"> + <div className="flex items-center gap-2"> + <Star className="w-4 h-4 text-yellow-500" /> + <span className="text-sm font-medium text-gray-900 dark:text-white"> + {achievement.xpReward} XP + </span> + </div> + {achievement.unlocked && achievement.unlockedDate && ( + <span className="text-xs text-gray-500 dark:text-gray-400"> + Unlocked {achievement.unlockedDate} + </span> + )} + </div> + </div> + </motion.div> + ))} + </div> + + {/* Achievement Tips */} + <div className="bg-gradient-to-r from-blue-500 to-purple-600 rounded-xl p-6 text-white"> + <h3 className="text-lg font-semibold mb-4 flex items-center gap-2"> + <Trophy className="w-5 h-5" /> + Achievement Tips + </h3> + <div className="grid grid-cols-1 md:grid-cols-3 gap-4"> + <div> + <h4 className="font-medium mb-1">Stay Consistent</h4> + <p className="text-sm text-blue-100"> + Daily study sessions help unlock streak-based achievements faster. + </p> + </div> + <div> + <h4 className="font-medium mb-1">Challenge Yourself</h4> + <p className="text-sm text-blue-100"> + Take on difficult quizzes to unlock rare and epic achievements. + </p> + </div> + <div> + <h4 className="font-medium mb-1">Explore All Features</h4> + <p className="text-sm text-blue-100"> + Use flashcards, timers, and different study methods for varied achievements. + </p> + </div> + </div> + </div> + </div> + ); +}; + +export default Achievements; |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 +295 +296 +297 +298 +299 +300 +301 +302 +303 +304 +305 +306 +307 +308 +309 +310 +311 +312 +313 +314 +315 +316 +317 +318 +319 +320 +321 +322 +323 +324 +325 +326 +327 +328 +329 +330 +331 +332 +333 +334 +335 +336 +337 +338 +339 +340 +341 +342 +343 +344 +345 +346 +347 +348 +349 +350 +351 +352 +353 +354 +355 +356 +357 +358 +359 +360 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import React from 'react'; +import { LineChart, Line, AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, BarChart, Bar, PieChart, Pie, Cell, RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar } from 'recharts'; +import { TrendingUp, TrendingDown, Calendar, Clock, Target, Brain, BookOpen, Award, Zap, Users } from 'lucide-react'; + +const Analytics: React.FC = () => { + // Sample data for charts + const studyProgressData = [ + { date: '01/06', hours: 2.5, efficiency: 85, score: 78 }, + { date: '02/06', hours: 3.2, efficiency: 88, score: 82 }, + { date: '03/06', hours: 1.8, efficiency: 82, score: 75 }, + { date: '04/06', hours: 4.1, efficiency: 91, score: 88 }, + { date: '05/06', hours: 3.5, efficiency: 89, score: 85 }, + { date: '06/06', hours: 2.9, efficiency: 87, score: 83 }, + { date: '07/06', hours: 3.8, efficiency: 93, score: 91 } + ]; + + const subjectPerformance = [ + { subject: 'Psychology', completed: 75, accuracy: 88, timeSpent: 45 }, + { subject: 'Biology', completed: 62, accuracy: 82, timeSpent: 38 }, + { subject: 'History', completed: 89, accuracy: 91, timeSpent: 52 }, + { subject: 'Mathematics', completed: 58, accuracy: 76, timeSpent: 41 }, + { subject: 'Physics', completed: 71, accuracy: 84, timeSpent: 47 } + ]; + + const studyMethodData = [ + { method: 'Flashcards', value: 35, color: '#3B82F6' }, + { method: 'Quizzes', value: 28, color: '#10B981' }, + { method: 'Reading', value: 20, color: '#8B5CF6' }, + { method: 'Videos', value: 17, color: '#F59E0B' } + ]; + + const skillRadarData = [ + { skill: 'Memory', current: 85, target: 90 }, + { skill: 'Analysis', current: 78, target: 85 }, + { skill: 'Comprehension', current: 92, target: 95 }, + { skill: 'Speed', current: 74, target: 80 }, + { skill: 'Accuracy', current: 88, target: 90 }, + { skill: 'Retention', current: 81, target: 85 } + ]; + + const weeklyGoals = [ + { day: 'Mon', target: 3, achieved: 3.2 }, + { day: 'Tue', target: 3, achieved: 2.8 }, + { day: 'Wed', target: 3, achieved: 3.5 }, + { day: 'Thu', target: 3, achieved: 2.9 }, + { day: 'Fri', target: 3, achieved: 3.1 }, + { day: 'Sat', target: 4, achieved: 4.2 }, + { day: 'Sun', target: 4, achieved: 3.8 } + ]; + + return ( + <div className="p-6 space-y-6"> + {/* Header */} + <div className="flex items-center justify-between"> + <div> + <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Study Analytics</h1> + <p className="text-gray-600 dark:text-gray-400 mt-1"> + Track your learning progress and performance insights + </p> + </div> + <div className="flex items-center gap-2 text-sm text-blue-600 dark:text-blue-400"> + <Brain className="w-4 h-4" /> + <span>AI-Powered Insights</span> + </div> + </div> + + {/* Key Metrics */} + <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> + <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700"> + <div className="flex items-center justify-between mb-4"> + <div className="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center"> + <Clock className="w-6 h-6 text-blue-600 dark:text-blue-400" /> + </div> + <div className="flex items-center text-green-500"> + <TrendingUp className="w-4 h-4 mr-1" /> + <span className="text-sm">+12%</span> + </div> + </div> + <h3 className="text-2xl font-bold text-gray-900 dark:text-white">23.8h</h3> + <p className="text-gray-600 dark:text-gray-400">Weekly Study Time</p> + </div> + + <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700"> + <div className="flex items-center justify-between mb-4"> + <div className="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center"> + <Target className="w-6 h-6 text-green-600 dark:text-green-400" /> + </div> + <div className="flex items-center text-green-500"> + <TrendingUp className="w-4 h-4 mr-1" /> + <span className="text-sm">+5%</span> + </div> + </div> + <h3 className="text-2xl font-bold text-gray-900 dark:text-white">88.5%</h3> + <p className="text-gray-600 dark:text-gray-400">Average Accuracy</p> + </div> + + <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700"> + <div className="flex items-center justify-between mb-4"> + <div className="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center"> + <Zap className="w-6 h-6 text-purple-600 dark:text-purple-400" /> + </div> + <div className="flex items-center text-red-500"> + <TrendingDown className="w-4 h-4 mr-1" /> + <span className="text-sm">-2%</span> + </div> + </div> + <h3 className="text-2xl font-bold text-gray-900 dark:text-white">342</h3> + <p className="text-gray-600 dark:text-gray-400">Cards Reviewed</p> + </div> + + <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700"> + <div className="flex items-center justify-between mb-4"> + <div className="w-12 h-12 bg-orange-100 dark:bg-orange-900 rounded-lg flex items-center justify-center"> + <Award className="w-6 h-6 text-orange-600 dark:text-orange-400" /> + </div> + <div className="flex items-center text-green-500"> + <TrendingUp className="w-4 h-4 mr-1" /> + <span className="text-sm">+1</span> + </div> + </div> + <h3 className="text-2xl font-bold text-gray-900 dark:text-white">15</h3> + <p className="text-gray-600 dark:text-gray-400">Day Streak</p> + </div> + </div> + + {/* Charts Row 1 */} + <div className="grid grid-cols-1 lg:grid-cols-2 gap-6"> + {/* Study Progress Chart */} + <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700"> + <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Study Progress Over Time</h3> + <ResponsiveContainer width="100%" height={300}> + <AreaChart data={studyProgressData}> + <CartesianGrid strokeDasharray="3 3" stroke="#374151" /> + <XAxis dataKey="date" stroke="#6B7280" /> + <YAxis stroke="#6B7280" /> + <Tooltip + contentStyle={{ + backgroundColor: '#1F2937', + border: 'none', + borderRadius: '8px', + color: '#fff' + }} + /> + <Area + type="monotone" + dataKey="hours" + stroke="#3B82F6" + fill="url(#colorHours)" + strokeWidth={2} + /> + <defs> + <linearGradient id="colorHours" x1="0" y1="0" x2="0" y2="1"> + <stop offset="5%" stopColor="#3B82F6" stopOpacity={0.3}/> + <stop offset="95%" stopColor="#3B82F6" stopOpacity={0}/> + </linearGradient> + </defs> + </AreaChart> + </ResponsiveContainer> + </div> + + {/* Subject Performance */} + <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700"> + <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Subject Performance</h3> + <ResponsiveContainer width="100%" height={300}> + <BarChart data={subjectPerformance}> + <CartesianGrid strokeDasharray="3 3" stroke="#374151" /> + <XAxis dataKey="subject" stroke="#6B7280" /> + <YAxis stroke="#6B7280" /> + <Tooltip + contentStyle={{ + backgroundColor: '#1F2937', + border: 'none', + borderRadius: '8px', + color: '#fff' + }} + /> + <Bar dataKey="accuracy" fill="#10B981" radius={[4, 4, 0, 0]} /> + </BarChart> + </ResponsiveContainer> + </div> + </div> + + {/* Charts Row 2 */} + <div className="grid grid-cols-1 lg:grid-cols-3 gap-6"> + {/* Study Methods Distribution */} + <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700"> + <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Study Methods</h3> + <ResponsiveContainer width="100%" height={250}> + <PieChart> + <Pie + data={studyMethodData} + cx="50%" + cy="50%" + innerRadius={60} + outerRadius={90} + paddingAngle={5} + dataKey="value" + > + {studyMethodData.map((entry, index) => ( + <Cell key={`cell-${index}`} fill={entry.color} /> + ))} + </Pie> + <Tooltip /> + </PieChart> + </ResponsiveContainer> + <div className="grid grid-cols-2 gap-2 mt-4"> + {studyMethodData.map((method, index) => ( + <div key={index} className="flex items-center gap-2"> + <div + className="w-3 h-3 rounded-full" + style={{ backgroundColor: method.color }} + /> + <span className="text-sm text-gray-600 dark:text-gray-400"> + {method.method} + </span> + </div> + ))} + </div> + </div> + + {/* Skills Radar */} + <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700"> + <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Skills Assessment</h3> + <ResponsiveContainer width="100%" height={250}> + <RadarChart data={skillRadarData}> + <PolarGrid /> + <PolarAngleAxis dataKey="skill" /> + <PolarRadiusAxis angle={30} domain={[0, 100]} /> + <Radar + name="Current" + dataKey="current" + stroke="#3B82F6" + fill="#3B82F6" + fillOpacity={0.3} + /> + <Radar + name="Target" + dataKey="target" + stroke="#10B981" + fill="#10B981" + fillOpacity={0.1} + /> + <Tooltip /> + </RadarChart> + </ResponsiveContainer> + </div> + + {/* Weekly Goals */} + <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700"> + <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Weekly Goals</h3> + <ResponsiveContainer width="100%" height={250}> + <BarChart data={weeklyGoals}> + <CartesianGrid strokeDasharray="3 3" stroke="#374151" /> + <XAxis dataKey="day" stroke="#6B7280" /> + <YAxis stroke="#6B7280" /> + <Tooltip + contentStyle={{ + backgroundColor: '#1F2937', + border: 'none', + borderRadius: '8px', + color: '#fff' + }} + /> + <Bar dataKey="target" fill="#8B5CF6" radius={[4, 4, 0, 0]} /> + <Bar dataKey="achieved" fill="#10B981" radius={[4, 4, 0, 0]} /> + </BarChart> + </ResponsiveContainer> + </div> + </div> + + {/* Insights & Recommendations */} + <div className="bg-gradient-to-r from-blue-500 to-purple-600 rounded-xl p-6 text-white"> + <h3 className="text-lg font-semibold mb-4 flex items-center gap-2"> + <Brain className="w-5 h-5" /> + AI-Powered Insights + </h3> + <div className="grid grid-cols-1 md:grid-cols-3 gap-4"> + <div className="bg-white/10 rounded-lg p-4"> + <h4 className="font-medium mb-2">Peak Performance</h4> + <p className="text-sm text-blue-100"> + Your best study hours are 2-4 PM with 93% efficiency. Consider scheduling challenging topics during this time. + </p> + </div> + <div className="bg-white/10 rounded-lg p-4"> + <h4 className="font-medium mb-2">Improvement Area</h4> + <p className="text-sm text-blue-100"> + Mathematics needs attention. Your accuracy dropped 8% this week. Recommend more practice sessions. + </p> + </div> + <div className="bg-white/10 rounded-lg p-4"> + <h4 className="font-medium mb-2">Study Method</h4> + <p className="text-sm text-blue-100"> + Flashcards show highest retention (94%). Consider increasing flashcard usage for difficult concepts. + </p> + </div> + </div> + </div> + + {/* Detailed Statistics */} + <div className="grid grid-cols-1 md:grid-cols-2 gap-6"> + {/* Learning Velocity */} + <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700"> + <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Learning Velocity</h3> + <div className="space-y-4"> + {subjectPerformance.map((subject, index) => ( + <div key={index}> + <div className="flex justify-between items-center mb-2"> + <span className="text-sm font-medium text-gray-900 dark:text-white">{subject.subject}</span> + <span className="text-sm text-gray-600 dark:text-gray-400">{subject.completed}%</span> + </div> + <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2"> + <div + className="bg-gradient-to-r from-blue-500 to-purple-600 h-2 rounded-full transition-all duration-300" + style={{ width: `${subject.completed}%` }} + /> + </div> + </div> + ))} + </div> + </div> + + {/* Study Streaks */} + <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700"> + <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Achievement Timeline</h3> + <div className="space-y-4"> + <div className="flex items-center gap-3"> + <div className="w-8 h-8 bg-yellow-100 dark:bg-yellow-900 rounded-full flex items-center justify-center"> + <Award className="w-4 h-4 text-yellow-600 dark:text-yellow-400" /> + </div> + <div> + <p className="font-medium text-gray-900 dark:text-white">15-Day Study Streak</p> + <p className="text-sm text-gray-600 dark:text-gray-400">Achieved today</p> + </div> + </div> + <div className="flex items-center gap-3"> + <div className="w-8 h-8 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center"> + <Target className="w-4 h-4 text-green-600 dark:text-green-400" /> + </div> + <div> + <p className="font-medium text-gray-900 dark:text-white">90% Quiz Master</p> + <p className="text-sm text-gray-600 dark:text-gray-400">2 days ago</p> + </div> + </div> + <div className="flex items-center gap-3"> + <div className="w-8 h-8 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center"> + <BookOpen className="w-4 h-4 text-blue-600 dark:text-blue-400" /> + </div> + <div> + <p className="font-medium text-gray-900 dark:text-white">1000 Cards Reviewed</p> + <p className="text-sm text-gray-600 dark:text-gray-400">1 week ago</p> + </div> + </div> + </div> + </div> + </div> + </div> + ); +}; + +export default Analytics; |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import React from 'react'; +import { LineChart, Line, AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, BarChart, Bar } from 'recharts'; +import { TrendingUp, Award, Clock, Brain, BookOpen, Target, Flame, Calendar } from 'lucide-react'; +import { studyProgressData, quizResultsData } from '../data/sampleData'; + +const Dashboard: React.FC = () => { + // Prepare chart data + const chartData = quizResultsData.map(result => ({ + date: result.date.slice(0, 5), // Show only day-month + score: result.score, + time: result.timeTaken + })); + + const subjectData = studyProgressData.subjects.map(subject => ({ + name: subject.name, + progress: subject.progress + })); + + return ( + <div className="p-4 lg:p-6 space-y-4 lg:space-y-6"> + {/* Welcome Section */} + <div className="bg-gradient-to-r from-blue-500 to-purple-600 rounded-xl p-4 lg:p-6 text-white flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4"> + <div className="flex-1"> + <h1 className="text-xl lg:text-2xl font-bold mb-2">Welcome back, {studyProgressData.user.name}! 🎉</h1> + <p className="text-blue-100 text-sm lg:text-base">Ready to continue your learning journey? You're doing amazing!</p> + </div> + <img + src="/white_circle_360x360.png" + alt="Bolt Logo" + className="w-20 h-20 lg:w-[120px] lg:h-[120px] flex-shrink-0 self-center lg:self-auto" + /> + </div> + + {/* Stats Grid */} + <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 lg:gap-6"> + <div className="bg-white dark:bg-gray-800 rounded-xl p-4 lg:p-6 border border-gray-200 dark:border-gray-700"> + <div className="flex items-center justify-between mb-3 lg:mb-4"> + <div className="w-10 h-10 lg:w-12 lg:h-12 bg-orange-100 dark:bg-orange-900 rounded-lg flex items-center justify-center"> + <Flame className="w-5 h-5 lg:w-6 lg:h-6 text-orange-600 dark:text-orange-400" /> + </div> + <TrendingUp className="w-4 h-4 lg:w-5 lg:h-5 text-green-500" /> + </div> + <h3 className="text-xl lg:text-2xl font-bold text-gray-900 dark:text-white">{studyProgressData.user.studyStreak}</h3> + <p className="text-gray-600 dark:text-gray-400 text-xs lg:text-sm">Day Study Streak</p> + </div> + + <div className="bg-white dark:bg-gray-800 rounded-xl p-4 lg:p-6 border border-gray-200 dark:border-gray-700"> + <div className="flex items-center justify-between mb-3 lg:mb-4"> + <div className="w-10 h-10 lg:w-12 lg:h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center"> + <Clock className="w-5 h-5 lg:w-6 lg:h-6 text-blue-600 dark:text-blue-400" /> + </div> + <TrendingUp className="w-4 h-4 lg:w-5 lg:h-5 text-green-500" /> + </div> + <h3 className="text-xl lg:text-2xl font-bold text-gray-900 dark:text-white">{studyProgressData.user.totalStudyHours}h</h3> + <p className="text-gray-600 dark:text-gray-400 text-xs lg:text-sm">Total Study Time</p> + </div> + + <div className="bg-white dark:bg-gray-800 rounded-xl p-4 lg:p-6 border border-gray-200 dark:border-gray-700"> + <div className="flex items-center justify-between mb-3 lg:mb-4"> + <div className="w-10 h-10 lg:w-12 lg:h-12 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center"> + <Target className="w-5 h-5 lg:w-6 lg:h-6 text-green-600 dark:text-green-400" /> + </div> + <TrendingUp className="w-4 h-4 lg:w-5 lg:h-5 text-green-500" /> + </div> + <h3 className="text-xl lg:text-2xl font-bold text-gray-900 dark:text-white">{studyProgressData.user.averageScore}%</h3> + <p className="text-gray-600 dark:text-gray-400 text-xs lg:text-sm">Average Score</p> + </div> + + <div className="bg-white dark:bg-gray-800 rounded-xl p-4 lg:p-6 border border-gray-200 dark:border-gray-700"> + <div className="flex items-center justify-between mb-3 lg:mb-4"> + <div className="w-10 h-10 lg:w-12 lg:h-12 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center"> + <Brain className="w-5 h-5 lg:w-6 lg:h-6 text-purple-600 dark:text-purple-400" /> + </div> + <TrendingUp className="w-4 h-4 lg:w-5 lg:h-5 text-green-500" /> + </div> + <h3 className="text-xl lg:text-2xl font-bold text-gray-900 dark:text-white">{studyProgressData.user.cardsReviewed}</h3> + <p className="text-gray-600 dark:text-gray-400 text-xs lg:text-sm">Cards Reviewed</p> + </div> + </div> + + {/* Charts Section */} + <div className="grid grid-cols-1 xl:grid-cols-2 gap-4 lg:gap-6"> + {/* Performance Chart */} + <div className="bg-white dark:bg-gray-800 rounded-xl p-4 lg:p-6 border border-gray-200 dark:border-gray-700"> + <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Quiz Performance</h3> + <ResponsiveContainer width="100%" height={250} className="lg:h-[300px]"> + <AreaChart data={chartData}> + <CartesianGrid strokeDasharray="3 3" stroke="#374151" /> + <XAxis dataKey="date" stroke="#6B7280" fontSize={12} /> + <YAxis stroke="#6B7280" fontSize={12} /> + <Tooltip + contentStyle={{ + backgroundColor: '#1F2937', + border: 'none', + borderRadius: '8px', + color: '#fff', + fontSize: '14px' + }} + /> + <Area + type="monotone" + dataKey="score" + stroke="#3B82F6" + fill="url(#colorScore)" + strokeWidth={2} + /> + <defs> + <linearGradient id="colorScore" x1="0" y1="0" x2="0" y2="1"> + <stop offset="5%" stopColor="#3B82F6" stopOpacity={0.3}/> + <stop offset="95%" stopColor="#3B82F6" stopOpacity={0}/> + </linearGradient> + </defs> + </AreaChart> + </ResponsiveContainer> + </div> + + {/* Subject Progress */} + <div className="bg-white dark:bg-gray-800 rounded-xl p-4 lg:p-6 border border-gray-200 dark:border-gray-700"> + <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Subject Progress</h3> + <ResponsiveContainer width="100%" height={250} className="lg:h-[300px]"> + <BarChart data={subjectData}> + <CartesianGrid strokeDasharray="3 3" stroke="#374151" /> + <XAxis dataKey="name" stroke="#6B7280" fontSize={12} /> + <YAxis stroke="#6B7280" fontSize={12} /> + <Tooltip + contentStyle={{ + backgroundColor: '#1F2937', + border: 'none', + borderRadius: '8px', + color: '#fff', + fontSize: '14px' + }} + /> + <Bar dataKey="progress" fill="#10B981" radius={[4, 4, 0, 0]} /> + </BarChart> + </ResponsiveContainer> + </div> + </div> + + {/* Recent Activity & Upcoming */} + <div className="grid grid-cols-1 xl:grid-cols-2 gap-4 lg:gap-6"> + {/* Recent Activity */} + <div className="bg-white dark:bg-gray-800 rounded-xl p-4 lg:p-6 border border-gray-200 dark:border-gray-700"> + <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Recent Activity</h3> + <div className="space-y-3 lg:space-y-4"> + {quizResultsData.slice(0, 3).map((result, index) => ( + <div key={index} className="flex items-center gap-3 lg:gap-4"> + <div className="w-8 h-8 lg:w-10 lg:h-10 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center flex-shrink-0"> + <BookOpen className="w-4 h-4 lg:w-5 lg:h-5 text-blue-600 dark:text-blue-400" /> + </div> + <div className="flex-1 min-w-0"> + <p className="font-medium text-gray-900 dark:text-white text-sm lg:text-base truncate">{result.subject} Quiz</p> + <p className="text-xs lg:text-sm text-gray-600 dark:text-gray-400">Score: {result.score}% • {result.date}</p> + </div> + <div className="text-right flex-shrink-0"> + <div className="text-base lg:text-lg font-semibold text-green-600">{result.score}%</div> + </div> + </div> + ))} + </div> + </div> + + {/* Achievements */} + <div className="bg-white dark:bg-gray-800 rounded-xl p-4 lg:p-6 border border-gray-200 dark:border-gray-700"> + <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Achievements</h3> + <div className="space-y-3 lg:space-y-4"> + {studyProgressData.achievements.map((achievement, index) => ( + <div key={index} className="flex items-center gap-3 lg:gap-4"> + <div className={`w-8 h-8 lg:w-10 lg:h-10 rounded-lg flex items-center justify-center flex-shrink-0 ${ + achievement.unlocked + ? 'bg-yellow-100 dark:bg-yellow-900' + : 'bg-gray-100 dark:bg-gray-700' + }`}> + <Award className={`w-4 h-4 lg:w-5 lg:h-5 ${ + achievement.unlocked + ? 'text-yellow-600 dark:text-yellow-400' + : 'text-gray-400' + }`} /> + </div> + <div className="flex-1 min-w-0"> + <p className={`font-medium text-sm lg:text-base truncate ${ + achievement.unlocked + ? 'text-gray-900 dark:text-white' + : 'text-gray-500 dark:text-gray-400' + }`}> + {achievement.name} + </p> + <p className="text-xs lg:text-sm text-gray-600 dark:text-gray-400"> + {achievement.unlocked ? 'Unlocked!' : 'Keep studying to unlock'} + </p> + </div> + </div> + ))} + </div> + </div> + </div> + </div> + ); +}; + +export default Dashboard; |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import React, { useCallback, useState } from 'react'; +import { useDropzone } from 'react-dropzone'; +import { Upload, FileText, Image, Film, Music, X, Sparkles } from 'lucide-react'; +import { motion, AnimatePresence } from 'framer-motion'; + +interface UploadedFile { + id: string; + name: string; + size: number; + type: string; + url?: string; +} + +const FileUpload: React.FC = () => { + const [uploadedFiles, setUploadedFiles] = useState<UploadedFile[]>([]); + const [isProcessing, setIsProcessing] = useState(false); + + const onDrop = useCallback((acceptedFiles: File[]) => { + setIsProcessing(true); + + // Simulate file processing + setTimeout(() => { + const newFiles: UploadedFile[] = acceptedFiles.map(file => ({ + id: Math.random().toString(36).substr(2, 9), + name: file.name, + size: file.size, + type: file.type, + url: URL.createObjectURL(file) + })); + + setUploadedFiles(prev => [...prev, ...newFiles]); + setIsProcessing(false); + }, 2000); + }, []); + + const { getRootProps, getInputProps, isDragActive } = useDropzone({ + onDrop, + accept: { + 'application/pdf': ['.pdf'], + 'text/plain': ['.txt'], + 'application/msword': ['.doc'], + 'application/vnd.openxmlformats-officedocument.wordprocessingml.document': ['.docx'], + 'image/*': ['.png', '.jpg', '.jpeg', '.gif'], + 'video/*': ['.mp4', '.mov', '.avi'], + 'audio/*': ['.mp3', '.wav', '.aac'] + } + }); + + const removeFile = (id: string) => { + setUploadedFiles(prev => prev.filter(file => file.id !== id)); + }; + + const getFileIcon = (type: string) => { + if (type.startsWith('image/')) return <Image className="w-6 h-6" />; + if (type.startsWith('video/')) return <Film className="w-6 h-6" />; + if (type.startsWith('audio/')) return <Music className="w-6 h-6" />; + return <FileText className="w-6 h-6" />; + }; + + const formatFileSize = (bytes: number) => { + if (bytes === 0) return '0 Bytes'; + const k = 1024; + const sizes = ['Bytes', 'KB', 'MB', 'GB']; + const i = Math.floor(Math.log(bytes) / Math.log(k)); + return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]; + }; + + return ( + <div className="p-6 space-y-6"> + <div className="flex items-center justify-between"> + <div> + <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Upload Study Materials</h1> + <p className="text-gray-600 dark:text-gray-400 mt-1"> + Upload PDFs, documents, images, or other study materials for AI processing + </p> + </div> + <div className="flex items-center gap-2 text-sm text-blue-600 dark:text-blue-400"> + <Sparkles className="w-4 h-4" /> + <span>AI-Powered Processing</span> + </div> + </div> + + {/* Upload Zone */} + <motion.div + {...getRootProps()} + className={`border-2 border-dashed rounded-xl p-12 text-center cursor-pointer transition-all duration-300 ${ + isDragActive + ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20' + : 'border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500' + }`} + whileHover={{ scale: 1.02 }} + whileTap={{ scale: 0.98 }} + > + <input {...getInputProps()} /> + <motion.div + initial={{ opacity: 0, y: 20 }} + animate={{ opacity: 1, y: 0 }} + className="space-y-4" + > + <div className="w-16 h-16 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mx-auto"> + <Upload className="w-8 h-8 text-blue-600 dark:text-blue-400" /> + </div> + <div> + <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2"> + {isDragActive ? 'Drop files here...' : 'Upload your study materials'} + </h3> + <p className="text-gray-600 dark:text-gray-400"> + Drag & drop files here, or click to browse + </p> + <p className="text-sm text-gray-500 dark:text-gray-500 mt-2"> + Supports PDF, DOC, TXT, images, videos, and audio files + </p> + </div> + </motion.div> + </motion.div> + + {/* Processing Indicator */} + <AnimatePresence> + {isProcessing && ( + <motion.div + initial={{ opacity: 0, height: 0 }} + animate={{ opacity: 1, height: 'auto' }} + exit={{ opacity: 0, height: 0 }} + className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-700 rounded-xl p-4" + > + <div className="flex items-center gap-3"> + <div className="animate-spin w-5 h-5 border-2 border-blue-500 border-t-transparent rounded-full"></div> + <div> + <p className="font-medium text-blue-900 dark:text-blue-100">Processing files with AI...</p> + <p className="text-sm text-blue-700 dark:text-blue-300"> + Extracting content and generating flashcards automatically + </p> + </div> + </div> + </motion.div> + )} + </AnimatePresence> + + {/* Uploaded Files */} + {uploadedFiles.length > 0 && ( + <div className="space-y-4"> + <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Uploaded Files</h3> + <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> + {uploadedFiles.map((file) => ( + <motion.div + key={file.id} + initial={{ opacity: 0, scale: 0.9 }} + animate={{ opacity: 1, scale: 1 }} + className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-4" + > + <div className="flex items-start justify-between mb-3"> + <div className="w-12 h-12 bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center text-gray-600 dark:text-gray-400"> + {getFileIcon(file.type)} + </div> + <button + onClick={() => removeFile(file.id)} + className="text-gray-400 hover:text-red-500 transition-colors" + > + <X className="w-4 h-4" /> + </button> + </div> + <h4 className="font-medium text-gray-900 dark:text-white truncate">{file.name}</h4> + <p className="text-sm text-gray-600 dark:text-gray-400">{formatFileSize(file.size)}</p> + <div className="mt-3 flex gap-2"> + <button className="flex-1 bg-blue-500 text-white text-sm py-2 px-3 rounded-lg hover:bg-blue-600 transition-colors"> + Generate Cards + </button> + <button className="flex-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm py-2 px-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"> + View + </button> + </div> + </motion.div> + ))} + </div> + </div> + )} + + {/* AI Features */} + <div className="bg-gradient-to-r from-purple-500 to-pink-500 rounded-xl p-6 text-white"> + <h3 className="text-lg font-semibold mb-2">AI-Powered Study Enhancement</h3> + <p className="text-purple-100 mb-4"> + Our advanced AI automatically processes your uploaded materials to create: + </p> + <div className="grid grid-cols-1 md:grid-cols-3 gap-4"> + <div className="bg-white/10 rounded-lg p-3"> + <h4 className="font-medium mb-1">Smart Flashcards</h4> + <p className="text-sm text-purple-100">Auto-generated from key concepts</p> + </div> + <div className="bg-white/10 rounded-lg p-3"> + <h4 className="font-medium mb-1">Practice Quizzes</h4> + <p className="text-sm text-purple-100">Customized to your learning level</p> + </div> + <div className="bg-white/10 rounded-lg p-3"> + <h4 className="font-medium mb-1">Study Summaries</h4> + <p className="text-sm text-purple-100">Concise overviews of main topics</p> + </div> + </div> + </div> + </div> + ); +}; + +export default FileUpload; |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import React, { useState } from 'react'; +import { RotateCcw, ChevronLeft, ChevronRight, Brain, Shuffle, Play, BookOpen } from 'lucide-react'; +import { motion, AnimatePresence } from 'framer-motion'; +import { flashcardsData } from '../data/sampleData'; + +interface Card { + front: string; + back: string; +} + +const Flashcards: React.FC = () => { + const [selectedSubject, setSelectedSubject] = useState(flashcardsData.decks[0].subject); + const [currentCardIndex, setCurrentCardIndex] = useState(0); + const [isFlipped, setIsFlipped] = useState(false); + const [studyMode, setStudyMode] = useState<'review' | 'spaced'>('review'); + + const currentDeck = flashcardsData.decks.find(deck => deck.subject === selectedSubject); + const currentCard = currentDeck?.cards[currentCardIndex]; + + const nextCard = () => { + if (currentDeck && currentCardIndex < currentDeck.cards.length - 1) { + setCurrentCardIndex(prev => prev + 1); + setIsFlipped(false); + } + }; + + const prevCard = () => { + if (currentCardIndex > 0) { + setCurrentCardIndex(prev => prev - 1); + setIsFlipped(false); + } + }; + + const shuffleCards = () => { + setCurrentCardIndex(0); + setIsFlipped(false); + // In a real app, you'd shuffle the deck array + }; + + const resetProgress = () => { + setCurrentCardIndex(0); + setIsFlipped(false); + }; + + return ( + <div className="p-6 space-y-6"> + {/* Header */} + <div className="flex flex-col md:flex-row md:items-center justify-between gap-4"> + <div> + <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Flashcards</h1> + <p className="text-gray-600 dark:text-gray-400">Review and master your study materials</p> + </div> + + <div className="flex items-center gap-3"> + <select + value={studyMode} + onChange={(e) => setStudyMode(e.target.value as 'review' | 'spaced')} + className="px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white" + > + <option value="review">Review Mode</option> + <option value="spaced">Spaced Repetition</option> + </select> + + <button + onClick={shuffleCards} + className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors flex items-center gap-2" + > + <Shuffle className="w-4 h-4" /> + Shuffle + </button> + </div> + </div> + + {/* Subject Tabs */} + <div className="flex flex-wrap gap-2"> + {flashcardsData.decks.map((deck) => ( + <button + key={deck.subject} + onClick={() => { + setSelectedSubject(deck.subject); + setCurrentCardIndex(0); + setIsFlipped(false); + }} + className={`px-4 py-2 rounded-lg font-medium transition-colors ${ + selectedSubject === deck.subject + ? 'bg-blue-500 text-white' + : 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700' + }`} + > + {deck.subject} + <span className="ml-2 text-sm opacity-75">({deck.cards.length})</span> + </button> + ))} + </div> + + {/* Progress */} + <div className="bg-white dark:bg-gray-800 rounded-xl p-4 border border-gray-200 dark:border-gray-700"> + <div className="flex items-center justify-between mb-2"> + <span className="text-sm font-medium text-gray-700 dark:text-gray-300"> + Card {currentCardIndex + 1} of {currentDeck?.cards.length} + </span> + <span className="text-sm text-gray-600 dark:text-gray-400"> + {Math.round(((currentCardIndex + 1) / (currentDeck?.cards.length || 1)) * 100)}% Complete + </span> + </div> + <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2"> + <div + className="bg-blue-500 h-2 rounded-full transition-all duration-300" + style={{ + width: `${((currentCardIndex + 1) / (currentDeck?.cards.length || 1)) * 100}%` + }} + /> + </div> + </div> + + {/* Flashcard */} + <div className="flex justify-center"> + <div className="w-full max-w-2xl"> + <motion.div + className="relative h-80 perspective-1000" + style={{ perspective: '1000px' }} + > + <motion.div + className="relative w-full h-full cursor-pointer" + onClick={() => setIsFlipped(!isFlipped)} + animate={{ rotateY: isFlipped ? 180 : 0 }} + transition={{ duration: 0.6, type: "spring" }} + style={{ transformStyle: 'preserve-3d' }} + > + {/* Front of card */} + <div + className="absolute inset-0 w-full h-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-lg flex items-center justify-center p-8" + style={{ backfaceVisibility: 'hidden' }} + > + <div className="text-center"> + <BookOpen className="w-8 h-8 text-blue-500 mx-auto mb-4" /> + <p className="text-lg font-medium text-gray-900 dark:text-white"> + {currentCard?.front} + </p> + <p className="text-sm text-gray-500 dark:text-gray-400 mt-4"> + Click to reveal answer + </p> + </div> + </div> + + {/* Back of card */} + <div + className="absolute inset-0 w-full h-full bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl shadow-lg flex items-center justify-center p-8" + style={{ + backfaceVisibility: 'hidden', + transform: 'rotateY(180deg)' + }} + > + <div className="text-center text-white"> + <Brain className="w-8 h-8 mx-auto mb-4" /> + <p className="text-lg font-medium"> + {currentCard?.back} + </p> + <p className="text-sm text-blue-100 mt-4"> + Click to return to question + </p> + </div> + </div> + </motion.div> + </motion.div> + </div> + </div> + + {/* Controls */} + <div className="flex items-center justify-center gap-4"> + <button + onClick={prevCard} + disabled={currentCardIndex === 0} + className="p-3 bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors" + > + <ChevronLeft className="w-6 h-6" /> + </button> + + <button + onClick={resetProgress} + className="p-3 bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors" + > + <RotateCcw className="w-6 h-6" /> + </button> + + <button + onClick={nextCard} + disabled={!currentDeck || currentCardIndex === currentDeck.cards.length - 1} + className="p-3 bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors" + > + <ChevronRight className="w-6 h-6" /> + </button> + </div> + + {/* Study Tips */} + <div className="bg-gradient-to-r from-green-500 to-blue-500 rounded-xl p-6 text-white"> + <h3 className="text-lg font-semibold mb-2">Study Tips</h3> + <div className="grid grid-cols-1 md:grid-cols-3 gap-4"> + <div> + <h4 className="font-medium mb-1">Active Recall</h4> + <p className="text-sm text-green-100">Try to answer before flipping the card</p> + </div> + <div> + <h4 className="font-medium mb-1">Spaced Repetition</h4> + <p className="text-sm text-green-100">Review cards at increasing intervals</p> + </div> + <div> + <h4 className="font-medium mb-1">Mark Difficulty</h4> + <p className="text-sm text-green-100">Focus more time on challenging cards</p> + </div> + </div> + </div> + </div> + ); +}; + +export default Flashcards; |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import React from 'react'; +import { Search, Bell, Moon, Sun, MessageCircle, Menu } from 'lucide-react'; +import { useTheme } from '../contexts/ThemeContext'; +import { studyProgressData } from '../data/sampleData'; + +interface HeaderProps { + showAIChat: boolean; + setShowAIChat: (show: boolean) => void; + onMenuClick?: () => void; +} + +const Header: React.FC<HeaderProps> = ({ showAIChat, setShowAIChat, onMenuClick }) => { + const { isDark, toggleTheme } = useTheme(); + + return ( + <header className="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 px-4 lg:px-6 py-4"> + <div className="flex items-center justify-between"> + {/* Mobile Menu Button */} + <button + onClick={onMenuClick} + className="lg:hidden p-2 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg touch-manipulation" + > + <Menu className="w-5 h-5" /> + </button> + + {/* Search */} + <div className="flex-1 max-w-md mx-4 lg:mx-0"> + <div className="relative"> + <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" /> + <input + type="text" + placeholder="Search materials, notes, or ask AI..." + className="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-500 focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm lg:text-base" + /> + </div> + </div> + + {/* Right side */} + <div className="flex items-center gap-2 lg:gap-4"> + {/* AI Chat Toggle */} + <button + onClick={() => setShowAIChat(!showAIChat)} + className={`p-2 rounded-lg transition-colors touch-manipulation ${ + showAIChat + ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400' + : 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800' + }`} + > + <MessageCircle className="w-5 h-5" /> + </button> + + {/* Notifications */} + <button className="relative p-2 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg touch-manipulation"> + <Bell className="w-5 h-5" /> + <div className="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></div> + </button> + + {/* Theme Toggle */} + <button + onClick={toggleTheme} + className="p-2 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg touch-manipulation" + > + {isDark ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />} + </button> + + {/* User Profile */} + <div className="flex items-center gap-2 lg:gap-3"> + <div className="text-right hidden sm:block"> + <div className="text-sm font-medium text-gray-900 dark:text-white"> + {studyProgressData.user.name} + </div> + <div className="text-xs text-gray-500 dark:text-gray-400"> + Level {studyProgressData.user.level} • {studyProgressData.user.xpPoints} XP + </div> + </div> + <div className="w-8 h-8 lg:w-10 lg:h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-white font-medium text-sm lg:text-base"> + {studyProgressData.user.name.split(' ').map(n => n[0]).join('')} + </div> + </div> + </div> + </div> + </header> + ); +}; + +export default Header; |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 +295 +296 +297 +298 +299 +300 +301 +302 +303 +304 +305 +306 +307 +308 +309 +310 +311 +312 +313 +314 +315 +316 +317 +318 +319 +320 +321 +322 +323 +324 +325 +326 +327 +328 +329 +330 +331 +332 +333 +334 +335 +336 +337 +338 +339 +340 +341 +342 +343 +344 +345 +346 +347 +348 +349 +350 +351 +352 +353 +354 +355 +356 +357 +358 +359 +360 +361 +362 +363 +364 +365 +366 +367 +368 +369 +370 +371 +372 +373 +374 +375 +376 +377 +378 +379 +380 +381 +382 +383 +384 +385 +386 +387 +388 +389 +390 +391 +392 +393 +394 +395 +396 +397 +398 +399 +400 +401 +402 +403 +404 +405 +406 +407 +408 +409 +410 +411 +412 +413 +414 +415 +416 +417 +418 +419 +420 +421 +422 +423 +424 +425 +426 +427 +428 +429 +430 +431 +432 +433 +434 +435 +436 +437 +438 +439 +440 +441 +442 +443 +444 +445 +446 +447 +448 +449 +450 +451 +452 +453 +454 +455 +456 +457 +458 +459 +460 +461 +462 +463 +464 +465 +466 +467 +468 +469 +470 +471 +472 +473 +474 +475 +476 +477 +478 +479 +480 +481 +482 +483 +484 +485 +486 +487 +488 +489 +490 +491 +492 +493 +494 +495 +496 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import React, { useState } from 'react'; +import { motion, AnimatePresence } from 'framer-motion'; +import { + FileText, + Image, + Film, + Music, + Download, + Eye, + Edit3, + Trash2, + Plus, + Search, + Filter, + Grid3X3, + List, + Calendar, + Tag, + Star, + MoreVertical, + Folder, + Upload +} from 'lucide-react'; + +interface Material { + id: string; + name: string; + type: 'pdf' | 'doc' | 'image' | 'video' | 'audio' | 'text'; + size: number; + uploadDate: string; + lastAccessed: string; + tags: string[]; + favorite: boolean; + progress?: number; + thumbnail?: string; + description?: string; + folder?: string; +} + +const Materials: React.FC = () => { + const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid'); + const [sortBy, setSortBy] = useState<'name' | 'date' | 'size' | 'type'>('date'); + const [filterType, setFilterType] = useState<'all' | 'pdf' | 'doc' | 'image' | 'video' | 'audio'>('all'); + const [searchQuery, setSearchQuery] = useState(''); + const [selectedFolder, setSelectedFolder] = useState<string>('all'); + + const materials: Material[] = [ + { + id: '1', + name: 'Psychology Study Guide', + type: 'pdf', + size: 2457600, // 2.4 MB + uploadDate: '2025-06-20', + lastAccessed: '2025-06-28', + tags: ['psychology', 'study-guide', 'cognitive'], + favorite: true, + progress: 75, + description: 'Comprehensive guide covering cognitive psychology fundamentals', + folder: 'Psychology' + }, + { + id: '2', + name: 'Biology Lecture Notes', + type: 'doc', + size: 1234567, + uploadDate: '2025-06-15', + lastAccessed: '2025-06-27', + tags: ['biology', 'notes', 'cellular'], + favorite: false, + progress: 60, + description: 'Detailed notes from cellular biology lectures', + folder: 'Biology' + }, + { + id: '3', + name: 'History Timeline Infographic', + type: 'image', + size: 987654, + uploadDate: '2025-06-18', + lastAccessed: '2025-06-26', + tags: ['history', 'timeline', 'visual'], + favorite: true, + description: 'Visual timeline of major historical events', + folder: 'History' + }, + { + id: '4', + name: 'Chemistry Lab Video', + type: 'video', + size: 15728640, // 15 MB + uploadDate: '2025-06-22', + lastAccessed: '2025-06-28', + tags: ['chemistry', 'lab', 'experiment'], + favorite: false, + progress: 30, + description: 'Laboratory demonstration of chemical reactions', + folder: 'Chemistry' + }, + { + id: '5', + name: 'Math Formula Sheet', + type: 'pdf', + size: 654321, + uploadDate: '2025-06-25', + lastAccessed: '2025-06-28', + tags: ['mathematics', 'formulas', 'reference'], + favorite: true, + description: 'Quick reference for important mathematical formulas', + folder: 'Mathematics' + }, + { + id: '6', + name: 'Physics Audio Lecture', + type: 'audio', + size: 8765432, + uploadDate: '2025-06-19', + lastAccessed: '2025-06-25', + tags: ['physics', 'lecture', 'quantum'], + favorite: false, + progress: 45, + description: 'Audio recording of quantum physics lecture', + folder: 'Physics' + } + ]; + + const folders = ['all', ...Array.from(new Set(materials.map(m => m.folder).filter(Boolean)))]; + + const getFileIcon = (type: string) => { + switch (type) { + case 'image': return <Image className="w-6 h-6" />; + case 'video': return <Film className="w-6 h-6" />; + case 'audio': return <Music className="w-6 h-6" />; + default: return <FileText className="w-6 h-6" />; + } + }; + + const getFileColor = (type: string) => { + switch (type) { + case 'pdf': return 'text-red-600 bg-red-100 dark:bg-red-900 dark:text-red-400'; + case 'doc': return 'text-blue-600 bg-blue-100 dark:bg-blue-900 dark:text-blue-400'; + case 'image': return 'text-green-600 bg-green-100 dark:bg-green-900 dark:text-green-400'; + case 'video': return 'text-purple-600 bg-purple-100 dark:bg-purple-900 dark:text-purple-400'; + case 'audio': return 'text-orange-600 bg-orange-100 dark:bg-orange-900 dark:text-orange-400'; + default: return 'text-gray-600 bg-gray-100 dark:bg-gray-700 dark:text-gray-400'; + } + }; + + const formatFileSize = (bytes: number) => { + if (bytes === 0) return '0 Bytes'; + const k = 1024; + const sizes = ['Bytes', 'KB', 'MB', 'GB']; + const i = Math.floor(Math.log(bytes) / Math.log(k)); + return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]; + }; + + const formatDate = (dateString: string) => { + return new Date(dateString).toLocaleDateString(); + }; + + const filteredMaterials = materials + .filter(material => { + if (filterType !== 'all' && material.type !== filterType) return false; + if (selectedFolder !== 'all' && material.folder !== selectedFolder) return false; + if (searchQuery && !material.name.toLowerCase().includes(searchQuery.toLowerCase()) && + !material.tags.some(tag => tag.toLowerCase().includes(searchQuery.toLowerCase()))) return false; + return true; + }) + .sort((a, b) => { + switch (sortBy) { + case 'name': return a.name.localeCompare(b.name); + case 'date': return new Date(b.uploadDate).getTime() - new Date(a.uploadDate).getTime(); + case 'size': return b.size - a.size; + case 'type': return a.type.localeCompare(b.type); + default: return 0; + } + }); + + return ( + <div className="p-6 space-y-6"> + {/* Header */} + <div className="flex items-center justify-between"> + <div> + <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Study Materials</h1> + <p className="text-gray-600 dark:text-gray-400 mt-1"> + Organize and access all your learning resources + </p> + </div> + <button className="bg-gradient-to-r from-blue-500 to-purple-600 text-white px-4 py-2 rounded-lg hover:from-blue-600 hover:to-purple-700 transition-all duration-200 flex items-center gap-2"> + <Upload className="w-4 h-4" /> + Upload Files + </button> + </div> + + {/* Search and Filters */} + <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700"> + <div className="flex flex-col lg:flex-row gap-4"> + {/* Search */} + <div className="flex-1"> + <div className="relative"> + <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" /> + <input + type="text" + placeholder="Search materials, tags, or descriptions..." + value={searchQuery} + onChange={(e) => setSearchQuery(e.target.value)} + className="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 focus:ring-2 focus:ring-blue-500 focus:border-transparent" + /> + </div> + </div> + + {/* Filters */} + <div className="flex gap-4"> + <select + value={selectedFolder} + onChange={(e) => setSelectedFolder(e.target.value)} + className="px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white" + > + {folders.map(folder => ( + <option key={folder} value={folder}> + {folder === 'all' ? 'All Folders' : folder} + </option> + ))} + </select> + + <select + value={filterType} + onChange={(e) => setFilterType(e.target.value as any)} + className="px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white" + > + <option value="all">All Types</option> + <option value="pdf">PDF</option> + <option value="doc">Documents</option> + <option value="image">Images</option> + <option value="video">Videos</option> + <option value="audio">Audio</option> + </select> + + <select + value={sortBy} + onChange={(e) => setSortBy(e.target.value as any)} + className="px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white" + > + <option value="date">Sort by Date</option> + <option value="name">Sort by Name</option> + <option value="size">Sort by Size</option> + <option value="type">Sort by Type</option> + </select> + + <div className="flex border border-gray-300 dark:border-gray-600 rounded-lg"> + <button + onClick={() => setViewMode('grid')} + className={`p-2 ${viewMode === 'grid' ? 'bg-blue-500 text-white' : 'text-gray-600 dark:text-gray-400'}`} + > + <Grid3X3 className="w-4 h-4" /> + </button> + <button + onClick={() => setViewMode('list')} + className={`p-2 ${viewMode === 'list' ? 'bg-blue-500 text-white' : 'text-gray-600 dark:text-gray-400'}`} + > + <List className="w-4 h-4" /> + </button> + </div> + </div> + </div> + </div> + + {/* Stats */} + <div className="grid grid-cols-1 md:grid-cols-4 gap-4"> + <div className="bg-white dark:bg-gray-800 rounded-xl p-4 border border-gray-200 dark:border-gray-700"> + <div className="text-2xl font-bold text-blue-600 dark:text-blue-400">{materials.length}</div> + <div className="text-sm text-gray-600 dark:text-gray-400">Total Files</div> + </div> + <div className="bg-white dark:bg-gray-800 rounded-xl p-4 border border-gray-200 dark:border-gray-700"> + <div className="text-2xl font-bold text-green-600 dark:text-green-400"> + {formatFileSize(materials.reduce((sum, m) => sum + m.size, 0))} + </div> + <div className="text-sm text-gray-600 dark:text-gray-400">Total Size</div> + </div> + <div className="bg-white dark:bg-gray-800 rounded-xl p-4 border border-gray-200 dark:border-gray-700"> + <div className="text-2xl font-bold text-purple-600 dark:text-purple-400"> + {materials.filter(m => m.favorite).length} + </div> + <div className="text-sm text-gray-600 dark:text-gray-400">Favorites</div> + </div> + <div className="bg-white dark:bg-gray-800 rounded-xl p-4 border border-gray-200 dark:border-gray-700"> + <div className="text-2xl font-bold text-orange-600 dark:text-orange-400"> + {folders.length - 1} + </div> + <div className="text-sm text-gray-600 dark:text-gray-400">Folders</div> + </div> + </div> + + {/* Materials Grid/List */} + <AnimatePresence mode="wait"> + {viewMode === 'grid' ? ( + <motion.div + key="grid" + initial={{ opacity: 0 }} + animate={{ opacity: 1 }} + exit={{ opacity: 0 }} + className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6" + > + {filteredMaterials.map((material, index) => ( + <motion.div + key={material.id} + initial={{ opacity: 0, y: 20 }} + animate={{ opacity: 1, y: 0 }} + transition={{ delay: index * 0.1 }} + className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700 hover:shadow-lg transition-all duration-200" + > + <div className="flex items-start justify-between mb-4"> + <div className={`w-12 h-12 rounded-lg flex items-center justify-center ${getFileColor(material.type)}`}> + {getFileIcon(material.type)} + </div> + <div className="flex items-center gap-2"> + {material.favorite && ( + <Star className="w-4 h-4 text-yellow-500 fill-current" /> + )} + <button className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"> + <MoreVertical className="w-4 h-4" /> + </button> + </div> + </div> + + <h4 className="font-semibold text-gray-900 dark:text-white mb-2 truncate"> + {material.name} + </h4> + + {material.description && ( + <p className="text-sm text-gray-600 dark:text-gray-400 mb-3 line-clamp-2"> + {material.description} + </p> + )} + + {material.progress !== undefined && ( + <div className="mb-3"> + <div className="flex justify-between items-center mb-1"> + <span className="text-xs text-gray-600 dark:text-gray-400">Progress</span> + <span className="text-xs text-gray-600 dark:text-gray-400">{material.progress}%</span> + </div> + <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1"> + <div + className="bg-blue-500 h-1 rounded-full transition-all duration-300" + style={{ width: `${material.progress}%` }} + /> + </div> + </div> + )} + + <div className="flex flex-wrap gap-1 mb-3"> + {material.tags.slice(0, 2).map((tag, tagIndex) => ( + <span + key={tagIndex} + className="px-2 py-1 bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400 text-xs rounded-full" + > + {tag} + </span> + ))} + {material.tags.length > 2 && ( + <span className="px-2 py-1 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 text-xs rounded-full"> + +{material.tags.length - 2} + </span> + )} + </div> + + <div className="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400 mb-4"> + <span>{formatFileSize(material.size)}</span> + <span>{formatDate(material.uploadDate)}</span> + </div> + + <div className="flex gap-2"> + <button className="flex-1 bg-blue-500 text-white text-sm py-2 px-3 rounded-lg hover:bg-blue-600 transition-colors flex items-center justify-center gap-1"> + <Eye className="w-3 h-3" /> + View + </button> + <button className="bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 text-sm py-2 px-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"> + <Download className="w-3 h-3" /> + </button> + </div> + </motion.div> + ))} + </motion.div> + ) : ( + <motion.div + key="list" + initial={{ opacity: 0 }} + animate={{ opacity: 1 }} + exit={{ opacity: 0 }} + className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden" + > + <div className="grid grid-cols-12 gap-4 p-4 bg-gray-50 dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300 border-b border-gray-200 dark:border-gray-600"> + <div className="col-span-5">Name</div> + <div className="col-span-2">Type</div> + <div className="col-span-1">Size</div> + <div className="col-span-2">Modified</div> + <div className="col-span-1">Progress</div> + <div className="col-span-1">Actions</div> + </div> + + {filteredMaterials.map((material, index) => ( + <motion.div + key={material.id} + initial={{ opacity: 0, x: -20 }} + animate={{ opacity: 1, x: 0 }} + transition={{ delay: index * 0.05 }} + className="grid grid-cols-12 gap-4 p-4 border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors" + > + <div className="col-span-5 flex items-center gap-3"> + <div className={`w-8 h-8 rounded-lg flex items-center justify-center ${getFileColor(material.type)}`}> + {getFileIcon(material.type)} + </div> + <div> + <div className="font-medium text-gray-900 dark:text-white flex items-center gap-2"> + {material.name} + {material.favorite && ( + <Star className="w-3 h-3 text-yellow-500 fill-current" /> + )} + </div> + {material.folder && ( + <div className="text-xs text-gray-500 dark:text-gray-400 flex items-center gap-1"> + <Folder className="w-3 h-3" /> + {material.folder} + </div> + )} + </div> + </div> + + <div className="col-span-2 flex items-center"> + <span className={`px-2 py-1 rounded-full text-xs font-medium ${getFileColor(material.type)}`}> + {material.type.toUpperCase()} + </span> + </div> + + <div className="col-span-1 flex items-center text-sm text-gray-600 dark:text-gray-400"> + {formatFileSize(material.size)} + </div> + + <div className="col-span-2 flex items-center text-sm text-gray-600 dark:text-gray-400"> + {formatDate(material.lastAccessed)} + </div> + + <div className="col-span-1 flex items-center"> + {material.progress !== undefined ? ( + <div className="w-full"> + <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1"> + <div + className="bg-blue-500 h-1 rounded-full" + style={{ width: `${material.progress}%` }} + /> + </div> + <div className="text-xs text-gray-500 dark:text-gray-400 mt-1"> + {material.progress}% + </div> + </div> + ) : ( + <span className="text-xs text-gray-400">-</span> + )} + </div> + + <div className="col-span-1 flex items-center gap-2"> + <button className="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300"> + <Eye className="w-4 h-4" /> + </button> + <button className="text-gray-600 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"> + <Download className="w-4 h-4" /> + </button> + <button className="text-gray-600 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"> + <MoreVertical className="w-4 h-4" /> + </button> + </div> + </motion.div> + ))} + </motion.div> + )} + </AnimatePresence> + + {/* Empty State */} + {filteredMaterials.length === 0 && ( + <div className="text-center py-12"> + <FileText className="w-16 h-16 text-gray-400 mx-auto mb-4" /> + <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">No materials found</h3> + <p className="text-gray-600 dark:text-gray-400 mb-4"> + {searchQuery || filterType !== 'all' || selectedFolder !== 'all' + ? 'Try adjusting your search or filters' + : 'Upload your first study material to get started'} + </p> + <button className="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition-colors"> + Upload Files + </button> + </div> + )} + </div> + ); +}; + +export default Materials; |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 +295 +296 +297 +298 +299 +300 +301 +302 +303 +304 +305 +306 +307 +308 +309 +310 +311 +312 +313 +314 +315 +316 +317 +318 +319 +320 +321 +322 +323 +324 +325 +326 +327 +328 +329 +330 +331 +332 +333 +334 +335 +336 +337 +338 +339 +340 +341 +342 +343 +344 +345 +346 +347 +348 +349 +350 +351 +352 +353 +354 +355 +356 +357 +358 +359 +360 +361 +362 +363 +364 +365 +366 +367 +368 +369 +370 +371 +372 +373 +374 +375 +376 +377 +378 +379 +380 +381 +382 +383 +384 +385 +386 +387 +388 +389 +390 +391 +392 +393 +394 +395 +396 +397 +398 +399 +400 +401 +402 +403 +404 +405 +406 +407 +408 +409 +410 +411 +412 +413 +414 +415 +416 +417 +418 +419 +420 +421 +422 +423 +424 +425 +426 +427 +428 +429 +430 +431 +432 +433 +434 +435 +436 +437 +438 +439 +440 +441 +442 +443 +444 +445 +446 +447 +448 +449 +450 +451 +452 +453 +454 +455 +456 +457 +458 +459 +460 +461 +462 +463 +464 +465 +466 +467 +468 +469 +470 +471 +472 +473 +474 +475 +476 +477 +478 +479 +480 +481 +482 +483 +484 +485 +486 +487 +488 +489 +490 +491 +492 +493 +494 +495 +496 +497 +498 +499 +500 +501 +502 +503 +504 +505 +506 +507 +508 +509 +510 +511 +512 +513 +514 +515 +516 +517 +518 +519 +520 +521 +522 +523 +524 +525 +526 +527 +528 +529 +530 +531 +532 +533 +534 +535 +536 +537 +538 +539 +540 +541 +542 +543 +544 +545 +546 +547 +548 +549 +550 +551 +552 +553 +554 +555 +556 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import React, { useState, useEffect } from 'react'; +import { motion, AnimatePresence } from 'framer-motion'; +import { + Play, + Pause, + RotateCcw, + Check, + X, + Clock, + Trophy, + Target, + ChevronRight, + Brain, + Zap, + Award +} from 'lucide-react'; + +interface Question { + id: string; + question: string; + options: string[]; + correctAnswer: number; + explanation: string; + difficulty: 'easy' | 'medium' | 'hard'; + subject: string; +} + +interface QuizResult { + questionId: string; + selectedAnswer: number | null; + isCorrect: boolean; + timeSpent: number; +} + +const Quiz: React.FC = () => { + const [selectedSubject, setSelectedSubject] = useState('Psychology'); + const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0); + const [selectedAnswer, setSelectedAnswer] = useState<number | null>(null); + const [showResult, setShowResult] = useState(false); + const [quizStarted, setQuizStarted] = useState(false); + const [quizCompleted, setQuizCompleted] = useState(false); + const [results, setResults] = useState<QuizResult[]>([]); + const [timeElapsed, setTimeElapsed] = useState(0); + const [questionStartTime, setQuestionStartTime] = useState(Date.now()); + + const subjects = ['Psychology', 'Biology', 'History', 'Mathematics', 'Physics']; + + const questions: Question[] = [ + { + id: '1', + question: 'What is cognitive dissonance?', + options: [ + 'Mental discomfort from conflicting beliefs', + 'A type of memory disorder', + 'Enhanced cognitive ability', + 'Rapid information processing' + ], + correctAnswer: 0, + explanation: 'Cognitive dissonance occurs when a person holds contradictory beliefs, ideas, or values simultaneously, causing psychological discomfort.', + difficulty: 'medium', + subject: 'Psychology' + }, + { + id: '2', + question: 'Which part of the brain processes emotions and fear?', + options: [ + 'Cerebellum', + 'Amygdala', + 'Hippocampus', + 'Frontal cortex' + ], + correctAnswer: 1, + explanation: 'The amygdala is an almond-shaped structure in the limbic system that plays a key role in processing emotions, particularly fear and threat detection.', + difficulty: 'easy', + subject: 'Psychology' + }, + { + id: '3', + question: 'What is the process by which plants convert light energy into chemical energy?', + options: [ + 'Cellular respiration', + 'Photosynthesis', + 'Fermentation', + 'Osmosis' + ], + correctAnswer: 1, + explanation: 'Photosynthesis is the process by which plants use sunlight, water, and carbon dioxide to produce glucose and oxygen.', + difficulty: 'easy', + subject: 'Biology' + }, + { + id: '4', + question: 'Which event triggered World War I?', + options: [ + 'Invasion of Poland', + 'Assassination of Archduke Franz Ferdinand', + 'Attack on Pearl Harbor', + 'Sinking of the Lusitania' + ], + correctAnswer: 1, + explanation: 'The assassination of Archduke Franz Ferdinand of Austria-Hungary on June 28, 1914, was the immediate trigger that led to the outbreak of World War I.', + difficulty: 'medium', + subject: 'History' + }, + { + id: '5', + question: 'What is the function of mitochondria in cells?', + options: [ + 'Protein synthesis', + 'DNA storage', + 'Energy production', + 'Waste removal' + ], + correctAnswer: 2, + explanation: 'Mitochondria are known as the powerhouses of the cell because they produce ATP (adenosine triphosphate), which provides energy for cellular processes.', + difficulty: 'medium', + subject: 'Biology' + } + ]; + + const currentQuestions = questions.filter(q => q.subject === selectedSubject); + const currentQuestion = currentQuestions[currentQuestionIndex]; + + useEffect(() => { + let interval: NodeJS.Timeout; + if (quizStarted && !quizCompleted) { + interval = setInterval(() => { + setTimeElapsed(prev => prev + 1); + }, 1000); + } + return () => clearInterval(interval); + }, [quizStarted, quizCompleted]); + + const startQuiz = () => { + setQuizStarted(true); + setCurrentQuestionIndex(0); + setSelectedAnswer(null); + setShowResult(false); + setQuizCompleted(false); + setResults([]); + setTimeElapsed(0); + setQuestionStartTime(Date.now()); + }; + + const handleAnswerSelect = (answerIndex: number) => { + if (showResult) return; + setSelectedAnswer(answerIndex); + }; + + const handleSubmitAnswer = () => { + if (selectedAnswer === null) return; + + const isCorrect = selectedAnswer === currentQuestion.correctAnswer; + const timeSpent = Math.floor((Date.now() - questionStartTime) / 1000); + + const result: QuizResult = { + questionId: currentQuestion.id, + selectedAnswer, + isCorrect, + timeSpent + }; + + setResults(prev => [...prev, result]); + setShowResult(true); + }; + + const handleNextQuestion = () => { + if (currentQuestionIndex < currentQuestions.length - 1) { + setCurrentQuestionIndex(prev => prev + 1); + setSelectedAnswer(null); + setShowResult(false); + setQuestionStartTime(Date.now()); + } else { + setQuizCompleted(true); + } + }; + + const resetQuiz = () => { + setQuizStarted(false); + setCurrentQuestionIndex(0); + setSelectedAnswer(null); + setShowResult(false); + setQuizCompleted(false); + setResults([]); + setTimeElapsed(0); + }; + + const formatTime = (seconds: number) => { + const mins = Math.floor(seconds / 60); + const secs = seconds % 60; + return `${mins}:${secs.toString().padStart(2, '0')}`; + }; + + const calculateScore = () => { + const correct = results.filter(r => r.isCorrect).length; + return Math.round((correct / results.length) * 100); + }; + + const getDifficultyColor = (difficulty: string) => { + switch (difficulty) { + case 'easy': return 'text-green-600 bg-green-100 dark:bg-green-900 dark:text-green-400'; + case 'medium': return 'text-yellow-600 bg-yellow-100 dark:bg-yellow-900 dark:text-yellow-400'; + case 'hard': return 'text-red-600 bg-red-100 dark:bg-red-900 dark:text-red-400'; + default: return 'text-gray-600 bg-gray-100'; + } + }; + + if (!quizStarted) { + return ( + <div className="p-6 space-y-6"> + {/* Header */} + <div className="flex items-center justify-between"> + <div> + <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Interactive Quizzes</h1> + <p className="text-gray-600 dark:text-gray-400 mt-1"> + Test your knowledge with AI-generated questions + </p> + </div> + <div className="flex items-center gap-2 text-sm text-purple-600 dark:text-purple-400"> + <Zap className="w-4 h-4" /> + <span>AI-Powered</span> + </div> + </div> + + {/* Subject Selection */} + <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700"> + <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Choose Subject</h3> + <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3"> + {subjects.map((subject) => ( + <button + key={subject} + onClick={() => setSelectedSubject(subject)} + className={`p-4 rounded-lg border-2 transition-all duration-200 ${ + selectedSubject === subject + ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400' + : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 text-gray-700 dark:text-gray-300' + }`} + > + <div className="font-medium">{subject}</div> + <div className="text-sm opacity-75"> + {currentQuestions.filter(q => q.subject === subject).length} questions + </div> + </button> + ))} + </div> + </div> + + {/* Quiz Preview */} + <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700"> + <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4"> + {selectedSubject} Quiz Preview + </h3> + + <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> + <div className="text-center p-4 bg-blue-50 dark:bg-blue-900/30 rounded-lg"> + <Brain className="w-8 h-8 text-blue-600 dark:text-blue-400 mx-auto mb-2" /> + <div className="font-semibold text-gray-900 dark:text-white">{currentQuestions.length}</div> + <div className="text-sm text-gray-600 dark:text-gray-400">Questions</div> + </div> + <div className="text-center p-4 bg-green-50 dark:bg-green-900/30 rounded-lg"> + <Clock className="w-8 h-8 text-green-600 dark:text-green-400 mx-auto mb-2" /> + <div className="font-semibold text-gray-900 dark:text-white">~{currentQuestions.length * 2} min</div> + <div className="text-sm text-gray-600 dark:text-gray-400">Estimated Time</div> + </div> + <div className="text-center p-4 bg-purple-50 dark:bg-purple-900/30 rounded-lg"> + <Target className="w-8 h-8 text-purple-600 dark:text-purple-400 mx-auto mb-2" /> + <div className="font-semibold text-gray-900 dark:text-white">Mixed</div> + <div className="text-sm text-gray-600 dark:text-gray-400">Difficulty</div> + </div> + </div> + + <button + onClick={startQuiz} + className="w-full bg-gradient-to-r from-blue-500 to-purple-600 text-white py-3 px-6 rounded-lg hover:from-blue-600 hover:to-purple-700 transition-all duration-200 flex items-center justify-center gap-2 font-medium" + > + <Play className="w-5 h-5" /> + Start Quiz + </button> + </div> + + {/* Study Tips */} + <div className="bg-gradient-to-r from-green-500 to-blue-500 rounded-xl p-6 text-white"> + <h3 className="text-lg font-semibold mb-2">Quiz Tips</h3> + <div className="grid grid-cols-1 md:grid-cols-3 gap-4"> + <div> + <h4 className="font-medium mb-1">Read Carefully</h4> + <p className="text-sm text-green-100">Take time to understand each question fully</p> + </div> + <div> + <h4 className="font-medium mb-1">Eliminate Options</h4> + <p className="text-sm text-green-100">Rule out obviously wrong answers first</p> + </div> + <div> + <h4 className="font-medium mb-1">Learn from Mistakes</h4> + <p className="text-sm text-green-100">Review explanations to improve understanding</p> + </div> + </div> + </div> + </div> + ); + } + + if (quizCompleted) { + const score = calculateScore(); + const averageTime = Math.round(results.reduce((sum, r) => sum + r.timeSpent, 0) / results.length); + + return ( + <div className="p-6 space-y-6"> + {/* Results Header */} + <div className="text-center"> + <motion.div + initial={{ scale: 0 }} + animate={{ scale: 1 }} + className="w-20 h-20 bg-gradient-to-r from-green-500 to-blue-500 rounded-full flex items-center justify-center mx-auto mb-4" + > + <Trophy className="w-10 h-10 text-white" /> + </motion.div> + <h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">Quiz Complete!</h1> + <p className="text-gray-600 dark:text-gray-400">Great job on completing the {selectedSubject} quiz</p> + </div> + + {/* Score Summary */} + <div className="grid grid-cols-1 md:grid-cols-4 gap-4"> + <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700 text-center"> + <div className="text-3xl font-bold text-blue-600 dark:text-blue-400 mb-2">{score}%</div> + <div className="text-gray-600 dark:text-gray-400">Final Score</div> + </div> + <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700 text-center"> + <div className="text-3xl font-bold text-green-600 dark:text-green-400 mb-2"> + {results.filter(r => r.isCorrect).length} + </div> + <div className="text-gray-600 dark:text-gray-400">Correct Answers</div> + </div> + <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700 text-center"> + <div className="text-3xl font-bold text-purple-600 dark:text-purple-400 mb-2"> + {formatTime(timeElapsed)} + </div> + <div className="text-gray-600 dark:text-gray-400">Total Time</div> + </div> + <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700 text-center"> + <div className="text-3xl font-bold text-orange-600 dark:text-orange-400 mb-2"> + {averageTime}s + </div> + <div className="text-gray-600 dark:text-gray-400">Avg per Question</div> + </div> + </div> + + {/* Performance Badge */} + <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700"> + <div className="flex items-center justify-center"> + <div className={`px-6 py-3 rounded-full flex items-center gap-2 ${ + score >= 90 ? 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-600 dark:text-yellow-400' : + score >= 80 ? 'bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400' : + score >= 70 ? 'bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400' : + 'bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400' + }`}> + <Award className="w-5 h-5" /> + <span className="font-medium"> + {score >= 90 ? 'Excellent!' : score >= 80 ? 'Great Job!' : score >= 70 ? 'Good Work!' : 'Keep Practicing!'} + </span> + </div> + </div> + </div> + + {/* Question Review */} + <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700"> + <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Question Review</h3> + <div className="space-y-4"> + {currentQuestions.map((question, index) => { + const result = results[index]; + return ( + <div key={question.id} className="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg"> + <div className="flex items-start justify-between mb-2"> + <h4 className="font-medium text-gray-900 dark:text-white">{question.question}</h4> + <div className={`flex items-center gap-1 ${result.isCorrect ? 'text-green-600' : 'text-red-600'}`}> + {result.isCorrect ? <Check className="w-4 h-4" /> : <X className="w-4 h-4" />} + </div> + </div> + <div className="text-sm text-gray-600 dark:text-gray-400 mb-2"> + <strong>Correct Answer:</strong> {question.options[question.correctAnswer]} + </div> + {result.selectedAnswer !== null && result.selectedAnswer !== question.correctAnswer && ( + <div className="text-sm text-red-600 dark:text-red-400 mb-2"> + <strong>Your Answer:</strong> {question.options[result.selectedAnswer]} + </div> + )} + <div className="text-sm text-gray-700 dark:text-gray-300"> + {question.explanation} + </div> + </div> + ); + })} + </div> + </div> + + {/* Actions */} + <div className="flex gap-4"> + <button + onClick={resetQuiz} + className="flex-1 bg-gradient-to-r from-blue-500 to-purple-600 text-white py-3 px-6 rounded-lg hover:from-blue-600 hover:to-purple-700 transition-all duration-200 flex items-center justify-center gap-2 font-medium" + > + <RotateCcw className="w-5 h-5" /> + Take Another Quiz + </button> + </div> + </div> + ); + } + + return ( + <div className="p-6 space-y-6"> + {/* Quiz Header */} + <div className="flex items-center justify-between"> + <div className="flex items-center gap-4"> + <button + onClick={resetQuiz} + className="p-2 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors" + > + <X className="w-5 h-5" /> + </button> + <div> + <h1 className="text-xl font-bold text-gray-900 dark:text-white">{selectedSubject} Quiz</h1> + <p className="text-sm text-gray-600 dark:text-gray-400"> + Question {currentQuestionIndex + 1} of {currentQuestions.length} + </p> + </div> + </div> + <div className="flex items-center gap-4"> + <div className="flex items-center gap-2 text-gray-600 dark:text-gray-400"> + <Clock className="w-4 h-4" /> + <span className="font-mono">{formatTime(timeElapsed)}</span> + </div> + </div> + </div> + + {/* Progress Bar */} + <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2"> + <div + className="bg-gradient-to-r from-blue-500 to-purple-600 h-2 rounded-full transition-all duration-300" + style={{ width: `${((currentQuestionIndex + 1) / currentQuestions.length) * 100}%` }} + /> + </div> + + {/* Question Card */} + <div className="bg-white dark:bg-gray-800 rounded-xl p-8 border border-gray-200 dark:border-gray-700"> + <div className="flex items-center justify-between mb-6"> + <span className={`px-3 py-1 rounded-full text-xs font-medium ${getDifficultyColor(currentQuestion.difficulty)}`}> + {currentQuestion.difficulty.charAt(0).toUpperCase() + currentQuestion.difficulty.slice(1)} + </span> + <span className="text-sm text-gray-500 dark:text-gray-400"> + ID: {currentQuestion.id} + </span> + </div> + + <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-8"> + {currentQuestion.question} + </h2> + + <div className="space-y-3 mb-8"> + {currentQuestion.options.map((option, index) => ( + <motion.button + key={index} + onClick={() => handleAnswerSelect(index)} + className={`w-full p-4 text-left rounded-lg border-2 transition-all duration-200 ${ + selectedAnswer === index + ? showResult + ? index === currentQuestion.correctAnswer + ? 'border-green-500 bg-green-50 dark:bg-green-900/30 text-green-700 dark:text-green-300' + : 'border-red-500 bg-red-50 dark:bg-red-900/30 text-red-700 dark:text-red-300' + : 'border-blue-500 bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300' + : showResult && index === currentQuestion.correctAnswer + ? 'border-green-500 bg-green-50 dark:bg-green-900/30 text-green-700 dark:text-green-300' + : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 text-gray-900 dark:text-white' + }`} + whileHover={{ scale: 1.02 }} + whileTap={{ scale: 0.98 }} + > + <div className="flex items-center gap-3"> + <div className={`w-6 h-6 rounded-full border-2 flex items-center justify-center text-sm font-medium ${ + selectedAnswer === index + ? showResult + ? index === currentQuestion.correctAnswer + ? 'border-green-500 bg-green-500 text-white' + : 'border-red-500 bg-red-500 text-white' + : 'border-blue-500 bg-blue-500 text-white' + : showResult && index === currentQuestion.correctAnswer + ? 'border-green-500 bg-green-500 text-white' + : 'border-gray-300 dark:border-gray-600' + }`}> + {showResult && (selectedAnswer === index || index === currentQuestion.correctAnswer) ? ( + index === currentQuestion.correctAnswer ? ( + <Check className="w-3 h-3" /> + ) : ( + <X className="w-3 h-3" /> + ) + ) : ( + String.fromCharCode(65 + index) + )} + </div> + <span>{option}</span> + </div> + </motion.button> + ))} + </div> + + {/* Explanation */} + <AnimatePresence> + {showResult && ( + <motion.div + initial={{ opacity: 0, height: 0 }} + animate={{ opacity: 1, height: 'auto' }} + exit={{ opacity: 0, height: 0 }} + className="p-4 bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-700 rounded-lg mb-6" + > + <h4 className="font-medium text-blue-900 dark:text-blue-100 mb-2">Explanation:</h4> + <p className="text-blue-800 dark:text-blue-200">{currentQuestion.explanation}</p> + </motion.div> + )} + </AnimatePresence> + + {/* Action Buttons */} + <div className="flex gap-4"> + {!showResult ? ( + <button + onClick={handleSubmitAnswer} + disabled={selectedAnswer === null} + className="flex-1 bg-gradient-to-r from-blue-500 to-purple-600 text-white py-3 px-6 rounded-lg hover:from-blue-600 hover:to-purple-700 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 flex items-center justify-center gap-2 font-medium" + > + <Check className="w-5 h-5" /> + Submit Answer + </button> + ) : ( + <button + onClick={handleNextQuestion} + className="flex-1 bg-gradient-to-r from-green-500 to-blue-500 text-white py-3 px-6 rounded-lg hover:from-green-600 hover:to-blue-600 transition-all duration-200 flex items-center justify-center gap-2 font-medium" + > + {currentQuestionIndex < currentQuestions.length - 1 ? ( + <> + Next Question + <ChevronRight className="w-5 h-5" /> + </> + ) : ( + <> + View Results + <Trophy className="w-5 h-5" /> + </> + )} + </button> + )} + </div> + </div> + </div> + ); +}; + +export default Quiz; |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 +295 +296 +297 +298 +299 +300 +301 +302 +303 +304 +305 +306 +307 +308 +309 +310 +311 +312 +313 +314 +315 +316 +317 +318 +319 +320 +321 +322 +323 +324 +325 +326 +327 +328 +329 +330 +331 +332 +333 +334 +335 +336 +337 +338 +339 +340 +341 +342 +343 +344 +345 +346 +347 +348 +349 +350 +351 +352 +353 +354 +355 +356 +357 +358 +359 +360 +361 +362 +363 +364 +365 +366 +367 +368 +369 +370 +371 +372 +373 +374 +375 +376 +377 +378 +379 +380 +381 +382 +383 +384 +385 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import React, { useState } from 'react'; +import { motion } from 'framer-motion'; +import { + Search, + Filter, + Clock, + FileText, + Brain, + BookOpen, + Target, + Sparkles, + TrendingUp, + Calendar, + Tag, + Star +} from 'lucide-react'; + +interface SearchResult { + id: string; + title: string; + type: 'flashcard' | 'quiz' | 'material' | 'note' | 'concept'; + content: string; + relevance: number; + lastAccessed: string; + tags: string[]; + subject: string; + favorite?: boolean; +} + +const SearchResults: React.FC = () => { + const [searchQuery, setSearchQuery] = useState(''); + const [selectedFilter, setSelectedFilter] = useState<'all' | 'flashcard' | 'quiz' | 'material' | 'note' | 'concept'>('all'); + const [sortBy, setSortBy] = useState<'relevance' | 'date' | 'alphabetical'>('relevance'); + + const searchResults: SearchResult[] = [ + { + id: '1', + title: 'Cognitive Dissonance Definition', + type: 'flashcard', + content: 'Mental discomfort from conflicting beliefs, ideas, or values simultaneously held by an individual.', + relevance: 95, + lastAccessed: '2025-06-28', + tags: ['psychology', 'cognitive', 'theory'], + subject: 'Psychology', + favorite: true + }, + { + id: '2', + title: 'Psychology Quiz - Cognitive Theories', + type: 'quiz', + content: 'Test your knowledge of cognitive psychology theories including dissonance, schemas, and processing models.', + relevance: 88, + lastAccessed: '2025-06-27', + tags: ['psychology', 'quiz', 'cognitive'], + subject: 'Psychology' + }, + { + id: '3', + title: 'Mitochondria Function', + type: 'concept', + content: 'Powerhouse of the cell - produces ATP through cellular respiration, contains its own DNA.', + relevance: 82, + lastAccessed: '2025-06-26', + tags: ['biology', 'cellular', 'energy'], + subject: 'Biology' + }, + { + id: '4', + title: 'World War I Causes Study Material', + type: 'material', + content: 'Comprehensive document covering the complex causes of WWI including nationalism, imperialism, and alliance systems.', + relevance: 76, + lastAccessed: '2025-06-25', + tags: ['history', 'war', 'causes'], + subject: 'History' + }, + { + id: '5', + title: 'Photosynthesis Process Notes', + type: 'note', + content: 'Detailed notes on light-dependent and light-independent reactions in photosynthesis.', + relevance: 71, + lastAccessed: '2025-06-24', + tags: ['biology', 'plants', 'energy'], + subject: 'Biology', + favorite: true + }, + { + id: '6', + title: 'Classical Conditioning Flashcard', + type: 'flashcard', + content: 'Learning process through association between stimuli - Pavlov\'s dogs experiment.', + relevance: 68, + lastAccessed: '2025-06-23', + tags: ['psychology', 'learning', 'behaviorism'], + subject: 'Psychology' + } + ]; + + const getTypeIcon = (type: string) => { + switch (type) { + case 'flashcard': return <Brain className="w-4 h-4" />; + case 'quiz': return <Target className="w-4 h-4" />; + case 'material': return <FileText className="w-4 h-4" />; + case 'note': return <BookOpen className="w-4 h-4" />; + case 'concept': return <Sparkles className="w-4 h-4" />; + default: return <Search className="w-4 h-4" />; + } + }; + + const getTypeColor = (type: string) => { + switch (type) { + case 'flashcard': return 'text-blue-600 bg-blue-100 dark:bg-blue-900 dark:text-blue-400'; + case 'quiz': return 'text-green-600 bg-green-100 dark:bg-green-900 dark:text-green-400'; + case 'material': return 'text-purple-600 bg-purple-100 dark:bg-purple-900 dark:text-purple-400'; + case 'note': return 'text-orange-600 bg-orange-100 dark:bg-orange-900 dark:text-orange-400'; + case 'concept': return 'text-pink-600 bg-pink-100 dark:bg-pink-900 dark:text-pink-400'; + default: return 'text-gray-600 bg-gray-100 dark:bg-gray-700 dark:text-gray-400'; + } + }; + + const filteredResults = searchResults + .filter(result => selectedFilter === 'all' || result.type === selectedFilter) + .filter(result => + searchQuery === '' || + result.title.toLowerCase().includes(searchQuery.toLowerCase()) || + result.content.toLowerCase().includes(searchQuery.toLowerCase()) || + result.tags.some(tag => tag.toLowerCase().includes(searchQuery.toLowerCase())) + ) + .sort((a, b) => { + switch (sortBy) { + case 'relevance': return b.relevance - a.relevance; + case 'date': return new Date(b.lastAccessed).getTime() - new Date(a.lastAccessed).getTime(); + case 'alphabetical': return a.title.localeCompare(b.title); + default: return 0; + } + }); + + const recentSearches = [ + 'cognitive dissonance', + 'mitochondria function', + 'world war 1 causes', + 'photosynthesis', + 'classical conditioning' + ]; + + const suggestedTopics = [ + { name: 'Psychology Theories', count: 24 }, + { name: 'Cell Biology', count: 18 }, + { name: 'Historical Events', count: 15 }, + { name: 'Chemical Reactions', count: 12 }, + { name: 'Mathematical Formulas', count: 9 } + ]; + + return ( + <div className="p-6 space-y-6"> + {/* Header */} + <div className="flex items-center justify-between"> + <div> + <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Search & Discovery</h1> + <p className="text-gray-600 dark:text-gray-400 mt-1"> + Find anything across your study materials and notes + </p> + </div> + <div className="flex items-center gap-2 text-sm text-blue-600 dark:text-blue-400"> + <Sparkles className="w-4 h-4" /> + <span>AI-Enhanced Search</span> + </div> + </div> + + {/* Search Bar */} + <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700"> + <div className="relative mb-4"> + <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" /> + <input + type="text" + placeholder="Search across all your study materials, flashcards, quizzes, and notes..." + value={searchQuery} + onChange={(e) => setSearchQuery(e.target.value)} + className="w-full pl-12 pr-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 focus:ring-2 focus:ring-blue-500 focus:border-transparent text-lg" + /> + </div> + + {/* Filters */} + <div className="flex flex-wrap gap-4"> + <div className="flex items-center gap-2"> + <Filter className="w-4 h-4 text-gray-600 dark:text-gray-400" /> + <span className="text-sm font-medium text-gray-700 dark:text-gray-300">Filter by:</span> + </div> + + <select + value={selectedFilter} + onChange={(e) => setSelectedFilter(e.target.value as any)} + className="px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm" + > + <option value="all">All Types</option> + <option value="flashcard">Flashcards</option> + <option value="quiz">Quizzes</option> + <option value="material">Materials</option> + <option value="note">Notes</option> + <option value="concept">Concepts</option> + </select> + + <select + value={sortBy} + onChange={(e) => setSortBy(e.target.value as any)} + className="px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm" + > + <option value="relevance">Most Relevant</option> + <option value="date">Recently Accessed</option> + <option value="alphabetical">Alphabetical</option> + </select> + </div> + </div> + + {/* Search Results */} + {searchQuery || selectedFilter !== 'all' ? ( + <div className="space-y-4"> + <div className="flex items-center justify-between"> + <h2 className="text-lg font-semibold text-gray-900 dark:text-white"> + Search Results ({filteredResults.length}) + </h2> + {searchQuery && ( + <div className="text-sm text-gray-600 dark:text-gray-400"> + Showing results for "{searchQuery}" + </div> + )} + </div> + + <div className="space-y-3"> + {filteredResults.map((result, index) => ( + <motion.div + key={result.id} + initial={{ opacity: 0, y: 20 }} + animate={{ opacity: 1, y: 0 }} + transition={{ delay: index * 0.1 }} + className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700 hover:shadow-lg transition-all duration-200 cursor-pointer" + > + <div className="flex items-start justify-between mb-3"> + <div className="flex items-center gap-3"> + <div className={`w-8 h-8 rounded-lg flex items-center justify-center ${getTypeColor(result.type)}`}> + {getTypeIcon(result.type)} + </div> + <div> + <h3 className="font-semibold text-gray-900 dark:text-white flex items-center gap-2"> + {result.title} + {result.favorite && ( + <Star className="w-4 h-4 text-yellow-500 fill-current" /> + )} + </h3> + <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400"> + <span className="capitalize">{result.type}</span> + <span>•</span> + <span>{result.subject}</span> + <span>•</span> + <div className="flex items-center gap-1"> + <TrendingUp className="w-3 h-3" /> + <span>{result.relevance}% match</span> + </div> + </div> + </div> + </div> + <div className="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400"> + <Clock className="w-3 h-3" /> + <span>{new Date(result.lastAccessed).toLocaleDateString()}</span> + </div> + </div> + + <p className="text-gray-700 dark:text-gray-300 mb-3 line-clamp-2"> + {result.content} + </p> + + <div className="flex items-center justify-between"> + <div className="flex flex-wrap gap-2"> + {result.tags.map((tag, tagIndex) => ( + <span + key={tagIndex} + className="px-2 py-1 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 text-xs rounded-full flex items-center gap-1" + > + <Tag className="w-2 h-2" /> + {tag} + </span> + ))} + </div> + <button className="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 text-sm font-medium"> + Open → + </button> + </div> + </motion.div> + ))} + </div> + + {filteredResults.length === 0 && ( + <div className="text-center py-12"> + <Search className="w-16 h-16 text-gray-400 mx-auto mb-4" /> + <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">No results found</h3> + <p className="text-gray-600 dark:text-gray-400"> + Try adjusting your search terms or filters + </p> + </div> + )} + </div> + ) : ( + /* Default State - Recent Searches & Suggestions */ + <div className="grid grid-cols-1 lg:grid-cols-2 gap-6"> + {/* Recent Searches */} + <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700"> + <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2"> + <Clock className="w-5 h-5" /> + Recent Searches + </h3> + <div className="space-y-3"> + {recentSearches.map((search, index) => ( + <button + key={index} + onClick={() => setSearchQuery(search)} + className="w-full text-left p-3 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors" + > + <div className="flex items-center gap-3"> + <Search className="w-4 h-4 text-gray-400" /> + <span className="text-gray-900 dark:text-white">{search}</span> + </div> + </button> + ))} + </div> + </div> + + {/* Suggested Topics */} + <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700"> + <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2"> + <Sparkles className="w-5 h-5" /> + Suggested Topics + </h3> + <div className="space-y-3"> + {suggestedTopics.map((topic, index) => ( + <button + key={index} + onClick={() => setSearchQuery(topic.name.toLowerCase())} + className="w-full text-left p-3 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors" + > + <div className="flex items-center justify-between"> + <span className="text-gray-900 dark:text-white">{topic.name}</span> + <span className="text-sm text-gray-500 dark:text-gray-400"> + {topic.count} items + </span> + </div> + </button> + ))} + </div> + </div> + </div> + )} + + {/* Search Tips */} + <div className="bg-gradient-to-r from-blue-500 to-purple-600 rounded-xl p-6 text-white"> + <h3 className="text-lg font-semibold mb-4 flex items-center gap-2"> + <Sparkles className="w-5 h-5" /> + Search Tips + </h3> + <div className="grid grid-cols-1 md:grid-cols-3 gap-4"> + <div> + <h4 className="font-medium mb-1">Use Keywords</h4> + <p className="text-sm text-blue-100"> + Search for specific terms, concepts, or topics you're studying + </p> + </div> + <div> + <h4 className="font-medium mb-1">Filter by Type</h4> + <p className="text-sm text-blue-100"> + Narrow down results by content type: flashcards, quizzes, or materials + </p> + </div> + <div> + <h4 className="font-medium mb-1">Use Tags</h4> + <p className="text-sm text-blue-100"> + Search by subject tags like "psychology" or "biology" for better results + </p> + </div> + </div> + </div> + </div> + ); +}; + +export default SearchResults; |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 +295 +296 +297 +298 +299 +300 +301 +302 +303 +304 +305 +306 +307 +308 +309 +310 +311 +312 +313 +314 +315 +316 +317 +318 +319 +320 +321 +322 +323 +324 +325 +326 +327 +328 +329 +330 +331 +332 +333 +334 +335 +336 +337 +338 +339 +340 +341 +342 +343 +344 +345 +346 +347 +348 +349 +350 +351 +352 +353 +354 +355 +356 +357 +358 +359 +360 +361 +362 +363 +364 +365 +366 +367 +368 +369 +370 +371 +372 +373 +374 +375 +376 +377 +378 +379 +380 +381 +382 +383 +384 +385 +386 +387 +388 +389 +390 +391 +392 +393 +394 +395 +396 +397 +398 +399 +400 +401 +402 +403 +404 +405 +406 +407 +408 +409 +410 +411 +412 +413 +414 +415 +416 +417 +418 +419 +420 +421 +422 +423 +424 +425 +426 +427 +428 +429 +430 +431 +432 +433 +434 +435 +436 +437 +438 +439 +440 +441 +442 +443 +444 +445 +446 +447 +448 +449 +450 +451 +452 +453 +454 +455 +456 +457 +458 +459 +460 +461 +462 +463 +464 +465 +466 +467 +468 +469 +470 +471 +472 +473 +474 +475 +476 +477 +478 +479 +480 +481 +482 +483 +484 +485 +486 +487 +488 +489 +490 +491 +492 +493 +494 +495 +496 +497 +498 +499 +500 +501 +502 +503 +504 +505 +506 +507 +508 +509 +510 +511 +512 +513 +514 +515 +516 +517 +518 +519 +520 +521 +522 +523 +524 +525 +526 +527 +528 +529 +530 +531 +532 +533 +534 +535 +536 +537 +538 +539 +540 +541 +542 +543 +544 +545 +546 +547 +548 +549 +550 +551 +552 +553 +554 +555 +556 +557 +558 +559 +560 +561 +562 +563 +564 +565 +566 +567 +568 +569 +570 +571 +572 +573 +574 +575 +576 +577 +578 +579 +580 +581 +582 +583 +584 +585 +586 +587 +588 +589 +590 +591 +592 +593 +594 +595 +596 +597 +598 +599 +600 +601 +602 +603 +604 +605 +606 +607 +608 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import React, { useState } from 'react'; +import { motion } from 'framer-motion'; +import { + User, + Bell, + Shield, + Palette, + Globe, + Download, + Trash2, + Key, + Moon, + Sun, + Volume2, + VolumeX, + Smartphone, + Mail, + Lock, + Eye, + EyeOff, + Save, + RefreshCw +} from 'lucide-react'; +import { useTheme } from '../contexts/ThemeContext'; + +const Settings: React.FC = () => { + const { isDark, toggleTheme } = useTheme(); + const [activeTab, setActiveTab] = useState('profile'); + const [showPassword, setShowPassword] = useState(false); + const [notifications, setNotifications] = useState({ + email: true, + push: true, + studyReminders: true, + quizResults: true, + achievements: true, + weeklyReports: false + }); + const [privacy, setPrivacy] = useState({ + profileVisibility: 'private', + studyStats: 'friends', + achievements: 'public' + }); + const [preferences, setPreferences] = useState({ + language: 'en', + timezone: 'UTC-5', + soundEffects: true, + autoSave: true, + darkMode: isDark, + studyReminders: true, + dailyGoal: 4 + }); + + const tabs = [ + { id: 'profile', label: 'Profile', icon: User }, + { id: 'notifications', label: 'Notifications', icon: Bell }, + { id: 'privacy', label: 'Privacy & Security', icon: Shield }, + { id: 'preferences', label: 'Preferences', icon: Palette }, + { id: 'data', label: 'Data & Storage', icon: Download } + ]; + + const handleNotificationChange = (key: string, value: boolean) => { + setNotifications(prev => ({ ...prev, [key]: value })); + }; + + const handlePrivacyChange = (key: string, value: string) => { + setPrivacy(prev => ({ ...prev, [key]: value })); + }; + + const handlePreferenceChange = (key: string, value: any) => { + setPreferences(prev => ({ ...prev, [key]: value })); + if (key === 'darkMode') { + toggleTheme(); + } + }; + + const renderTabContent = () => { + switch (activeTab) { + case 'profile': + return ( + <div className="space-y-6"> + <div className="flex items-center gap-6"> + <div className="w-24 h-24 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-white text-2xl font-bold"> + AJ + </div> + <div> + <h3 className="text-xl font-semibold text-gray-900 dark:text-white">Alex Johnson</h3> + <p className="text-gray-600 dark:text-gray-400">alex.johnson@email.com</p> + <button className="mt-2 text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 text-sm font-medium"> + Change Photo + </button> + </div> + </div> + + <div className="grid grid-cols-1 md:grid-cols-2 gap-6"> + <div> + <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"> + First Name + </label> + <input + type="text" + defaultValue="Alex" + className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" + /> + </div> + <div> + <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"> + Last Name + </label> + <input + type="text" + defaultValue="Johnson" + className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" + /> + </div> + <div> + <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"> + Email + </label> + <input + type="email" + defaultValue="alex.johnson@email.com" + className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" + /> + </div> + <div> + <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"> + Phone + </label> + <input + type="tel" + placeholder="+1 (555) 123-4567" + className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" + /> + </div> + </div> + + <div> + <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"> + Bio + </label> + <textarea + rows={3} + placeholder="Tell us about yourself..." + className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" + /> + </div> + + <div> + <h4 className="text-lg font-medium text-gray-900 dark:text-white mb-4">Change Password</h4> + <div className="space-y-4"> + <div> + <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"> + Current Password + </label> + <div className="relative"> + <input + type={showPassword ? 'text' : 'password'} + className="w-full px-3 py-2 pr-10 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" + /> + <button + onClick={() => setShowPassword(!showPassword)} + className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" + > + {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />} + </button> + </div> + </div> + <div className="grid grid-cols-1 md:grid-cols-2 gap-4"> + <div> + <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"> + New Password + </label> + <input + type="password" + className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" + /> + </div> + <div> + <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"> + Confirm Password + </label> + <input + type="password" + className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" + /> + </div> + </div> + </div> + </div> + </div> + ); + + case 'notifications': + return ( + <div className="space-y-6"> + <div> + <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">Notification Preferences</h3> + <div className="space-y-4"> + {Object.entries(notifications).map(([key, value]) => ( + <div key={key} className="flex items-center justify-between"> + <div> + <h4 className="font-medium text-gray-900 dark:text-white capitalize"> + {key.replace(/([A-Z])/g, ' $1').trim()} + </h4> + <p className="text-sm text-gray-600 dark:text-gray-400"> + {key === 'email' && 'Receive notifications via email'} + {key === 'push' && 'Receive push notifications on your device'} + {key === 'studyReminders' && 'Get reminded about your study sessions'} + {key === 'quizResults' && 'Notifications when quiz results are available'} + {key === 'achievements' && 'Get notified when you unlock achievements'} + {key === 'weeklyReports' && 'Receive weekly progress reports'} + </p> + </div> + <button + onClick={() => handleNotificationChange(key, !value)} + className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${ + value ? 'bg-blue-600' : 'bg-gray-200 dark:bg-gray-700' + }`} + > + <span + className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${ + value ? 'translate-x-6' : 'translate-x-1' + }`} + /> + </button> + </div> + ))} + </div> + </div> + + <div> + <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">Notification Channels</h3> + <div className="grid grid-cols-1 md:grid-cols-2 gap-4"> + <div className="p-4 border border-gray-200 dark:border-gray-700 rounded-lg"> + <div className="flex items-center gap-3 mb-2"> + <Mail className="w-5 h-5 text-blue-600 dark:text-blue-400" /> + <h4 className="font-medium text-gray-900 dark:text-white">Email</h4> + </div> + <p className="text-sm text-gray-600 dark:text-gray-400 mb-3"> + alex.johnson@email.com + </p> + <button className="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 text-sm font-medium"> + Change Email + </button> + </div> + <div className="p-4 border border-gray-200 dark:border-gray-700 rounded-lg"> + <div className="flex items-center gap-3 mb-2"> + <Smartphone className="w-5 h-5 text-green-600 dark:text-green-400" /> + <h4 className="font-medium text-gray-900 dark:text-white">Push Notifications</h4> + </div> + <p className="text-sm text-gray-600 dark:text-gray-400 mb-3"> + Enabled on this device + </p> + <button className="text-green-600 dark:text-green-400 hover:text-green-700 dark:hover:text-green-300 text-sm font-medium"> + Manage Devices + </button> + </div> + </div> + </div> + </div> + ); + + case 'privacy': + return ( + <div className="space-y-6"> + <div> + <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">Privacy Settings</h3> + <div className="space-y-4"> + {Object.entries(privacy).map(([key, value]) => ( + <div key={key}> + <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 capitalize"> + {key.replace(/([A-Z])/g, ' $1').trim()} + </label> + <select + value={value} + onChange={(e) => handlePrivacyChange(key, e.target.value)} + className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white" + > + <option value="public">Public</option> + <option value="friends">Friends Only</option> + <option value="private">Private</option> + </select> + </div> + ))} + </div> + </div> + + <div> + <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">Security</h3> + <div className="space-y-4"> + <div className="p-4 border border-gray-200 dark:border-gray-700 rounded-lg"> + <div className="flex items-center justify-between"> + <div> + <h4 className="font-medium text-gray-900 dark:text-white">Two-Factor Authentication</h4> + <p className="text-sm text-gray-600 dark:text-gray-400"> + Add an extra layer of security to your account + </p> + </div> + <button className="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition-colors"> + Enable + </button> + </div> + </div> + <div className="p-4 border border-gray-200 dark:border-gray-700 rounded-lg"> + <div className="flex items-center justify-between"> + <div> + <h4 className="font-medium text-gray-900 dark:text-white">Login Sessions</h4> + <p className="text-sm text-gray-600 dark:text-gray-400"> + Manage your active login sessions + </p> + </div> + <button className="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-medium"> + View Sessions + </button> + </div> + </div> + </div> + </div> + </div> + ); + + case 'preferences': + return ( + <div className="space-y-6"> + <div> + <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">General Preferences</h3> + <div className="space-y-4"> + <div className="grid grid-cols-1 md:grid-cols-2 gap-4"> + <div> + <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"> + Language + </label> + <select + value={preferences.language} + onChange={(e) => handlePreferenceChange('language', e.target.value)} + className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white" + > + <option value="en">English</option> + <option value="es">Spanish</option> + <option value="fr">French</option> + <option value="de">German</option> + </select> + </div> + <div> + <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"> + Timezone + </label> + <select + value={preferences.timezone} + onChange={(e) => handlePreferenceChange('timezone', e.target.value)} + className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white" + > + <option value="UTC-8">Pacific Time (UTC-8)</option> + <option value="UTC-5">Eastern Time (UTC-5)</option> + <option value="UTC+0">GMT (UTC+0)</option> + <option value="UTC+1">Central European Time (UTC+1)</option> + </select> + </div> + </div> + + <div> + <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"> + Daily Study Goal (sessions) + </label> + <input + type="number" + min="1" + max="20" + value={preferences.dailyGoal} + onChange={(e) => handlePreferenceChange('dailyGoal', parseInt(e.target.value))} + className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" + /> + </div> + </div> + </div> + + <div> + <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">App Preferences</h3> + <div className="space-y-4"> + <div className="flex items-center justify-between"> + <div className="flex items-center gap-3"> + {isDark ? <Moon className="w-5 h-5" /> : <Sun className="w-5 h-5" />} + <div> + <h4 className="font-medium text-gray-900 dark:text-white">Dark Mode</h4> + <p className="text-sm text-gray-600 dark:text-gray-400"> + Use dark theme for better night studying + </p> + </div> + </div> + <button + onClick={() => handlePreferenceChange('darkMode', !preferences.darkMode)} + className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${ + preferences.darkMode ? 'bg-blue-600' : 'bg-gray-200 dark:bg-gray-700' + }`} + > + <span + className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${ + preferences.darkMode ? 'translate-x-6' : 'translate-x-1' + }`} + /> + </button> + </div> + + <div className="flex items-center justify-between"> + <div className="flex items-center gap-3"> + {preferences.soundEffects ? <Volume2 className="w-5 h-5" /> : <VolumeX className="w-5 h-5" />} + <div> + <h4 className="font-medium text-gray-900 dark:text-white">Sound Effects</h4> + <p className="text-sm text-gray-600 dark:text-gray-400"> + Play sounds for interactions and notifications + </p> + </div> + </div> + <button + onClick={() => handlePreferenceChange('soundEffects', !preferences.soundEffects)} + className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${ + preferences.soundEffects ? 'bg-blue-600' : 'bg-gray-200 dark:bg-gray-700' + }`} + > + <span + className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${ + preferences.soundEffects ? 'translate-x-6' : 'translate-x-1' + }`} + /> + </button> + </div> + + <div className="flex items-center justify-between"> + <div className="flex items-center gap-3"> + <Save className="w-5 h-5" /> + <div> + <h4 className="font-medium text-gray-900 dark:text-white">Auto-Save</h4> + <p className="text-sm text-gray-600 dark:text-gray-400"> + Automatically save your progress + </p> + </div> + </div> + <button + onClick={() => handlePreferenceChange('autoSave', !preferences.autoSave)} + className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${ + preferences.autoSave ? 'bg-blue-600' : 'bg-gray-200 dark:bg-gray-700' + }`} + > + <span + className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${ + preferences.autoSave ? 'translate-x-6' : 'translate-x-1' + }`} + /> + </button> + </div> + </div> + </div> + </div> + ); + + case 'data': + return ( + <div className="space-y-6"> + <div> + <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">Data Management</h3> + <div className="grid grid-cols-1 md:grid-cols-2 gap-4"> + <div className="p-4 border border-gray-200 dark:border-gray-700 rounded-lg"> + <h4 className="font-medium text-gray-900 dark:text-white mb-2">Export Data</h4> + <p className="text-sm text-gray-600 dark:text-gray-400 mb-3"> + Download all your study data, progress, and materials + </p> + <button className="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition-colors flex items-center gap-2"> + <Download className="w-4 h-4" /> + Export Data + </button> + </div> + <div className="p-4 border border-gray-200 dark:border-gray-700 rounded-lg"> + <h4 className="font-medium text-gray-900 dark:text-white mb-2">Storage Usage</h4> + <p className="text-sm text-gray-600 dark:text-gray-400 mb-3"> + You're using 2.4 GB of 10 GB available + </p> + <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 mb-3"> + <div className="bg-blue-500 h-2 rounded-full" style={{ width: '24%' }} /> + </div> + <button className="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-medium"> + Manage Storage + </button> + </div> + </div> + </div> + + <div> + <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">Backup & Sync</h3> + <div className="space-y-4"> + <div className="p-4 border border-gray-200 dark:border-gray-700 rounded-lg"> + <div className="flex items-center justify-between"> + <div> + <h4 className="font-medium text-gray-900 dark:text-white">Auto Backup</h4> + <p className="text-sm text-gray-600 dark:text-gray-400"> + Automatically backup your data to the cloud + </p> + </div> + <button className="relative inline-flex h-6 w-11 items-center rounded-full bg-blue-600"> + <span className="inline-block h-4 w-4 transform rounded-full bg-white translate-x-6" /> + </button> + </div> + </div> + <div className="p-4 border border-gray-200 dark:border-gray-700 rounded-lg"> + <div className="flex items-center justify-between"> + <div> + <h4 className="font-medium text-gray-900 dark:text-white">Last Backup</h4> + <p className="text-sm text-gray-600 dark:text-gray-400"> + June 28, 2025 at 3:45 PM + </p> + </div> + <button className="bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors flex items-center gap-2"> + <RefreshCw className="w-4 h-4" /> + Backup Now + </button> + </div> + </div> + </div> + </div> + + <div> + <h3 className="text-lg font-medium text-red-600 dark:text-red-400 mb-4">Danger Zone</h3> + <div className="p-4 border border-red-200 dark:border-red-700 rounded-lg bg-red-50 dark:bg-red-900/20"> + <h4 className="font-medium text-red-900 dark:text-red-100 mb-2">Delete Account</h4> + <p className="text-sm text-red-700 dark:text-red-300 mb-4"> + Permanently delete your account and all associated data. This action cannot be undone. + </p> + <button className="bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700 transition-colors flex items-center gap-2"> + <Trash2 className="w-4 h-4" /> + Delete Account + </button> + </div> + </div> + </div> + ); + + default: + return null; + } + }; + + return ( + <div className="p-6 space-y-6"> + {/* Header */} + <div className="flex items-center justify-between"> + <div> + <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Settings</h1> + <p className="text-gray-600 dark:text-gray-400 mt-1"> + Manage your account, preferences, and privacy settings + </p> + </div> + </div> + + <div className="grid grid-cols-1 lg:grid-cols-4 gap-6"> + {/* Sidebar */} + <div className="lg:col-span-1"> + <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden"> + {tabs.map((tab) => { + const Icon = tab.icon; + return ( + <button + key={tab.id} + onClick={() => setActiveTab(tab.id)} + className={`w-full flex items-center gap-3 px-4 py-3 text-left transition-colors ${ + activeTab === tab.id + ? 'bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 border-r-2 border-blue-500' + : 'text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700' + }`} + > + <Icon className="w-5 h-5" /> + <span className="font-medium">{tab.label}</span> + </button> + ); + })} + </div> + </div> + + {/* Content */} + <div className="lg:col-span-3"> + <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700"> + <motion.div + key={activeTab} + initial={{ opacity: 0, y: 20 }} + animate={{ opacity: 1, y: 0 }} + transition={{ duration: 0.2 }} + > + {renderTabContent()} + </motion.div> + + {/* Save Button */} + <div className="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700"> + <div className="flex justify-end gap-4"> + <button className="px-4 py-2 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors"> + Cancel + </button> + <button className="bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 transition-colors flex items-center gap-2"> + <Save className="w-4 h-4" /> + Save Changes + </button> + </div> + </div> + </div> + </div> + </div> + </div> + ); +}; + +export default Settings; |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import React from 'react'; +import { + Home, + BookOpen, + Brain, + BarChart3, + Upload, + Timer, + Trophy, + Settings, + GraduationCap, + FileText, + Search, + X, + Menu +} from 'lucide-react'; + +interface SidebarProps { + activeSection: string; + setActiveSection: (section: string) => void; + isOpen?: boolean; + onClose?: () => void; +} + +const Sidebar: React.FC<SidebarProps> = ({ activeSection, setActiveSection, isOpen = true, onClose }) => { + const menuItems = [ + { id: 'dashboard', label: 'Dashboard', icon: Home }, + { id: 'flashcards', label: 'Flashcards', icon: Brain }, + { id: 'quiz', label: 'Quizzes', icon: BookOpen }, + { id: 'upload', label: 'Upload', icon: Upload }, + { id: 'analytics', label: 'Analytics', icon: BarChart3 }, + { id: 'study-timer', label: 'Study Timer', icon: Timer }, + { id: 'achievements', label: 'Achievements', icon: Trophy }, + { id: 'materials', label: 'Materials', icon: FileText }, + { id: 'search', label: 'Search', icon: Search }, + { id: 'settings', label: 'Settings', icon: Settings }, + ]; + + const handleItemClick = (itemId: string) => { + setActiveSection(itemId); + if (onClose) { + onClose(); + } + }; + + return ( + <> + {/* Mobile Overlay */} + {isOpen && ( + <div + className="fixed inset-0 bg-black bg-opacity-50 z-40 lg:hidden" + onClick={onClose} + /> + )} + + {/* Sidebar */} + <div className={` + fixed lg:static inset-y-0 left-0 z-50 lg:z-auto + w-64 bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-700 + min-h-screen flex flex-col transform transition-transform duration-300 ease-in-out + ${isOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'} + `}> + {/* Logo */} + <div className="flex items-center justify-between gap-3 p-4 lg:p-6 border-b border-gray-200 dark:border-gray-700"> + <div className="flex items-center gap-3"> + <div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center"> + <GraduationCap className="w-5 h-5 text-white" /> + </div> + <span className="text-xl font-bold text-gray-900 dark:text-white">StudyMaster</span> + </div> + + {/* Close button for mobile */} + <button + onClick={onClose} + className="lg:hidden p-2 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg" + > + <X className="w-5 h-5" /> + </button> + </div> + + {/* Navigation */} + <nav className="flex-1 p-3 lg:p-4 space-y-1 lg:space-y-2 overflow-y-auto"> + {menuItems.map((item) => { + const Icon = item.icon; + const isActive = activeSection === item.id; + + return ( + <button + key={item.id} + onClick={() => handleItemClick(item.id)} + className={`w-full flex items-center gap-3 px-3 lg:px-4 py-3 rounded-lg text-left transition-all duration-200 touch-manipulation ${ + isActive + ? 'bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 border border-blue-200 dark:border-blue-700' + : 'text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-200' + }`} + > + <Icon className="w-5 h-5 flex-shrink-0" /> + <span className="font-medium truncate">{item.label}</span> + </button> + ); + })} + </nav> + + {/* Upgrade Section */} + <div className="p-3 lg:p-4 border-t border-gray-200 dark:border-gray-700"> + <div className="bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg p-4 text-white"> + <h3 className="font-semibold mb-2 text-sm lg:text-base">Upgrade to Pro</h3> + <p className="text-xs lg:text-sm text-blue-100 mb-3">Unlock advanced AI features and unlimited storage</p> + <button className="w-full bg-white text-blue-600 rounded-lg py-2 text-sm font-medium hover:bg-blue-50 transition-colors touch-manipulation"> + Upgrade Now + </button> + </div> + </div> + </div> + </> + ); +}; + +export default Sidebar; |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 +295 +296 +297 +298 +299 +300 +301 +302 +303 +304 +305 +306 +307 +308 +309 +310 +311 +312 +313 +314 +315 +316 +317 +318 +319 +320 +321 +322 +323 +324 +325 +326 +327 +328 +329 +330 +331 +332 +333 +334 +335 +336 +337 +338 +339 +340 +341 +342 +343 +344 +345 +346 +347 +348 +349 +350 +351 +352 +353 +354 +355 +356 +357 +358 +359 +360 +361 +362 +363 +364 +365 +366 +367 +368 +369 +370 +371 +372 +373 +374 +375 +376 +377 +378 +379 +380 +381 +382 +383 +384 +385 +386 +387 +388 +389 +390 +391 +392 +393 +394 +395 +396 +397 +398 +399 +400 +401 +402 +403 +404 +405 +406 +407 +408 +409 +410 +411 +412 +413 +414 +415 +416 +417 +418 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import React, { useState, useEffect, useRef } from 'react'; +import { motion, AnimatePresence } from 'framer-motion'; +import { + Play, + Pause, + RotateCcw, + Clock, + Coffee, + Brain, + Target, + Settings, + Volume2, + VolumeX, + Bell, + CheckCircle +} from 'lucide-react'; + +interface Session { + type: 'focus' | 'break' | 'longBreak'; + duration: number; + completed: boolean; +} + +const StudyTimer: React.FC = () => { + const [timeLeft, setTimeLeft] = useState(25 * 60); // 25 minutes in seconds + const [isRunning, setIsRunning] = useState(false); + const [currentSession, setCurrentSession] = useState<'focus' | 'break' | 'longBreak'>('focus'); + const [sessionsCompleted, setSessionsCompleted] = useState(0); + const [customDurations, setCustomDurations] = useState({ + focus: 25, + shortBreak: 5, + longBreak: 15 + }); + const [soundEnabled, setSoundEnabled] = useState(true); + const [showSettings, setShowSettings] = useState(false); + const [dailyGoal, setDailyGoal] = useState(8); // sessions + const [totalStudyTime, setTotalStudyTime] = useState(0); + const [currentStreak, setCurrentStreak] = useState(0); + + const intervalRef = useRef<NodeJS.Timeout | null>(null); + const audioRef = useRef<HTMLAudioElement | null>(null); + + const sessions: Session[] = [ + { type: 'focus', duration: customDurations.focus * 60, completed: false }, + { type: 'break', duration: customDurations.shortBreak * 60, completed: false }, + { type: 'focus', duration: customDurations.focus * 60, completed: false }, + { type: 'break', duration: customDurations.shortBreak * 60, completed: false }, + { type: 'focus', duration: customDurations.focus * 60, completed: false }, + { type: 'break', duration: customDurations.shortBreak * 60, completed: false }, + { type: 'focus', duration: customDurations.focus * 60, completed: false }, + { type: 'longBreak', duration: customDurations.longBreak * 60, completed: false }, + ]; + + useEffect(() => { + if (isRunning && timeLeft > 0) { + intervalRef.current = setInterval(() => { + setTimeLeft(prev => { + if (prev <= 1) { + handleSessionComplete(); + return 0; + } + return prev - 1; + }); + }, 1000); + } else if (intervalRef.current) { + clearInterval(intervalRef.current); + } + + return () => { + if (intervalRef.current) { + clearInterval(intervalRef.current); + } + }; + }, [isRunning, timeLeft]); + + const handleSessionComplete = () => { + setIsRunning(false); + if (soundEnabled && audioRef.current) { + audioRef.current.play(); + } + + if (currentSession === 'focus') { + setSessionsCompleted(prev => prev + 1); + setTotalStudyTime(prev => prev + customDurations.focus); + setCurrentStreak(prev => prev + 1); + } + + // Auto-advance to next session + const nextSessionIndex = sessionsCompleted % sessions.length; + const nextSession = sessions[nextSessionIndex]; + setCurrentSession(nextSession.type); + setTimeLeft(nextSession.duration); + }; + + const toggleTimer = () => { + setIsRunning(prev => !prev); + }; + + const resetTimer = () => { + setIsRunning(false); + const sessionDuration = currentSession === 'focus' + ? customDurations.focus * 60 + : currentSession === 'break' + ? customDurations.shortBreak * 60 + : customDurations.longBreak * 60; + setTimeLeft(sessionDuration); + }; + + const formatTime = (seconds: number) => { + const mins = Math.floor(seconds / 60); + const secs = seconds % 60; + return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`; + }; + + const getProgress = () => { + const totalDuration = currentSession === 'focus' + ? customDurations.focus * 60 + : currentSession === 'break' + ? customDurations.shortBreak * 60 + : customDurations.longBreak * 60; + return ((totalDuration - timeLeft) / totalDuration) * 100; + }; + + const getSessionColor = () => { + switch (currentSession) { + case 'focus': return 'from-blue-500 to-purple-600'; + case 'break': return 'from-green-500 to-blue-500'; + case 'longBreak': return 'from-orange-500 to-red-500'; + default: return 'from-blue-500 to-purple-600'; + } + }; + + const getSessionIcon = () => { + switch (currentSession) { + case 'focus': return <Brain className="w-8 h-8" />; + case 'break': return <Coffee className="w-8 h-8" />; + case 'longBreak': return <Coffee className="w-8 h-8" />; + default: return <Brain className="w-8 h-8" />; + } + }; + + const handleDurationChange = (type: keyof typeof customDurations, value: number) => { + setCustomDurations(prev => ({ ...prev, [type]: value })); + if (type === 'focus' && currentSession === 'focus') { + setTimeLeft(value * 60); + } else if (type === 'shortBreak' && currentSession === 'break') { + setTimeLeft(value * 60); + } else if (type === 'longBreak' && currentSession === 'longBreak') { + setTimeLeft(value * 60); + } + }; + + return ( + <div className="p-6 space-y-6"> + {/* Header */} + <div className="flex items-center justify-between"> + <div> + <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Focus Timer</h1> + <p className="text-gray-600 dark:text-gray-400 mt-1"> + Use the Pomodoro Technique to boost your productivity + </p> + </div> + <button + onClick={() => setShowSettings(!showSettings)} + className="p-2 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors" + > + <Settings className="w-5 h-5" /> + </button> + </div> + + {/* Settings Panel */} + <AnimatePresence> + {showSettings && ( + <motion.div + initial={{ opacity: 0, height: 0 }} + animate={{ opacity: 1, height: 'auto' }} + exit={{ opacity: 0, height: 0 }} + className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700" + > + <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Timer Settings</h3> + <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4"> + <div> + <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"> + Focus Duration (minutes) + </label> + <input + type="number" + min="1" + max="60" + value={customDurations.focus} + onChange={(e) => handleDurationChange('focus', parseInt(e.target.value) || 25)} + className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" + /> + </div> + <div> + <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"> + Short Break (minutes) + </label> + <input + type="number" + min="1" + max="30" + value={customDurations.shortBreak} + onChange={(e) => handleDurationChange('shortBreak', parseInt(e.target.value) || 5)} + className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" + /> + </div> + <div> + <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"> + Long Break (minutes) + </label> + <input + type="number" + min="1" + max="60" + value={customDurations.longBreak} + onChange={(e) => handleDurationChange('longBreak', parseInt(e.target.value) || 15)} + className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" + /> + </div> + </div> + <div className="flex items-center justify-between"> + <div className="flex items-center gap-2"> + <button + onClick={() => setSoundEnabled(!soundEnabled)} + className="flex items-center gap-2 text-gray-600 dark:text-gray-400" + > + {soundEnabled ? <Volume2 className="w-4 h-4" /> : <VolumeX className="w-4 h-4" />} + <span className="text-sm">Sound Notifications</span> + </button> + </div> + <div className="flex items-center gap-2"> + <label className="text-sm text-gray-700 dark:text-gray-300">Daily Goal:</label> + <input + type="number" + min="1" + max="20" + value={dailyGoal} + onChange={(e) => setDailyGoal(parseInt(e.target.value) || 8)} + className="w-16 px-2 py-1 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-sm" + /> + <span className="text-sm text-gray-700 dark:text-gray-300">sessions</span> + </div> + </div> + </motion.div> + )} + </AnimatePresence> + + {/* Main Timer */} + <div className="flex justify-center"> + <div className="relative"> + {/* Progress Ring */} + <svg className="w-80 h-80 transform -rotate-90" viewBox="0 0 320 320"> + <circle + cx="160" + cy="160" + r="140" + stroke="currentColor" + strokeWidth="8" + fill="transparent" + className="text-gray-200 dark:text-gray-700" + /> + <circle + cx="160" + cy="160" + r="140" + stroke="url(#gradient)" + strokeWidth="8" + fill="transparent" + strokeDasharray={`${2 * Math.PI * 140}`} + strokeDashoffset={`${2 * Math.PI * 140 * (1 - getProgress() / 100)}`} + className="transition-all duration-1000 ease-in-out" + strokeLinecap="round" + /> + <defs> + <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%"> + <stop offset="0%" stopColor={currentSession === 'focus' ? '#3B82F6' : currentSession === 'break' ? '#10B981' : '#F59E0B'} /> + <stop offset="100%" stopColor={currentSession === 'focus' ? '#8B5CF6' : currentSession === 'break' ? '#3B82F6' : '#EF4444'} /> + </linearGradient> + </defs> + </svg> + + {/* Timer Content */} + <div className="absolute inset-0 flex flex-col items-center justify-center"> + <motion.div + key={currentSession} + initial={{ scale: 0.8, opacity: 0 }} + animate={{ scale: 1, opacity: 1 }} + className={`w-16 h-16 bg-gradient-to-r ${getSessionColor()} rounded-full flex items-center justify-center text-white mb-4`} + > + {getSessionIcon()} + </motion.div> + + <div className="text-5xl font-mono font-bold text-gray-900 dark:text-white mb-2"> + {formatTime(timeLeft)} + </div> + + <div className="text-lg font-medium text-gray-600 dark:text-gray-400 mb-6"> + {currentSession === 'focus' ? 'Focus Time' : + currentSession === 'break' ? 'Short Break' : 'Long Break'} + </div> + + <div className="flex gap-4"> + <button + onClick={toggleTimer} + className={`w-16 h-16 bg-gradient-to-r ${getSessionColor()} text-white rounded-full flex items-center justify-center hover:scale-105 transition-transform duration-200 shadow-lg`} + > + {isRunning ? <Pause className="w-6 h-6" /> : <Play className="w-6 h-6 ml-1" />} + </button> + + <button + onClick={resetTimer} + className="w-16 h-16 bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400 rounded-full flex items-center justify-center hover:scale-105 transition-transform duration-200" + > + <RotateCcw className="w-6 h-6" /> + </button> + </div> + </div> + </div> + </div> + + {/* Session Progress */} + <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700"> + <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Today's Progress</h3> + + <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6"> + <div className="text-center p-4 bg-blue-50 dark:bg-blue-900/30 rounded-lg"> + <div className="text-2xl font-bold text-blue-600 dark:text-blue-400">{sessionsCompleted}</div> + <div className="text-sm text-gray-600 dark:text-gray-400">Sessions Completed</div> + </div> + <div className="text-center p-4 bg-green-50 dark:bg-green-900/30 rounded-lg"> + <div className="text-2xl font-bold text-green-600 dark:text-green-400">{Math.floor(totalStudyTime / 60)}h {totalStudyTime % 60}m</div> + <div className="text-sm text-gray-600 dark:text-gray-400">Study Time</div> + </div> + <div className="text-center p-4 bg-purple-50 dark:bg-purple-900/30 rounded-lg"> + <div className="text-2xl font-bold text-purple-600 dark:text-purple-400">{currentStreak}</div> + <div className="text-sm text-gray-600 dark:text-gray-400">Current Streak</div> + </div> + <div className="text-center p-4 bg-orange-50 dark:bg-orange-900/30 rounded-lg"> + <div className="text-2xl font-bold text-orange-600 dark:text-orange-400">{Math.round((sessionsCompleted / dailyGoal) * 100)}%</div> + <div className="text-sm text-gray-600 dark:text-gray-400">Daily Goal</div> + </div> + </div> + + {/* Session Timeline */} + <div className="flex items-center gap-2 mb-4"> + <span className="text-sm font-medium text-gray-700 dark:text-gray-300">Session Timeline:</span> + </div> + <div className="flex gap-2"> + {sessions.map((session, index) => ( + <div + key={index} + className={`flex-1 h-3 rounded-full ${ + index < sessionsCompleted + ? session.type === 'focus' + ? 'bg-blue-500' + : 'bg-green-500' + : index === sessionsCompleted + ? session.type === 'focus' + ? 'bg-blue-300' + : 'bg-green-300' + : 'bg-gray-200 dark:bg-gray-700' + }`} + /> + ))} + </div> + <div className="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-2"> + <span>Focus</span> + <span>Break</span> + <span>Focus</span> + <span>Break</span> + <span>Focus</span> + <span>Break</span> + <span>Focus</span> + <span>Long Break</span> + </div> + </div> + + {/* Tips */} + <div className="bg-gradient-to-r from-indigo-500 to-purple-600 rounded-xl p-6 text-white"> + <h3 className="text-lg font-semibold mb-4 flex items-center gap-2"> + <Target className="w-5 h-5" /> + Pomodoro Tips + </h3> + <div className="grid grid-cols-1 md:grid-cols-3 gap-4"> + <div> + <h4 className="font-medium mb-1">Stay Focused</h4> + <p className="text-sm text-indigo-100"> + During focus sessions, avoid all distractions. Put your phone away and close unnecessary tabs. + </p> + </div> + <div> + <h4 className="font-medium mb-1">Take Real Breaks</h4> + <p className="text-sm text-indigo-100"> + Use break time to rest your mind. Stand up, stretch, or take a short walk. + </p> + </div> + <div> + <h4 className="font-medium mb-1">Track Progress</h4> + <p className="text-sm text-indigo-100"> + Review your daily sessions to identify patterns and optimize your study schedule. + </p> + </div> + </div> + </div> + + {/* Hidden audio element for notifications */} + <audio + ref={audioRef} + preload="auto" + > + <source src="data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQoGAACBhYqFbF1fdJivrJBhNjVgodDbq2EcBj+a2/LDciUFLIHO8tiJNwgZaLvt559NEAxQp+PwtmMcBjiR1/LMeSwFJHfH8N2QQAoUXrTp66hVFApGn+DyvmwhJGZBnp2Q4K2Ae3w=" type="audio/wav" /> + </audio> + </div> + ); +}; + +export default StudyTimer; |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| AIChat.tsx | +
+
+ |
+ 0% | +0/276 | +0% | +0/1 | +0% | +0/1 | +0% | +0/276 | +
| Achievements.tsx | +
+
+ |
+ 0% | +0/409 | +0% | +0/1 | +0% | +0/1 | +0% | +0/409 | +
| Analytics.tsx | +
+
+ |
+ 0% | +0/360 | +0% | +0/1 | +0% | +0/1 | +0% | +0/360 | +
| Dashboard.tsx | +
+
+ |
+ 0% | +0/201 | +0% | +0/1 | +0% | +0/1 | +0% | +0/201 | +
| FileUpload.tsx | +
+
+ |
+ 0% | +0/203 | +0% | +0/1 | +0% | +0/1 | +0% | +0/203 | +
| Flashcards.tsx | +
+
+ |
+ 0% | +0/217 | +0% | +0/1 | +0% | +0/1 | +0% | +0/217 | +
| Header.tsx | +
+
+ |
+ 0% | +0/86 | +0% | +0/1 | +0% | +0/1 | +0% | +0/86 | +
| Materials.tsx | +
+
+ |
+ 0% | +0/496 | +0% | +0/1 | +0% | +0/1 | +0% | +0/496 | +
| Quiz.tsx | +
+
+ |
+ 0% | +0/556 | +0% | +0/1 | +0% | +0/1 | +0% | +0/556 | +
| SearchResults.tsx | +
+
+ |
+ 0% | +0/385 | +0% | +0/1 | +0% | +0/1 | +0% | +0/385 | +
| Settings.tsx | +
+
+ |
+ 0% | +0/608 | +0% | +0/1 | +0% | +0/1 | +0% | +0/608 | +
| Sidebar.tsx | +
+
+ |
+ 0% | +0/119 | +0% | +0/1 | +0% | +0/1 | +0% | +0/119 | +
| StudyTimer.tsx | +
+
+ |
+ 0% | +0/418 | +0% | +0/1 | +0% | +0/1 | +0% | +0/418 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + + + + + + +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x | import React, { createContext, useContext, useState, useEffect } from 'react';
+
+interface ThemeContextType {
+ isDark: boolean;
+ toggleTheme: () => void;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+export const useTheme = () => {
+ const context = useContext(ThemeContext);
+ if (!context) {
+ throw new Error('useTheme must be used within a ThemeProvider');
+ }
+ return context;
+};
+
+export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+ const [isDark, setIsDark] = useState(() => {
+ const saved = localStorage.getItem('theme');
+ return saved ? saved === 'dark' : false;
+ });
+
+ useEffect(() => {
+ localStorage.setItem('theme', isDark ? 'dark' : 'light');
+ if (isDark) {
+ document.documentElement.classList.add('dark');
+ } else {
+ document.documentElement.classList.remove('dark');
+ }
+ }, [isDark]);
+
+ const toggleTheme = () => setIsDark(!isDark);
+
+ return (
+ <ThemeContext.Provider value={{ isDark, toggleTheme }}>
+ {children}
+ </ThemeContext.Provider>
+ );
+}; |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| ThemeContext.tsx | +
+
+ |
+ 82.5% | +33/40 | +50% | +3/6 | +33.33% | +1/3 | +82.5% | +33/40 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| sampleData.ts | +
+
+ |
+ 0% | +0/122 | +0% | +0/1 | +0% | +0/1 | +0% | +0/122 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | // Sample flashcards data +export const flashcardsData = { + "decks": [ + { + "subject": "Psychology", + "cards": [ + { + "front": "What is cognitive dissonance?", + "back": "Mental discomfort from conflicting beliefs" + }, + { + "front": "Define operant conditioning", + "back": "Learning through rewards and punishments" + }, + { + "front": "What is the amygdala?", + "back": "Brain region that processes emotions and fear" + }, + { + "front": "What does the prefrontal cortex do?", + "back": "Involved in decision-making and self-control" + }, + { + "front": "Define classical conditioning", + "back": "Learning through association between stimuli" + } + ] + }, + { + "subject": "Biology", + "cards": [ + { + "front": "What is mitosis?", + "back": "Cell division creating identical diploid cells" + }, + { + "front": "Define photosynthesis", + "back": "Process plants use to convert light into energy" + }, + { + "front": "What is DNA?", + "back": "Genetic material containing hereditary information" + }, + { + "front": "What is the function of mitochondria?", + "back": "Produces energy through cellular respiration" + }, + { + "front": "Define osmosis", + "back": "Movement of water across a semi-permeable membrane" + } + ] + }, + { + "subject": "History", + "cards": [ + { + "front": "Who was the first President of the United States?", + "back": "George Washington" + }, + { + "front": "What triggered World War I?", + "back": "The assassination of Archduke Franz Ferdinand" + }, + { + "front": "When did India gain independence?", + "back": "August 15, 1947" + }, + { + "front": "What was the Cold War?", + "back": "Period of political tension between the US and USSR" + }, + { + "front": "Who was Napoleon Bonaparte?", + "back": "French military leader who rose to power after the French Revolution" + } + ] + } + ] +}; + +// Sample quiz results data +export const quizResultsData = [ + { date: "28-06-2025", subject: "Psychology", score: 92, timeTaken: 8.5, questionsTotal: 10, questionsCorrect: 9 }, + { date: "27-06-2025", subject: "Biology", score: 87, timeTaken: 12.3, questionsTotal: 15, questionsCorrect: 13 }, + { date: "26-06-2025", subject: "History", score: 95, timeTaken: 6.2, questionsTotal: 8, questionsCorrect: 8 }, + { date: "25-06-2025", subject: "Psychology", score: 83, timeTaken: 9.1, questionsTotal: 12, questionsCorrect: 10 }, + { date: "24-06-2025", subject: "Biology", score: 91, timeTaken: 10.8, questionsTotal: 11, questionsCorrect: 10 } +]; + +// Sample study progress data +export const studyProgressData = { + "user": { + "name": "Alex Johnson", + "studyStreak": 15, + "totalStudyHours": 67, + "cardsReviewed": 342, + "quizzesTaken": 28, + "averageScore": 88.5, + "level": 7, + "xpPoints": 2450 + }, + "subjects": [ + {"name": "Psychology", "progress": 75, "lastStudied": "2025-06-27"}, + {"name": "Biology", "progress": 62, "lastStudied": "2025-06-26"}, + {"name": "History", "progress": 89, "lastStudied": "2025-06-28"} + ], + "achievements": [ + {"name": "Study Streak Master", "unlocked": true}, + {"name": "Quiz Champion", "unlocked": true}, + {"name": "Flashcard Expert", "unlocked": false} + ] +}; + +// Sample AI responses for chat +export const aiResponses = [ + "I'd be happy to help you with that concept. Can you tell me more about what specific aspect you're struggling with?", + "That's a great question! Let me break this down into simpler terms for you.", + "Based on your recent study sessions, I notice you might benefit from reviewing this topic again.", + "Excellent work! You're showing great progress in this subject area.", + "I recommend focusing on the key concepts we discussed earlier. Would you like me to create some practice questions?" +]; |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ ++ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 | + + + + + + + + + + | import { StrictMode } from 'react'; +import { createRoot } from 'react-dom/client'; +import App from './App.tsx'; +import './index.css'; + +createRoot(document.getElementById('root')!).render( + <StrictMode> + <App /> + </StrictMode> +); + |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 | + + + + + + + + + + + + + + + + + + + + + + + + | /** @type {import('tailwindcss').Config} */ +export default { + content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], + darkMode: 'class', + theme: { + extend: { + screens: { + 'xs': '475px', + }, + spacing: { + 'safe-top': 'env(safe-area-inset-top)', + 'safe-bottom': 'env(safe-area-inset-bottom)', + 'safe-left': 'env(safe-area-inset-left)', + 'safe-right': 'env(safe-area-inset-right)', + }, + minHeight: { + 'screen-safe': 'calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom))', + }, + maxHeight: { + 'screen-safe': 'calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom))', + }, + }, + }, + plugins: [], +}; |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| StudyMaster | +
+
+ |
+ 0% | +0/55 | +0% | +0/3 | +0% | +0/3 | +0% | +0/55 | +
| StudyMaster/src | +
+
+ |
+ 0% | +0/88 | +0% | +0/2 | +0% | +0/2 | +0% | +0/88 | +
| StudyMaster/src/components | +
+
+ |
+ 0% | +0/4334 | +0% | +0/13 | +0% | +0/13 | +0% | +0/4334 | +
| StudyMaster/src/contexts | +
+
+ |
+ 82.5% | +33/40 | +50% | +3/6 | +33.33% | +1/3 | +82.5% | +33/40 | +
| StudyMaster/src/data | +
+
+ |
+ 0% | +0/122 | +0% | +0/1 | +0% | +0/1 | +0% | +0/122 | +
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| playwright.config.ts | -
-
- |
- 0% | -0/24 | -0% | -0/1 | -0% | -0/1 | -0% | -0/24 | -
| postcss.config.js | -
-
- |
- 0% | -0/6 | -0% | -0/1 | -0% | -0/1 | -0% | -0/6 | -
| tailwind.config.js | -
-
- |
- 0% | -0/25 | -0% | -0/1 | -0% | -0/1 | -0% | -0/25 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 | - - - - - - - - - - - - - - - - - - - - - - - | import { defineConfig, devices } from '@playwright/test'; - -export default defineConfig({ - testDir: './src/e2e', - fullyParallel: true, - forbidOnly: !!process.env.CI, - retries: process.env.CI ? 2 : 0, - workers: process.env.CI ? 1 : undefined, - reporter: 'html', - use: { - baseURL: 'http://localhost:4173', - trace: 'on-first-retry', - }, - projects: [ - { - name: 'chromium', - use: { ...devices['Desktop Chrome'] }, - }, - ], - webServer: { - command: 'npm run preview', - port: 4173, - }, -}); |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 | - - - - - - | export default { - plugins: { - tailwindcss: {}, - autoprefixer: {}, - }, -}; - |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | import React, { useState } from 'react'; -import { ThemeProvider } from './contexts/ThemeContext'; -import Sidebar from './components/Sidebar'; -import Header from './components/Header'; -import Dashboard from './components/Dashboard'; -import Flashcards from './components/Flashcards'; -import Quiz from './components/Quiz'; -import FileUpload from './components/FileUpload'; -import Analytics from './components/Analytics'; -import StudyTimer from './components/StudyTimer'; -import Achievements from './components/Achievements'; -import Materials from './components/Materials'; -import SearchResults from './components/SearchResults'; -import Settings from './components/Settings'; -import AIChat from './components/AIChat'; - -function App() { - const [activeSection, setActiveSection] = useState('dashboard'); - const [showAIChat, setShowAIChat] = useState(false); - const [sidebarOpen, setSidebarOpen] = useState(false); - - const renderActiveSection = () => { - switch (activeSection) { - case 'dashboard': - return <Dashboard />; - case 'flashcards': - return <Flashcards />; - case 'quiz': - return <Quiz />; - case 'upload': - return <FileUpload />; - case 'analytics': - return <Analytics />; - case 'study-timer': - return <StudyTimer />; - case 'achievements': - return <Achievements />; - case 'materials': - return <Materials />; - case 'search': - return <SearchResults />; - case 'settings': - return <Settings />; - default: - return <Dashboard />; - } - }; - - return ( - <ThemeProvider> - <div className="flex h-screen bg-gray-50 dark:bg-gray-900 overflow-hidden"> - <Sidebar - activeSection={activeSection} - setActiveSection={setActiveSection} - isOpen={sidebarOpen} - onClose={() => setSidebarOpen(false)} - /> - - <div className="flex-1 flex flex-col overflow-hidden lg:ml-0"> - <Header - showAIChat={showAIChat} - setShowAIChat={setShowAIChat} - onMenuClick={() => setSidebarOpen(true)} - /> - - <main className="flex-1 overflow-y-auto"> - {renderActiveSection()} - </main> - </div> - - {/* AI Chat Assistant */} - <AIChat isOpen={showAIChat} onClose={() => setShowAIChat(false)} /> - </div> - </ThemeProvider> - ); -} - -export default App; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 -210 -211 -212 -213 -214 -215 -216 -217 -218 -219 -220 -221 -222 -223 -224 -225 -226 -227 -228 -229 -230 -231 -232 -233 -234 -235 -236 -237 -238 -239 -240 -241 -242 -243 -244 -245 -246 -247 -248 -249 -250 -251 -252 -253 -254 -255 -256 -257 -258 -259 -260 -261 -262 -263 -264 -265 -266 -267 -268 -269 -270 -271 -272 -273 -274 -275 -276 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | import React, { useState, useRef, useEffect } from 'react'; -import { motion, AnimatePresence } from 'framer-motion'; -import { MessageCircle, X, Send, Bot, User, Sparkles, BookOpen, Brain, Target } from 'lucide-react'; - -interface Message { - id: string; - text: string; - sender: 'user' | 'ai'; - timestamp: Date; - suggestions?: string[]; -} - -interface AIChatProps { - isOpen: boolean; - onClose: () => void; -} - -const AIChat: React.FC<AIChatProps> = ({ isOpen, onClose }) => { - const [messages, setMessages] = useState<Message[]>([ - { - id: '1', - text: "Hi! I'm your AI study assistant. I can help you with creating flashcards, explaining concepts, generating quiz questions, and optimizing your study schedule. What would you like to work on today?", - sender: 'ai', - timestamp: new Date(), - suggestions: [ - "Create flashcards from my notes", - "Explain quantum physics concepts", - "Generate a quiz on biology", - "Optimize my study schedule" - ] - } - ]); - const [inputText, setInputText] = useState(''); - const [isTyping, setIsTyping] = useState(false); - const messagesEndRef = useRef<HTMLDivElement>(null); - const inputRef = useRef<HTMLInputElement>(null); - - const aiResponses = [ - "I'd be happy to help you with that concept. Let me break it down into simpler terms.", - "That's a great question! Based on your recent study sessions, I notice you might benefit from reviewing this topic again.", - "Excellent work! You're showing great progress in this subject area. Let me create some practice questions for you.", - "I recommend focusing on the key concepts we discussed earlier. Would you like me to generate some flashcards?", - "Based on your learning patterns, I suggest using spaced repetition for this material. Let me set up a study schedule.", - "I can see you're struggling with this topic. Let me provide a different explanation approach that might help.", - "Your study streak is impressive! To maintain momentum, let's focus on reinforcing what you've learned.", - "I've analyzed your quiz results and identified areas for improvement. Would you like me to create targeted practice materials?" - ]; - - const scrollToBottom = () => { - messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }); - }; - - useEffect(() => { - scrollToBottom(); - }, [messages]); - - useEffect(() => { - if (isOpen && inputRef.current) { - inputRef.current.focus(); - } - }, [isOpen]); - - const handleSendMessage = async () => { - if (!inputText.trim()) return; - - const userMessage: Message = { - id: Date.now().toString(), - text: inputText, - sender: 'user', - timestamp: new Date() - }; - - setMessages(prev => [...prev, userMessage]); - setInputText(''); - setIsTyping(true); - - // Simulate AI response delay - setTimeout(() => { - const aiResponse: Message = { - id: (Date.now() + 1).toString(), - text: aiResponses[Math.floor(Math.random() * aiResponses.length)], - sender: 'ai', - timestamp: new Date(), - suggestions: Math.random() > 0.5 ? [ - "Create practice quiz", - "Generate summary", - "Schedule review session", - "Explain in detail" - ] : undefined - }; - - setMessages(prev => [...prev, aiResponse]); - setIsTyping(false); - }, 1000 + Math.random() * 2000); - }; - - const handleSuggestionClick = (suggestion: string) => { - setInputText(suggestion); - if (inputRef.current) { - inputRef.current.focus(); - } - }; - - const formatTime = (date: Date) => { - return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); - }; - - return ( - <> - {/* Chat Toggle Button */} - <AnimatePresence> - {!isOpen && ( - <motion.button - initial={{ scale: 0, opacity: 0 }} - animate={{ scale: 1, opacity: 1 }} - exit={{ scale: 0, opacity: 0 }} - onClick={() => setIsOpen(true)} - className="fixed bottom-4 right-4 lg:bottom-6 lg:right-6 w-12 h-12 lg:w-14 lg:h-14 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-full shadow-lg hover:shadow-xl transition-all duration-300 flex items-center justify-center z-50 touch-manipulation" - whileHover={{ scale: 1.1 }} - whileTap={{ scale: 0.9 }} - > - <MessageCircle className="w-5 h-5 lg:w-6 lg:h-6" /> - <div className="absolute -top-1 -right-1 w-3 h-3 lg:w-4 lg:h-4 bg-orange-500 rounded-full animate-pulse"></div> - </motion.button> - )} - </AnimatePresence> - - {/* Chat Panel */} - <AnimatePresence> - {isOpen && ( - <motion.div - initial={{ opacity: 0, x: 400, y: 100 }} - animate={{ opacity: 1, x: 0, y: 0 }} - exit={{ opacity: 0, x: 400, y: 100 }} - className="fixed bottom-4 right-4 lg:bottom-6 lg:right-6 w-[calc(100vw-2rem)] max-w-sm lg:w-96 h-[70vh] lg:h-[600px] bg-white dark:bg-gray-800 rounded-2xl shadow-2xl border border-gray-200 dark:border-gray-700 flex flex-col z-50" - > - {/* Header */} - <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700 bg-gradient-to-r from-blue-500 to-purple-600 rounded-t-2xl text-white"> - <div className="flex items-center gap-3"> - <div className="w-8 h-8 bg-white/20 rounded-full flex items-center justify-center"> - <Sparkles className="w-4 h-4" /> - </div> - <div> - <h3 className="font-semibold text-sm lg:text-base">AI Study Assistant</h3> - <p className="text-xs text-blue-100">Always here to help</p> - </div> - </div> - <button - onClick={onClose} - className="w-8 h-8 bg-white/20 rounded-full flex items-center justify-center hover:bg-white/30 transition-colors touch-manipulation" - > - <X className="w-4 h-4" /> - </button> - </div> - - {/* Messages */} - <div className="flex-1 overflow-y-auto p-4 space-y-4"> - {messages.map((message) => ( - <div - key={message.id} - className={`flex ${message.sender === 'user' ? 'justify-end' : 'justify-start'}`} - > - <div className={`flex gap-2 max-w-[85%] ${message.sender === 'user' ? 'flex-row-reverse' : ''}`}> - <div className={`w-6 h-6 lg:w-8 lg:h-8 rounded-full flex items-center justify-center flex-shrink-0 ${ - message.sender === 'user' - ? 'bg-blue-500 text-white' - : 'bg-gradient-to-r from-purple-500 to-pink-500 text-white' - }`}> - {message.sender === 'user' ? <User className="w-3 h-3 lg:w-4 lg:h-4" /> : <Bot className="w-3 h-3 lg:w-4 lg:h-4" />} - </div> - <div className={`rounded-2xl px-3 py-2 lg:px-4 lg:py-2 ${ - message.sender === 'user' - ? 'bg-blue-500 text-white rounded-br-md' - : 'bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-white rounded-bl-md' - }`}> - <p className="text-xs lg:text-sm">{message.text}</p> - <p className={`text-xs mt-1 ${ - message.sender === 'user' ? 'text-blue-100' : 'text-gray-500 dark:text-gray-400' - }`}> - {formatTime(message.timestamp)} - </p> - </div> - </div> - </div> - ))} - - {/* Suggestions */} - {messages.length > 0 && messages[messages.length - 1].suggestions && ( - <div className="flex flex-wrap gap-2"> - {messages[messages.length - 1].suggestions!.map((suggestion, index) => ( - <button - key={index} - onClick={() => handleSuggestionClick(suggestion)} - className="px-2 py-1 lg:px-3 lg:py-1 bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 rounded-full text-xs hover:bg-blue-100 dark:hover:bg-blue-900/50 transition-colors touch-manipulation" - > - {suggestion} - </button> - ))} - </div> - )} - - {/* Typing Indicator */} - {isTyping && ( - <div className="flex justify-start"> - <div className="flex gap-2 max-w-[85%]"> - <div className="w-6 h-6 lg:w-8 lg:h-8 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 text-white flex items-center justify-center flex-shrink-0"> - <Bot className="w-3 h-3 lg:w-4 lg:h-4" /> - </div> - <div className="bg-gray-100 dark:bg-gray-700 rounded-2xl rounded-bl-md px-3 py-2 lg:px-4 lg:py-2"> - <div className="flex gap-1"> - <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div> - <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '0.1s' }}></div> - <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '0.2s' }}></div> - </div> - </div> - </div> - </div> - )} - - <div ref={messagesEndRef} /> - </div> - - {/* Quick Actions */} - <div className="p-3 lg:p-4 border-t border-gray-200 dark:border-gray-700"> - <div className="flex gap-1 lg:gap-2 mb-3"> - <button - onClick={() => handleSuggestionClick("Create flashcards from my notes")} - className="flex-1 flex items-center gap-1 lg:gap-2 px-2 py-2 lg:px-3 lg:py-2 bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 rounded-lg hover:bg-blue-100 dark:hover:bg-blue-900/50 transition-colors touch-manipulation" - > - <Brain className="w-3 h-3 lg:w-4 lg:h-4" /> - <span className="text-xs">Cards</span> - </button> - <button - onClick={() => handleSuggestionClick("Generate a practice quiz")} - className="flex-1 flex items-center gap-1 lg:gap-2 px-2 py-2 lg:px-3 lg:py-2 bg-green-50 dark:bg-green-900/30 text-green-600 dark:text-green-400 rounded-lg hover:bg-green-100 dark:hover:bg-green-900/50 transition-colors touch-manipulation" - > - <BookOpen className="w-3 h-3 lg:w-4 lg:h-4" /> - <span className="text-xs">Quiz</span> - </button> - <button - onClick={() => handleSuggestionClick("Optimize my study schedule")} - className="flex-1 flex items-center gap-1 lg:gap-2 px-2 py-2 lg:px-3 lg:py-2 bg-purple-50 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400 rounded-lg hover:bg-purple-100 dark:hover:bg-purple-900/50 transition-colors touch-manipulation" - > - <Target className="w-3 h-3 lg:w-4 lg:h-4" /> - <span className="text-xs">Plan</span> - </button> - </div> - - {/* Input */} - <div className="flex gap-2"> - <input - ref={inputRef} - type="text" - value={inputText} - onChange={(e) => setInputText(e.target.value)} - onKeyPress={(e) => e.key === 'Enter' && handleSendMessage()} - placeholder="Ask me anything..." - className="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm" - /> - <button - onClick={handleSendMessage} - disabled={!inputText.trim() || isTyping} - className="px-3 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors touch-manipulation" - > - <Send className="w-4 h-4" /> - </button> - </div> - </div> - </motion.div> - )} - </AnimatePresence> - </> - ); -}; - -export default AIChat; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 -210 -211 -212 -213 -214 -215 -216 -217 -218 -219 -220 -221 -222 -223 -224 -225 -226 -227 -228 -229 -230 -231 -232 -233 -234 -235 -236 -237 -238 -239 -240 -241 -242 -243 -244 -245 -246 -247 -248 -249 -250 -251 -252 -253 -254 -255 -256 -257 -258 -259 -260 -261 -262 -263 -264 -265 -266 -267 -268 -269 -270 -271 -272 -273 -274 -275 -276 -277 -278 -279 -280 -281 -282 -283 -284 -285 -286 -287 -288 -289 -290 -291 -292 -293 -294 -295 -296 -297 -298 -299 -300 -301 -302 -303 -304 -305 -306 -307 -308 -309 -310 -311 -312 -313 -314 -315 -316 -317 -318 -319 -320 -321 -322 -323 -324 -325 -326 -327 -328 -329 -330 -331 -332 -333 -334 -335 -336 -337 -338 -339 -340 -341 -342 -343 -344 -345 -346 -347 -348 -349 -350 -351 -352 -353 -354 -355 -356 -357 -358 -359 -360 -361 -362 -363 -364 -365 -366 -367 -368 -369 -370 -371 -372 -373 -374 -375 -376 -377 -378 -379 -380 -381 -382 -383 -384 -385 -386 -387 -388 -389 -390 -391 -392 -393 -394 -395 -396 -397 -398 -399 -400 -401 -402 -403 -404 -405 -406 -407 -408 -409 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | import React from 'react'; -import { motion } from 'framer-motion'; -import { - Trophy, - Award, - Star, - Target, - Flame, - Brain, - Clock, - BookOpen, - Zap, - Crown, - Medal, - Shield, - Lock -} from 'lucide-react'; - -interface Achievement { - id: string; - title: string; - description: string; - icon: React.ReactNode; - unlocked: boolean; - progress: number; - maxProgress: number; - rarity: 'common' | 'rare' | 'epic' | 'legendary'; - category: 'study' | 'quiz' | 'streak' | 'time' | 'special'; - unlockedDate?: string; - xpReward: number; -} - -const Achievements: React.FC = () => { - const achievements: Achievement[] = [ - { - id: '1', - title: 'First Steps', - description: 'Complete your first study session', - icon: <BookOpen className="w-6 h-6" />, - unlocked: true, - progress: 1, - maxProgress: 1, - rarity: 'common', - category: 'study', - unlockedDate: '2025-06-15', - xpReward: 100 - }, - { - id: '2', - title: 'Quiz Master', - description: 'Score 90% or higher on 10 quizzes', - icon: <Brain className="w-6 h-6" />, - unlocked: true, - progress: 10, - maxProgress: 10, - rarity: 'rare', - category: 'quiz', - unlockedDate: '2025-06-20', - xpReward: 250 - }, - { - id: '3', - title: 'Study Streak', - description: 'Study for 7 consecutive days', - icon: <Flame className="w-6 h-6" />, - unlocked: true, - progress: 7, - maxProgress: 7, - rarity: 'rare', - category: 'streak', - unlockedDate: '2025-06-22', - xpReward: 300 - }, - { - id: '4', - title: 'Time Warrior', - description: 'Complete 50 hours of focused study', - icon: <Clock className="w-6 h-6" />, - unlocked: false, - progress: 23, - maxProgress: 50, - rarity: 'epic', - category: 'time', - xpReward: 500 - }, - { - id: '5', - title: 'Flashcard Hero', - description: 'Review 1000 flashcards', - icon: <Zap className="w-6 h-6" />, - unlocked: false, - progress: 342, - maxProgress: 1000, - rarity: 'epic', - category: 'study', - xpReward: 400 - }, - { - id: '6', - title: 'Perfect Score', - description: 'Achieve 100% on any quiz', - icon: <Star className="w-6 h-6" />, - unlocked: false, - progress: 0, - maxProgress: 1, - rarity: 'rare', - category: 'quiz', - xpReward: 200 - }, - { - id: '7', - title: 'Marathon Learner', - description: 'Study for 30 consecutive days', - icon: <Shield className="w-6 h-6" />, - unlocked: false, - progress: 15, - maxProgress: 30, - rarity: 'epic', - category: 'streak', - xpReward: 750 - }, - { - id: '8', - title: 'Knowledge Emperor', - description: 'Complete all available courses', - icon: <Crown className="w-6 h-6" />, - unlocked: false, - progress: 2, - maxProgress: 5, - rarity: 'legendary', - category: 'special', - xpReward: 1000 - }, - { - id: '9', - title: 'Speed Demon', - description: 'Complete a quiz in under 2 minutes', - icon: <Zap className="w-6 h-6" />, - unlocked: false, - progress: 0, - maxProgress: 1, - rarity: 'rare', - category: 'quiz', - xpReward: 250 - }, - { - id: '10', - title: 'Dedication Medal', - description: 'Study for 100 total hours', - icon: <Medal className="w-6 h-6" />, - unlocked: false, - progress: 67, - maxProgress: 100, - rarity: 'legendary', - category: 'time', - xpReward: 1500 - } - ]; - - const getRarityColor = (rarity: string) => { - switch (rarity) { - case 'common': return 'from-gray-400 to-gray-600'; - case 'rare': return 'from-blue-400 to-blue-600'; - case 'epic': return 'from-purple-400 to-purple-600'; - case 'legendary': return 'from-yellow-400 to-orange-500'; - default: return 'from-gray-400 to-gray-600'; - } - }; - - const getRarityBorder = (rarity: string) => { - switch (rarity) { - case 'common': return 'border-gray-300 dark:border-gray-600'; - case 'rare': return 'border-blue-300 dark:border-blue-600'; - case 'epic': return 'border-purple-300 dark:border-purple-600'; - case 'legendary': return 'border-yellow-300 dark:border-yellow-600'; - default: return 'border-gray-300 dark:border-gray-600'; - } - }; - - const getCategoryIcon = (category: string) => { - switch (category) { - case 'study': return <BookOpen className="w-4 h-4" />; - case 'quiz': return <Brain className="w-4 h-4" />; - case 'streak': return <Flame className="w-4 h-4" />; - case 'time': return <Clock className="w-4 h-4" />; - case 'special': return <Crown className="w-4 h-4" />; - default: return <Target className="w-4 h-4" />; - } - }; - - const totalAchievements = achievements.length; - const unlockedAchievements = achievements.filter(a => a.unlocked).length; - const totalXP = achievements.filter(a => a.unlocked).reduce((sum, a) => sum + a.xpReward, 0); - const overallProgress = (unlockedAchievements / totalAchievements) * 100; - - const categories = ['all', 'study', 'quiz', 'streak', 'time', 'special']; - const [selectedCategory, setSelectedCategory] = React.useState('all'); - - const filteredAchievements = selectedCategory === 'all' - ? achievements - : achievements.filter(a => a.category === selectedCategory); - - return ( - <div className="p-6 space-y-6"> - {/* Header */} - <div className="flex items-center justify-between"> - <div> - <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Achievements</h1> - <p className="text-gray-600 dark:text-gray-400 mt-1"> - Track your learning milestones and unlock rewards - </p> - </div> - <div className="flex items-center gap-2 text-sm text-yellow-600 dark:text-yellow-400"> - <Trophy className="w-4 h-4" /> - <span>{totalXP} XP Earned</span> - </div> - </div> - - {/* Progress Overview */} - <div className="grid grid-cols-1 md:grid-cols-4 gap-6"> - <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700"> - <div className="flex items-center justify-between mb-4"> - <div className="w-12 h-12 bg-yellow-100 dark:bg-yellow-900 rounded-lg flex items-center justify-center"> - <Trophy className="w-6 h-6 text-yellow-600 dark:text-yellow-400" /> - </div> - </div> - <h3 className="text-2xl font-bold text-gray-900 dark:text-white">{unlockedAchievements}</h3> - <p className="text-gray-600 dark:text-gray-400">Achievements Unlocked</p> - </div> - - <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700"> - <div className="flex items-center justify-between mb-4"> - <div className="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center"> - <Target className="w-6 h-6 text-blue-600 dark:text-blue-400" /> - </div> - </div> - <h3 className="text-2xl font-bold text-gray-900 dark:text-white">{Math.round(overallProgress)}%</h3> - <p className="text-gray-600 dark:text-gray-400">Overall Progress</p> - </div> - - <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700"> - <div className="flex items-center justify-between mb-4"> - <div className="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center"> - <Star className="w-6 h-6 text-purple-600 dark:text-purple-400" /> - </div> - </div> - <h3 className="text-2xl font-bold text-gray-900 dark:text-white">{totalXP}</h3> - <p className="text-gray-600 dark:text-gray-400">Total XP</p> - </div> - - <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700"> - <div className="flex items-center justify-between mb-4"> - <div className="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center"> - <Award className="w-6 h-6 text-green-600 dark:text-green-400" /> - </div> - </div> - <h3 className="text-2xl font-bold text-gray-900 dark:text-white"> - {achievements.filter(a => a.rarity === 'legendary' && a.unlocked).length} - </h3> - <p className="text-gray-600 dark:text-gray-400">Legendary Unlocked</p> - </div> - </div> - - {/* Category Filters */} - <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700"> - <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Categories</h3> - <div className="flex flex-wrap gap-2"> - {categories.map((category) => ( - <button - key={category} - onClick={() => setSelectedCategory(category)} - className={`px-4 py-2 rounded-lg font-medium transition-colors flex items-center gap-2 ${ - selectedCategory === category - ? 'bg-blue-500 text-white' - : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600' - }`} - > - {category !== 'all' && getCategoryIcon(category)} - <span className="capitalize">{category}</span> - <span className="text-xs opacity-75"> - ({category === 'all' ? achievements.length : achievements.filter(a => a.category === category).length}) - </span> - </button> - ))} - </div> - </div> - - {/* Achievements Grid */} - <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> - {filteredAchievements.map((achievement, index) => ( - <motion.div - key={achievement.id} - initial={{ opacity: 0, y: 20 }} - animate={{ opacity: 1, y: 0 }} - transition={{ delay: index * 0.1 }} - className={`bg-white dark:bg-gray-800 rounded-xl p-6 border-2 ${getRarityBorder(achievement.rarity)} relative overflow-hidden ${ - achievement.unlocked ? '' : 'opacity-75' - }`} - > - {/* Rarity Background */} - <div className={`absolute top-0 right-0 w-16 h-16 bg-gradient-to-br ${getRarityColor(achievement.rarity)} opacity-10 rounded-bl-3xl`} /> - - {/* Lock Overlay for Locked Achievements */} - {!achievement.unlocked && ( - <div className="absolute inset-0 bg-black/5 dark:bg-black/20 rounded-xl flex items-center justify-center"> - <div className="w-12 h-12 bg-gray-400 dark:bg-gray-600 rounded-full flex items-center justify-center"> - <Lock className="w-6 h-6 text-white" /> - </div> - </div> - )} - - <div className="relative"> - {/* Achievement Icon */} - <div className={`w-16 h-16 bg-gradient-to-br ${getRarityColor(achievement.rarity)} rounded-xl flex items-center justify-center text-white mb-4 ${ - achievement.unlocked ? '' : 'grayscale' - }`}> - {achievement.icon} - </div> - - {/* Achievement Info */} - <div className="mb-4"> - <div className="flex items-center justify-between mb-2"> - <h4 className="font-semibold text-gray-900 dark:text-white">{achievement.title}</h4> - <div className="flex items-center gap-1"> - {getCategoryIcon(achievement.category)} - <span className={`text-xs px-2 py-1 rounded-full font-medium ${ - achievement.rarity === 'legendary' ? 'bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200' : - achievement.rarity === 'epic' ? 'bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200' : - achievement.rarity === 'rare' ? 'bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200' : - 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200' - }`}> - {achievement.rarity} - </span> - </div> - </div> - <p className="text-sm text-gray-600 dark:text-gray-400 mb-3"> - {achievement.description} - </p> - </div> - - {/* Progress Bar */} - <div className="mb-4"> - <div className="flex justify-between items-center mb-2"> - <span className="text-sm font-medium text-gray-700 dark:text-gray-300"> - Progress - </span> - <span className="text-sm text-gray-600 dark:text-gray-400"> - {achievement.progress}/{achievement.maxProgress} - </span> - </div> - <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2"> - <div - className={`bg-gradient-to-r ${getRarityColor(achievement.rarity)} h-2 rounded-full transition-all duration-300`} - style={{ width: `${(achievement.progress / achievement.maxProgress) * 100}%` }} - /> - </div> - </div> - - {/* Reward & Date */} - <div className="flex items-center justify-between"> - <div className="flex items-center gap-2"> - <Star className="w-4 h-4 text-yellow-500" /> - <span className="text-sm font-medium text-gray-900 dark:text-white"> - {achievement.xpReward} XP - </span> - </div> - {achievement.unlocked && achievement.unlockedDate && ( - <span className="text-xs text-gray-500 dark:text-gray-400"> - Unlocked {achievement.unlockedDate} - </span> - )} - </div> - </div> - </motion.div> - ))} - </div> - - {/* Achievement Tips */} - <div className="bg-gradient-to-r from-blue-500 to-purple-600 rounded-xl p-6 text-white"> - <h3 className="text-lg font-semibold mb-4 flex items-center gap-2"> - <Trophy className="w-5 h-5" /> - Achievement Tips - </h3> - <div className="grid grid-cols-1 md:grid-cols-3 gap-4"> - <div> - <h4 className="font-medium mb-1">Stay Consistent</h4> - <p className="text-sm text-blue-100"> - Daily study sessions help unlock streak-based achievements faster. - </p> - </div> - <div> - <h4 className="font-medium mb-1">Challenge Yourself</h4> - <p className="text-sm text-blue-100"> - Take on difficult quizzes to unlock rare and epic achievements. - </p> - </div> - <div> - <h4 className="font-medium mb-1">Explore All Features</h4> - <p className="text-sm text-blue-100"> - Use flashcards, timers, and different study methods for varied achievements. - </p> - </div> - </div> - </div> - </div> - ); -}; - -export default Achievements; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 -210 -211 -212 -213 -214 -215 -216 -217 -218 -219 -220 -221 -222 -223 -224 -225 -226 -227 -228 -229 -230 -231 -232 -233 -234 -235 -236 -237 -238 -239 -240 -241 -242 -243 -244 -245 -246 -247 -248 -249 -250 -251 -252 -253 -254 -255 -256 -257 -258 -259 -260 -261 -262 -263 -264 -265 -266 -267 -268 -269 -270 -271 -272 -273 -274 -275 -276 -277 -278 -279 -280 -281 -282 -283 -284 -285 -286 -287 -288 -289 -290 -291 -292 -293 -294 -295 -296 -297 -298 -299 -300 -301 -302 -303 -304 -305 -306 -307 -308 -309 -310 -311 -312 -313 -314 -315 -316 -317 -318 -319 -320 -321 -322 -323 -324 -325 -326 -327 -328 -329 -330 -331 -332 -333 -334 -335 -336 -337 -338 -339 -340 -341 -342 -343 -344 -345 -346 -347 -348 -349 -350 -351 -352 -353 -354 -355 -356 -357 -358 -359 -360 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | import React from 'react'; -import { LineChart, Line, AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, BarChart, Bar, PieChart, Pie, Cell, RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar } from 'recharts'; -import { TrendingUp, TrendingDown, Calendar, Clock, Target, Brain, BookOpen, Award, Zap, Users } from 'lucide-react'; - -const Analytics: React.FC = () => { - // Sample data for charts - const studyProgressData = [ - { date: '01/06', hours: 2.5, efficiency: 85, score: 78 }, - { date: '02/06', hours: 3.2, efficiency: 88, score: 82 }, - { date: '03/06', hours: 1.8, efficiency: 82, score: 75 }, - { date: '04/06', hours: 4.1, efficiency: 91, score: 88 }, - { date: '05/06', hours: 3.5, efficiency: 89, score: 85 }, - { date: '06/06', hours: 2.9, efficiency: 87, score: 83 }, - { date: '07/06', hours: 3.8, efficiency: 93, score: 91 } - ]; - - const subjectPerformance = [ - { subject: 'Psychology', completed: 75, accuracy: 88, timeSpent: 45 }, - { subject: 'Biology', completed: 62, accuracy: 82, timeSpent: 38 }, - { subject: 'History', completed: 89, accuracy: 91, timeSpent: 52 }, - { subject: 'Mathematics', completed: 58, accuracy: 76, timeSpent: 41 }, - { subject: 'Physics', completed: 71, accuracy: 84, timeSpent: 47 } - ]; - - const studyMethodData = [ - { method: 'Flashcards', value: 35, color: '#3B82F6' }, - { method: 'Quizzes', value: 28, color: '#10B981' }, - { method: 'Reading', value: 20, color: '#8B5CF6' }, - { method: 'Videos', value: 17, color: '#F59E0B' } - ]; - - const skillRadarData = [ - { skill: 'Memory', current: 85, target: 90 }, - { skill: 'Analysis', current: 78, target: 85 }, - { skill: 'Comprehension', current: 92, target: 95 }, - { skill: 'Speed', current: 74, target: 80 }, - { skill: 'Accuracy', current: 88, target: 90 }, - { skill: 'Retention', current: 81, target: 85 } - ]; - - const weeklyGoals = [ - { day: 'Mon', target: 3, achieved: 3.2 }, - { day: 'Tue', target: 3, achieved: 2.8 }, - { day: 'Wed', target: 3, achieved: 3.5 }, - { day: 'Thu', target: 3, achieved: 2.9 }, - { day: 'Fri', target: 3, achieved: 3.1 }, - { day: 'Sat', target: 4, achieved: 4.2 }, - { day: 'Sun', target: 4, achieved: 3.8 } - ]; - - return ( - <div className="p-6 space-y-6"> - {/* Header */} - <div className="flex items-center justify-between"> - <div> - <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Study Analytics</h1> - <p className="text-gray-600 dark:text-gray-400 mt-1"> - Track your learning progress and performance insights - </p> - </div> - <div className="flex items-center gap-2 text-sm text-blue-600 dark:text-blue-400"> - <Brain className="w-4 h-4" /> - <span>AI-Powered Insights</span> - </div> - </div> - - {/* Key Metrics */} - <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> - <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700"> - <div className="flex items-center justify-between mb-4"> - <div className="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center"> - <Clock className="w-6 h-6 text-blue-600 dark:text-blue-400" /> - </div> - <div className="flex items-center text-green-500"> - <TrendingUp className="w-4 h-4 mr-1" /> - <span className="text-sm">+12%</span> - </div> - </div> - <h3 className="text-2xl font-bold text-gray-900 dark:text-white">23.8h</h3> - <p className="text-gray-600 dark:text-gray-400">Weekly Study Time</p> - </div> - - <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700"> - <div className="flex items-center justify-between mb-4"> - <div className="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center"> - <Target className="w-6 h-6 text-green-600 dark:text-green-400" /> - </div> - <div className="flex items-center text-green-500"> - <TrendingUp className="w-4 h-4 mr-1" /> - <span className="text-sm">+5%</span> - </div> - </div> - <h3 className="text-2xl font-bold text-gray-900 dark:text-white">88.5%</h3> - <p className="text-gray-600 dark:text-gray-400">Average Accuracy</p> - </div> - - <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700"> - <div className="flex items-center justify-between mb-4"> - <div className="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center"> - <Zap className="w-6 h-6 text-purple-600 dark:text-purple-400" /> - </div> - <div className="flex items-center text-red-500"> - <TrendingDown className="w-4 h-4 mr-1" /> - <span className="text-sm">-2%</span> - </div> - </div> - <h3 className="text-2xl font-bold text-gray-900 dark:text-white">342</h3> - <p className="text-gray-600 dark:text-gray-400">Cards Reviewed</p> - </div> - - <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700"> - <div className="flex items-center justify-between mb-4"> - <div className="w-12 h-12 bg-orange-100 dark:bg-orange-900 rounded-lg flex items-center justify-center"> - <Award className="w-6 h-6 text-orange-600 dark:text-orange-400" /> - </div> - <div className="flex items-center text-green-500"> - <TrendingUp className="w-4 h-4 mr-1" /> - <span className="text-sm">+1</span> - </div> - </div> - <h3 className="text-2xl font-bold text-gray-900 dark:text-white">15</h3> - <p className="text-gray-600 dark:text-gray-400">Day Streak</p> - </div> - </div> - - {/* Charts Row 1 */} - <div className="grid grid-cols-1 lg:grid-cols-2 gap-6"> - {/* Study Progress Chart */} - <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700"> - <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Study Progress Over Time</h3> - <ResponsiveContainer width="100%" height={300}> - <AreaChart data={studyProgressData}> - <CartesianGrid strokeDasharray="3 3" stroke="#374151" /> - <XAxis dataKey="date" stroke="#6B7280" /> - <YAxis stroke="#6B7280" /> - <Tooltip - contentStyle={{ - backgroundColor: '#1F2937', - border: 'none', - borderRadius: '8px', - color: '#fff' - }} - /> - <Area - type="monotone" - dataKey="hours" - stroke="#3B82F6" - fill="url(#colorHours)" - strokeWidth={2} - /> - <defs> - <linearGradient id="colorHours" x1="0" y1="0" x2="0" y2="1"> - <stop offset="5%" stopColor="#3B82F6" stopOpacity={0.3}/> - <stop offset="95%" stopColor="#3B82F6" stopOpacity={0}/> - </linearGradient> - </defs> - </AreaChart> - </ResponsiveContainer> - </div> - - {/* Subject Performance */} - <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700"> - <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Subject Performance</h3> - <ResponsiveContainer width="100%" height={300}> - <BarChart data={subjectPerformance}> - <CartesianGrid strokeDasharray="3 3" stroke="#374151" /> - <XAxis dataKey="subject" stroke="#6B7280" /> - <YAxis stroke="#6B7280" /> - <Tooltip - contentStyle={{ - backgroundColor: '#1F2937', - border: 'none', - borderRadius: '8px', - color: '#fff' - }} - /> - <Bar dataKey="accuracy" fill="#10B981" radius={[4, 4, 0, 0]} /> - </BarChart> - </ResponsiveContainer> - </div> - </div> - - {/* Charts Row 2 */} - <div className="grid grid-cols-1 lg:grid-cols-3 gap-6"> - {/* Study Methods Distribution */} - <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700"> - <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Study Methods</h3> - <ResponsiveContainer width="100%" height={250}> - <PieChart> - <Pie - data={studyMethodData} - cx="50%" - cy="50%" - innerRadius={60} - outerRadius={90} - paddingAngle={5} - dataKey="value" - > - {studyMethodData.map((entry, index) => ( - <Cell key={`cell-${index}`} fill={entry.color} /> - ))} - </Pie> - <Tooltip /> - </PieChart> - </ResponsiveContainer> - <div className="grid grid-cols-2 gap-2 mt-4"> - {studyMethodData.map((method, index) => ( - <div key={index} className="flex items-center gap-2"> - <div - className="w-3 h-3 rounded-full" - style={{ backgroundColor: method.color }} - /> - <span className="text-sm text-gray-600 dark:text-gray-400"> - {method.method} - </span> - </div> - ))} - </div> - </div> - - {/* Skills Radar */} - <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700"> - <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Skills Assessment</h3> - <ResponsiveContainer width="100%" height={250}> - <RadarChart data={skillRadarData}> - <PolarGrid /> - <PolarAngleAxis dataKey="skill" /> - <PolarRadiusAxis angle={30} domain={[0, 100]} /> - <Radar - name="Current" - dataKey="current" - stroke="#3B82F6" - fill="#3B82F6" - fillOpacity={0.3} - /> - <Radar - name="Target" - dataKey="target" - stroke="#10B981" - fill="#10B981" - fillOpacity={0.1} - /> - <Tooltip /> - </RadarChart> - </ResponsiveContainer> - </div> - - {/* Weekly Goals */} - <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700"> - <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Weekly Goals</h3> - <ResponsiveContainer width="100%" height={250}> - <BarChart data={weeklyGoals}> - <CartesianGrid strokeDasharray="3 3" stroke="#374151" /> - <XAxis dataKey="day" stroke="#6B7280" /> - <YAxis stroke="#6B7280" /> - <Tooltip - contentStyle={{ - backgroundColor: '#1F2937', - border: 'none', - borderRadius: '8px', - color: '#fff' - }} - /> - <Bar dataKey="target" fill="#8B5CF6" radius={[4, 4, 0, 0]} /> - <Bar dataKey="achieved" fill="#10B981" radius={[4, 4, 0, 0]} /> - </BarChart> - </ResponsiveContainer> - </div> - </div> - - {/* Insights & Recommendations */} - <div className="bg-gradient-to-r from-blue-500 to-purple-600 rounded-xl p-6 text-white"> - <h3 className="text-lg font-semibold mb-4 flex items-center gap-2"> - <Brain className="w-5 h-5" /> - AI-Powered Insights - </h3> - <div className="grid grid-cols-1 md:grid-cols-3 gap-4"> - <div className="bg-white/10 rounded-lg p-4"> - <h4 className="font-medium mb-2">Peak Performance</h4> - <p className="text-sm text-blue-100"> - Your best study hours are 2-4 PM with 93% efficiency. Consider scheduling challenging topics during this time. - </p> - </div> - <div className="bg-white/10 rounded-lg p-4"> - <h4 className="font-medium mb-2">Improvement Area</h4> - <p className="text-sm text-blue-100"> - Mathematics needs attention. Your accuracy dropped 8% this week. Recommend more practice sessions. - </p> - </div> - <div className="bg-white/10 rounded-lg p-4"> - <h4 className="font-medium mb-2">Study Method</h4> - <p className="text-sm text-blue-100"> - Flashcards show highest retention (94%). Consider increasing flashcard usage for difficult concepts. - </p> - </div> - </div> - </div> - - {/* Detailed Statistics */} - <div className="grid grid-cols-1 md:grid-cols-2 gap-6"> - {/* Learning Velocity */} - <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700"> - <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Learning Velocity</h3> - <div className="space-y-4"> - {subjectPerformance.map((subject, index) => ( - <div key={index}> - <div className="flex justify-between items-center mb-2"> - <span className="text-sm font-medium text-gray-900 dark:text-white">{subject.subject}</span> - <span className="text-sm text-gray-600 dark:text-gray-400">{subject.completed}%</span> - </div> - <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2"> - <div - className="bg-gradient-to-r from-blue-500 to-purple-600 h-2 rounded-full transition-all duration-300" - style={{ width: `${subject.completed}%` }} - /> - </div> - </div> - ))} - </div> - </div> - - {/* Study Streaks */} - <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700"> - <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Achievement Timeline</h3> - <div className="space-y-4"> - <div className="flex items-center gap-3"> - <div className="w-8 h-8 bg-yellow-100 dark:bg-yellow-900 rounded-full flex items-center justify-center"> - <Award className="w-4 h-4 text-yellow-600 dark:text-yellow-400" /> - </div> - <div> - <p className="font-medium text-gray-900 dark:text-white">15-Day Study Streak</p> - <p className="text-sm text-gray-600 dark:text-gray-400">Achieved today</p> - </div> - </div> - <div className="flex items-center gap-3"> - <div className="w-8 h-8 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center"> - <Target className="w-4 h-4 text-green-600 dark:text-green-400" /> - </div> - <div> - <p className="font-medium text-gray-900 dark:text-white">90% Quiz Master</p> - <p className="text-sm text-gray-600 dark:text-gray-400">2 days ago</p> - </div> - </div> - <div className="flex items-center gap-3"> - <div className="w-8 h-8 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center"> - <BookOpen className="w-4 h-4 text-blue-600 dark:text-blue-400" /> - </div> - <div> - <p className="font-medium text-gray-900 dark:text-white">1000 Cards Reviewed</p> - <p className="text-sm text-gray-600 dark:text-gray-400">1 week ago</p> - </div> - </div> - </div> - </div> - </div> - </div> - ); -}; - -export default Analytics; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | import React from 'react'; -import { LineChart, Line, AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, BarChart, Bar } from 'recharts'; -import { TrendingUp, Award, Clock, Brain, BookOpen, Target, Flame, Calendar } from 'lucide-react'; -import { studyProgressData, quizResultsData } from '../data/sampleData'; - -const Dashboard: React.FC = () => { - // Prepare chart data - const chartData = quizResultsData.map(result => ({ - date: result.date.slice(0, 5), // Show only day-month - score: result.score, - time: result.timeTaken - })); - - const subjectData = studyProgressData.subjects.map(subject => ({ - name: subject.name, - progress: subject.progress - })); - - return ( - <div className="p-4 lg:p-6 space-y-4 lg:space-y-6"> - {/* Welcome Section */} - <div className="bg-gradient-to-r from-blue-500 to-purple-600 rounded-xl p-4 lg:p-6 text-white flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4"> - <div className="flex-1"> - <h1 className="text-xl lg:text-2xl font-bold mb-2">Welcome back, {studyProgressData.user.name}! 🎉</h1> - <p className="text-blue-100 text-sm lg:text-base">Ready to continue your learning journey? You're doing amazing!</p> - </div> - <img - src="/white_circle_360x360.png" - alt="Bolt Logo" - className="w-20 h-20 lg:w-[120px] lg:h-[120px] flex-shrink-0 self-center lg:self-auto" - /> - </div> - - {/* Stats Grid */} - <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 lg:gap-6"> - <div className="bg-white dark:bg-gray-800 rounded-xl p-4 lg:p-6 border border-gray-200 dark:border-gray-700"> - <div className="flex items-center justify-between mb-3 lg:mb-4"> - <div className="w-10 h-10 lg:w-12 lg:h-12 bg-orange-100 dark:bg-orange-900 rounded-lg flex items-center justify-center"> - <Flame className="w-5 h-5 lg:w-6 lg:h-6 text-orange-600 dark:text-orange-400" /> - </div> - <TrendingUp className="w-4 h-4 lg:w-5 lg:h-5 text-green-500" /> - </div> - <h3 className="text-xl lg:text-2xl font-bold text-gray-900 dark:text-white">{studyProgressData.user.studyStreak}</h3> - <p className="text-gray-600 dark:text-gray-400 text-xs lg:text-sm">Day Study Streak</p> - </div> - - <div className="bg-white dark:bg-gray-800 rounded-xl p-4 lg:p-6 border border-gray-200 dark:border-gray-700"> - <div className="flex items-center justify-between mb-3 lg:mb-4"> - <div className="w-10 h-10 lg:w-12 lg:h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center"> - <Clock className="w-5 h-5 lg:w-6 lg:h-6 text-blue-600 dark:text-blue-400" /> - </div> - <TrendingUp className="w-4 h-4 lg:w-5 lg:h-5 text-green-500" /> - </div> - <h3 className="text-xl lg:text-2xl font-bold text-gray-900 dark:text-white">{studyProgressData.user.totalStudyHours}h</h3> - <p className="text-gray-600 dark:text-gray-400 text-xs lg:text-sm">Total Study Time</p> - </div> - - <div className="bg-white dark:bg-gray-800 rounded-xl p-4 lg:p-6 border border-gray-200 dark:border-gray-700"> - <div className="flex items-center justify-between mb-3 lg:mb-4"> - <div className="w-10 h-10 lg:w-12 lg:h-12 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center"> - <Target className="w-5 h-5 lg:w-6 lg:h-6 text-green-600 dark:text-green-400" /> - </div> - <TrendingUp className="w-4 h-4 lg:w-5 lg:h-5 text-green-500" /> - </div> - <h3 className="text-xl lg:text-2xl font-bold text-gray-900 dark:text-white">{studyProgressData.user.averageScore}%</h3> - <p className="text-gray-600 dark:text-gray-400 text-xs lg:text-sm">Average Score</p> - </div> - - <div className="bg-white dark:bg-gray-800 rounded-xl p-4 lg:p-6 border border-gray-200 dark:border-gray-700"> - <div className="flex items-center justify-between mb-3 lg:mb-4"> - <div className="w-10 h-10 lg:w-12 lg:h-12 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center"> - <Brain className="w-5 h-5 lg:w-6 lg:h-6 text-purple-600 dark:text-purple-400" /> - </div> - <TrendingUp className="w-4 h-4 lg:w-5 lg:h-5 text-green-500" /> - </div> - <h3 className="text-xl lg:text-2xl font-bold text-gray-900 dark:text-white">{studyProgressData.user.cardsReviewed}</h3> - <p className="text-gray-600 dark:text-gray-400 text-xs lg:text-sm">Cards Reviewed</p> - </div> - </div> - - {/* Charts Section */} - <div className="grid grid-cols-1 xl:grid-cols-2 gap-4 lg:gap-6"> - {/* Performance Chart */} - <div className="bg-white dark:bg-gray-800 rounded-xl p-4 lg:p-6 border border-gray-200 dark:border-gray-700"> - <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Quiz Performance</h3> - <ResponsiveContainer width="100%" height={250} className="lg:h-[300px]"> - <AreaChart data={chartData}> - <CartesianGrid strokeDasharray="3 3" stroke="#374151" /> - <XAxis dataKey="date" stroke="#6B7280" fontSize={12} /> - <YAxis stroke="#6B7280" fontSize={12} /> - <Tooltip - contentStyle={{ - backgroundColor: '#1F2937', - border: 'none', - borderRadius: '8px', - color: '#fff', - fontSize: '14px' - }} - /> - <Area - type="monotone" - dataKey="score" - stroke="#3B82F6" - fill="url(#colorScore)" - strokeWidth={2} - /> - <defs> - <linearGradient id="colorScore" x1="0" y1="0" x2="0" y2="1"> - <stop offset="5%" stopColor="#3B82F6" stopOpacity={0.3}/> - <stop offset="95%" stopColor="#3B82F6" stopOpacity={0}/> - </linearGradient> - </defs> - </AreaChart> - </ResponsiveContainer> - </div> - - {/* Subject Progress */} - <div className="bg-white dark:bg-gray-800 rounded-xl p-4 lg:p-6 border border-gray-200 dark:border-gray-700"> - <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Subject Progress</h3> - <ResponsiveContainer width="100%" height={250} className="lg:h-[300px]"> - <BarChart data={subjectData}> - <CartesianGrid strokeDasharray="3 3" stroke="#374151" /> - <XAxis dataKey="name" stroke="#6B7280" fontSize={12} /> - <YAxis stroke="#6B7280" fontSize={12} /> - <Tooltip - contentStyle={{ - backgroundColor: '#1F2937', - border: 'none', - borderRadius: '8px', - color: '#fff', - fontSize: '14px' - }} - /> - <Bar dataKey="progress" fill="#10B981" radius={[4, 4, 0, 0]} /> - </BarChart> - </ResponsiveContainer> - </div> - </div> - - {/* Recent Activity & Upcoming */} - <div className="grid grid-cols-1 xl:grid-cols-2 gap-4 lg:gap-6"> - {/* Recent Activity */} - <div className="bg-white dark:bg-gray-800 rounded-xl p-4 lg:p-6 border border-gray-200 dark:border-gray-700"> - <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Recent Activity</h3> - <div className="space-y-3 lg:space-y-4"> - {quizResultsData.slice(0, 3).map((result, index) => ( - <div key={index} className="flex items-center gap-3 lg:gap-4"> - <div className="w-8 h-8 lg:w-10 lg:h-10 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center flex-shrink-0"> - <BookOpen className="w-4 h-4 lg:w-5 lg:h-5 text-blue-600 dark:text-blue-400" /> - </div> - <div className="flex-1 min-w-0"> - <p className="font-medium text-gray-900 dark:text-white text-sm lg:text-base truncate">{result.subject} Quiz</p> - <p className="text-xs lg:text-sm text-gray-600 dark:text-gray-400">Score: {result.score}% • {result.date}</p> - </div> - <div className="text-right flex-shrink-0"> - <div className="text-base lg:text-lg font-semibold text-green-600">{result.score}%</div> - </div> - </div> - ))} - </div> - </div> - - {/* Achievements */} - <div className="bg-white dark:bg-gray-800 rounded-xl p-4 lg:p-6 border border-gray-200 dark:border-gray-700"> - <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Achievements</h3> - <div className="space-y-3 lg:space-y-4"> - {studyProgressData.achievements.map((achievement, index) => ( - <div key={index} className="flex items-center gap-3 lg:gap-4"> - <div className={`w-8 h-8 lg:w-10 lg:h-10 rounded-lg flex items-center justify-center flex-shrink-0 ${ - achievement.unlocked - ? 'bg-yellow-100 dark:bg-yellow-900' - : 'bg-gray-100 dark:bg-gray-700' - }`}> - <Award className={`w-4 h-4 lg:w-5 lg:h-5 ${ - achievement.unlocked - ? 'text-yellow-600 dark:text-yellow-400' - : 'text-gray-400' - }`} /> - </div> - <div className="flex-1 min-w-0"> - <p className={`font-medium text-sm lg:text-base truncate ${ - achievement.unlocked - ? 'text-gray-900 dark:text-white' - : 'text-gray-500 dark:text-gray-400' - }`}> - {achievement.name} - </p> - <p className="text-xs lg:text-sm text-gray-600 dark:text-gray-400"> - {achievement.unlocked ? 'Unlocked!' : 'Keep studying to unlock'} - </p> - </div> - </div> - ))} - </div> - </div> - </div> - </div> - ); -}; - -export default Dashboard; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | import React, { useCallback, useState } from 'react'; -import { useDropzone } from 'react-dropzone'; -import { Upload, FileText, Image, Film, Music, X, Sparkles } from 'lucide-react'; -import { motion, AnimatePresence } from 'framer-motion'; - -interface UploadedFile { - id: string; - name: string; - size: number; - type: string; - url?: string; -} - -const FileUpload: React.FC = () => { - const [uploadedFiles, setUploadedFiles] = useState<UploadedFile[]>([]); - const [isProcessing, setIsProcessing] = useState(false); - - const onDrop = useCallback((acceptedFiles: File[]) => { - setIsProcessing(true); - - // Simulate file processing - setTimeout(() => { - const newFiles: UploadedFile[] = acceptedFiles.map(file => ({ - id: Math.random().toString(36).substr(2, 9), - name: file.name, - size: file.size, - type: file.type, - url: URL.createObjectURL(file) - })); - - setUploadedFiles(prev => [...prev, ...newFiles]); - setIsProcessing(false); - }, 2000); - }, []); - - const { getRootProps, getInputProps, isDragActive } = useDropzone({ - onDrop, - accept: { - 'application/pdf': ['.pdf'], - 'text/plain': ['.txt'], - 'application/msword': ['.doc'], - 'application/vnd.openxmlformats-officedocument.wordprocessingml.document': ['.docx'], - 'image/*': ['.png', '.jpg', '.jpeg', '.gif'], - 'video/*': ['.mp4', '.mov', '.avi'], - 'audio/*': ['.mp3', '.wav', '.aac'] - } - }); - - const removeFile = (id: string) => { - setUploadedFiles(prev => prev.filter(file => file.id !== id)); - }; - - const getFileIcon = (type: string) => { - if (type.startsWith('image/')) return <Image className="w-6 h-6" />; - if (type.startsWith('video/')) return <Film className="w-6 h-6" />; - if (type.startsWith('audio/')) return <Music className="w-6 h-6" />; - return <FileText className="w-6 h-6" />; - }; - - const formatFileSize = (bytes: number) => { - if (bytes === 0) return '0 Bytes'; - const k = 1024; - const sizes = ['Bytes', 'KB', 'MB', 'GB']; - const i = Math.floor(Math.log(bytes) / Math.log(k)); - return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]; - }; - - return ( - <div className="p-6 space-y-6"> - <div className="flex items-center justify-between"> - <div> - <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Upload Study Materials</h1> - <p className="text-gray-600 dark:text-gray-400 mt-1"> - Upload PDFs, documents, images, or other study materials for AI processing - </p> - </div> - <div className="flex items-center gap-2 text-sm text-blue-600 dark:text-blue-400"> - <Sparkles className="w-4 h-4" /> - <span>AI-Powered Processing</span> - </div> - </div> - - {/* Upload Zone */} - <motion.div - {...getRootProps()} - className={`border-2 border-dashed rounded-xl p-12 text-center cursor-pointer transition-all duration-300 ${ - isDragActive - ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20' - : 'border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500' - }`} - whileHover={{ scale: 1.02 }} - whileTap={{ scale: 0.98 }} - > - <input {...getInputProps()} /> - <motion.div - initial={{ opacity: 0, y: 20 }} - animate={{ opacity: 1, y: 0 }} - className="space-y-4" - > - <div className="w-16 h-16 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mx-auto"> - <Upload className="w-8 h-8 text-blue-600 dark:text-blue-400" /> - </div> - <div> - <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2"> - {isDragActive ? 'Drop files here...' : 'Upload your study materials'} - </h3> - <p className="text-gray-600 dark:text-gray-400"> - Drag & drop files here, or click to browse - </p> - <p className="text-sm text-gray-500 dark:text-gray-500 mt-2"> - Supports PDF, DOC, TXT, images, videos, and audio files - </p> - </div> - </motion.div> - </motion.div> - - {/* Processing Indicator */} - <AnimatePresence> - {isProcessing && ( - <motion.div - initial={{ opacity: 0, height: 0 }} - animate={{ opacity: 1, height: 'auto' }} - exit={{ opacity: 0, height: 0 }} - className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-700 rounded-xl p-4" - > - <div className="flex items-center gap-3"> - <div className="animate-spin w-5 h-5 border-2 border-blue-500 border-t-transparent rounded-full"></div> - <div> - <p className="font-medium text-blue-900 dark:text-blue-100">Processing files with AI...</p> - <p className="text-sm text-blue-700 dark:text-blue-300"> - Extracting content and generating flashcards automatically - </p> - </div> - </div> - </motion.div> - )} - </AnimatePresence> - - {/* Uploaded Files */} - {uploadedFiles.length > 0 && ( - <div className="space-y-4"> - <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Uploaded Files</h3> - <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> - {uploadedFiles.map((file) => ( - <motion.div - key={file.id} - initial={{ opacity: 0, scale: 0.9 }} - animate={{ opacity: 1, scale: 1 }} - className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-4" - > - <div className="flex items-start justify-between mb-3"> - <div className="w-12 h-12 bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center text-gray-600 dark:text-gray-400"> - {getFileIcon(file.type)} - </div> - <button - onClick={() => removeFile(file.id)} - className="text-gray-400 hover:text-red-500 transition-colors" - > - <X className="w-4 h-4" /> - </button> - </div> - <h4 className="font-medium text-gray-900 dark:text-white truncate">{file.name}</h4> - <p className="text-sm text-gray-600 dark:text-gray-400">{formatFileSize(file.size)}</p> - <div className="mt-3 flex gap-2"> - <button className="flex-1 bg-blue-500 text-white text-sm py-2 px-3 rounded-lg hover:bg-blue-600 transition-colors"> - Generate Cards - </button> - <button className="flex-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm py-2 px-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"> - View - </button> - </div> - </motion.div> - ))} - </div> - </div> - )} - - {/* AI Features */} - <div className="bg-gradient-to-r from-purple-500 to-pink-500 rounded-xl p-6 text-white"> - <h3 className="text-lg font-semibold mb-2">AI-Powered Study Enhancement</h3> - <p className="text-purple-100 mb-4"> - Our advanced AI automatically processes your uploaded materials to create: - </p> - <div className="grid grid-cols-1 md:grid-cols-3 gap-4"> - <div className="bg-white/10 rounded-lg p-3"> - <h4 className="font-medium mb-1">Smart Flashcards</h4> - <p className="text-sm text-purple-100">Auto-generated from key concepts</p> - </div> - <div className="bg-white/10 rounded-lg p-3"> - <h4 className="font-medium mb-1">Practice Quizzes</h4> - <p className="text-sm text-purple-100">Customized to your learning level</p> - </div> - <div className="bg-white/10 rounded-lg p-3"> - <h4 className="font-medium mb-1">Study Summaries</h4> - <p className="text-sm text-purple-100">Concise overviews of main topics</p> - </div> - </div> - </div> - </div> - ); -}; - -export default FileUpload; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 -210 -211 -212 -213 -214 -215 -216 -217 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | import React, { useState } from 'react'; -import { RotateCcw, ChevronLeft, ChevronRight, Brain, Shuffle, Play, BookOpen } from 'lucide-react'; -import { motion, AnimatePresence } from 'framer-motion'; -import { flashcardsData } from '../data/sampleData'; - -interface Card { - front: string; - back: string; -} - -const Flashcards: React.FC = () => { - const [selectedSubject, setSelectedSubject] = useState(flashcardsData.decks[0].subject); - const [currentCardIndex, setCurrentCardIndex] = useState(0); - const [isFlipped, setIsFlipped] = useState(false); - const [studyMode, setStudyMode] = useState<'review' | 'spaced'>('review'); - - const currentDeck = flashcardsData.decks.find(deck => deck.subject === selectedSubject); - const currentCard = currentDeck?.cards[currentCardIndex]; - - const nextCard = () => { - if (currentDeck && currentCardIndex < currentDeck.cards.length - 1) { - setCurrentCardIndex(prev => prev + 1); - setIsFlipped(false); - } - }; - - const prevCard = () => { - if (currentCardIndex > 0) { - setCurrentCardIndex(prev => prev - 1); - setIsFlipped(false); - } - }; - - const shuffleCards = () => { - setCurrentCardIndex(0); - setIsFlipped(false); - // In a real app, you'd shuffle the deck array - }; - - const resetProgress = () => { - setCurrentCardIndex(0); - setIsFlipped(false); - }; - - return ( - <div className="p-6 space-y-6"> - {/* Header */} - <div className="flex flex-col md:flex-row md:items-center justify-between gap-4"> - <div> - <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Flashcards</h1> - <p className="text-gray-600 dark:text-gray-400">Review and master your study materials</p> - </div> - - <div className="flex items-center gap-3"> - <select - value={studyMode} - onChange={(e) => setStudyMode(e.target.value as 'review' | 'spaced')} - className="px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white" - > - <option value="review">Review Mode</option> - <option value="spaced">Spaced Repetition</option> - </select> - - <button - onClick={shuffleCards} - className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors flex items-center gap-2" - > - <Shuffle className="w-4 h-4" /> - Shuffle - </button> - </div> - </div> - - {/* Subject Tabs */} - <div className="flex flex-wrap gap-2"> - {flashcardsData.decks.map((deck) => ( - <button - key={deck.subject} - onClick={() => { - setSelectedSubject(deck.subject); - setCurrentCardIndex(0); - setIsFlipped(false); - }} - className={`px-4 py-2 rounded-lg font-medium transition-colors ${ - selectedSubject === deck.subject - ? 'bg-blue-500 text-white' - : 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700' - }`} - > - {deck.subject} - <span className="ml-2 text-sm opacity-75">({deck.cards.length})</span> - </button> - ))} - </div> - - {/* Progress */} - <div className="bg-white dark:bg-gray-800 rounded-xl p-4 border border-gray-200 dark:border-gray-700"> - <div className="flex items-center justify-between mb-2"> - <span className="text-sm font-medium text-gray-700 dark:text-gray-300"> - Card {currentCardIndex + 1} of {currentDeck?.cards.length} - </span> - <span className="text-sm text-gray-600 dark:text-gray-400"> - {Math.round(((currentCardIndex + 1) / (currentDeck?.cards.length || 1)) * 100)}% Complete - </span> - </div> - <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2"> - <div - className="bg-blue-500 h-2 rounded-full transition-all duration-300" - style={{ - width: `${((currentCardIndex + 1) / (currentDeck?.cards.length || 1)) * 100}%` - }} - /> - </div> - </div> - - {/* Flashcard */} - <div className="flex justify-center"> - <div className="w-full max-w-2xl"> - <motion.div - className="relative h-80 perspective-1000" - style={{ perspective: '1000px' }} - > - <motion.div - className="relative w-full h-full cursor-pointer" - onClick={() => setIsFlipped(!isFlipped)} - animate={{ rotateY: isFlipped ? 180 : 0 }} - transition={{ duration: 0.6, type: "spring" }} - style={{ transformStyle: 'preserve-3d' }} - > - {/* Front of card */} - <div - className="absolute inset-0 w-full h-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-lg flex items-center justify-center p-8" - style={{ backfaceVisibility: 'hidden' }} - > - <div className="text-center"> - <BookOpen className="w-8 h-8 text-blue-500 mx-auto mb-4" /> - <p className="text-lg font-medium text-gray-900 dark:text-white"> - {currentCard?.front} - </p> - <p className="text-sm text-gray-500 dark:text-gray-400 mt-4"> - Click to reveal answer - </p> - </div> - </div> - - {/* Back of card */} - <div - className="absolute inset-0 w-full h-full bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl shadow-lg flex items-center justify-center p-8" - style={{ - backfaceVisibility: 'hidden', - transform: 'rotateY(180deg)' - }} - > - <div className="text-center text-white"> - <Brain className="w-8 h-8 mx-auto mb-4" /> - <p className="text-lg font-medium"> - {currentCard?.back} - </p> - <p className="text-sm text-blue-100 mt-4"> - Click to return to question - </p> - </div> - </div> - </motion.div> - </motion.div> - </div> - </div> - - {/* Controls */} - <div className="flex items-center justify-center gap-4"> - <button - onClick={prevCard} - disabled={currentCardIndex === 0} - className="p-3 bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors" - > - <ChevronLeft className="w-6 h-6" /> - </button> - - <button - onClick={resetProgress} - className="p-3 bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors" - > - <RotateCcw className="w-6 h-6" /> - </button> - - <button - onClick={nextCard} - disabled={!currentDeck || currentCardIndex === currentDeck.cards.length - 1} - className="p-3 bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors" - > - <ChevronRight className="w-6 h-6" /> - </button> - </div> - - {/* Study Tips */} - <div className="bg-gradient-to-r from-green-500 to-blue-500 rounded-xl p-6 text-white"> - <h3 className="text-lg font-semibold mb-2">Study Tips</h3> - <div className="grid grid-cols-1 md:grid-cols-3 gap-4"> - <div> - <h4 className="font-medium mb-1">Active Recall</h4> - <p className="text-sm text-green-100">Try to answer before flipping the card</p> - </div> - <div> - <h4 className="font-medium mb-1">Spaced Repetition</h4> - <p className="text-sm text-green-100">Review cards at increasing intervals</p> - </div> - <div> - <h4 className="font-medium mb-1">Mark Difficulty</h4> - <p className="text-sm text-green-100">Focus more time on challenging cards</p> - </div> - </div> - </div> - </div> - ); -}; - -export default Flashcards; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | import React from 'react'; -import { Search, Bell, Moon, Sun, MessageCircle, Menu } from 'lucide-react'; -import { useTheme } from '../contexts/ThemeContext'; -import { studyProgressData } from '../data/sampleData'; - -interface HeaderProps { - showAIChat: boolean; - setShowAIChat: (show: boolean) => void; - onMenuClick?: () => void; -} - -const Header: React.FC<HeaderProps> = ({ showAIChat, setShowAIChat, onMenuClick }) => { - const { isDark, toggleTheme } = useTheme(); - - return ( - <header className="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 px-4 lg:px-6 py-4"> - <div className="flex items-center justify-between"> - {/* Mobile Menu Button */} - <button - onClick={onMenuClick} - className="lg:hidden p-2 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg touch-manipulation" - > - <Menu className="w-5 h-5" /> - </button> - - {/* Search */} - <div className="flex-1 max-w-md mx-4 lg:mx-0"> - <div className="relative"> - <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" /> - <input - type="text" - placeholder="Search materials, notes, or ask AI..." - className="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-500 focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm lg:text-base" - /> - </div> - </div> - - {/* Right side */} - <div className="flex items-center gap-2 lg:gap-4"> - {/* AI Chat Toggle */} - <button - onClick={() => setShowAIChat(!showAIChat)} - className={`p-2 rounded-lg transition-colors touch-manipulation ${ - showAIChat - ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400' - : 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800' - }`} - > - <MessageCircle className="w-5 h-5" /> - </button> - - {/* Notifications */} - <button className="relative p-2 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg touch-manipulation"> - <Bell className="w-5 h-5" /> - <div className="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></div> - </button> - - {/* Theme Toggle */} - <button - onClick={toggleTheme} - className="p-2 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg touch-manipulation" - > - {isDark ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />} - </button> - - {/* User Profile */} - <div className="flex items-center gap-2 lg:gap-3"> - <div className="text-right hidden sm:block"> - <div className="text-sm font-medium text-gray-900 dark:text-white"> - {studyProgressData.user.name} - </div> - <div className="text-xs text-gray-500 dark:text-gray-400"> - Level {studyProgressData.user.level} • {studyProgressData.user.xpPoints} XP - </div> - </div> - <div className="w-8 h-8 lg:w-10 lg:h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-white font-medium text-sm lg:text-base"> - {studyProgressData.user.name.split(' ').map(n => n[0]).join('')} - </div> - </div> - </div> - </div> - </header> - ); -}; - -export default Header; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 -210 -211 -212 -213 -214 -215 -216 -217 -218 -219 -220 -221 -222 -223 -224 -225 -226 -227 -228 -229 -230 -231 -232 -233 -234 -235 -236 -237 -238 -239 -240 -241 -242 -243 -244 -245 -246 -247 -248 -249 -250 -251 -252 -253 -254 -255 -256 -257 -258 -259 -260 -261 -262 -263 -264 -265 -266 -267 -268 -269 -270 -271 -272 -273 -274 -275 -276 -277 -278 -279 -280 -281 -282 -283 -284 -285 -286 -287 -288 -289 -290 -291 -292 -293 -294 -295 -296 -297 -298 -299 -300 -301 -302 -303 -304 -305 -306 -307 -308 -309 -310 -311 -312 -313 -314 -315 -316 -317 -318 -319 -320 -321 -322 -323 -324 -325 -326 -327 -328 -329 -330 -331 -332 -333 -334 -335 -336 -337 -338 -339 -340 -341 -342 -343 -344 -345 -346 -347 -348 -349 -350 -351 -352 -353 -354 -355 -356 -357 -358 -359 -360 -361 -362 -363 -364 -365 -366 -367 -368 -369 -370 -371 -372 -373 -374 -375 -376 -377 -378 -379 -380 -381 -382 -383 -384 -385 -386 -387 -388 -389 -390 -391 -392 -393 -394 -395 -396 -397 -398 -399 -400 -401 -402 -403 -404 -405 -406 -407 -408 -409 -410 -411 -412 -413 -414 -415 -416 -417 -418 -419 -420 -421 -422 -423 -424 -425 -426 -427 -428 -429 -430 -431 -432 -433 -434 -435 -436 -437 -438 -439 -440 -441 -442 -443 -444 -445 -446 -447 -448 -449 -450 -451 -452 -453 -454 -455 -456 -457 -458 -459 -460 -461 -462 -463 -464 -465 -466 -467 -468 -469 -470 -471 -472 -473 -474 -475 -476 -477 -478 -479 -480 -481 -482 -483 -484 -485 -486 -487 -488 -489 -490 -491 -492 -493 -494 -495 -496 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | import React, { useState } from 'react'; -import { motion, AnimatePresence } from 'framer-motion'; -import { - FileText, - Image, - Film, - Music, - Download, - Eye, - Edit3, - Trash2, - Plus, - Search, - Filter, - Grid3X3, - List, - Calendar, - Tag, - Star, - MoreVertical, - Folder, - Upload -} from 'lucide-react'; - -interface Material { - id: string; - name: string; - type: 'pdf' | 'doc' | 'image' | 'video' | 'audio' | 'text'; - size: number; - uploadDate: string; - lastAccessed: string; - tags: string[]; - favorite: boolean; - progress?: number; - thumbnail?: string; - description?: string; - folder?: string; -} - -const Materials: React.FC = () => { - const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid'); - const [sortBy, setSortBy] = useState<'name' | 'date' | 'size' | 'type'>('date'); - const [filterType, setFilterType] = useState<'all' | 'pdf' | 'doc' | 'image' | 'video' | 'audio'>('all'); - const [searchQuery, setSearchQuery] = useState(''); - const [selectedFolder, setSelectedFolder] = useState<string>('all'); - - const materials: Material[] = [ - { - id: '1', - name: 'Psychology Study Guide', - type: 'pdf', - size: 2457600, // 2.4 MB - uploadDate: '2025-06-20', - lastAccessed: '2025-06-28', - tags: ['psychology', 'study-guide', 'cognitive'], - favorite: true, - progress: 75, - description: 'Comprehensive guide covering cognitive psychology fundamentals', - folder: 'Psychology' - }, - { - id: '2', - name: 'Biology Lecture Notes', - type: 'doc', - size: 1234567, - uploadDate: '2025-06-15', - lastAccessed: '2025-06-27', - tags: ['biology', 'notes', 'cellular'], - favorite: false, - progress: 60, - description: 'Detailed notes from cellular biology lectures', - folder: 'Biology' - }, - { - id: '3', - name: 'History Timeline Infographic', - type: 'image', - size: 987654, - uploadDate: '2025-06-18', - lastAccessed: '2025-06-26', - tags: ['history', 'timeline', 'visual'], - favorite: true, - description: 'Visual timeline of major historical events', - folder: 'History' - }, - { - id: '4', - name: 'Chemistry Lab Video', - type: 'video', - size: 15728640, // 15 MB - uploadDate: '2025-06-22', - lastAccessed: '2025-06-28', - tags: ['chemistry', 'lab', 'experiment'], - favorite: false, - progress: 30, - description: 'Laboratory demonstration of chemical reactions', - folder: 'Chemistry' - }, - { - id: '5', - name: 'Math Formula Sheet', - type: 'pdf', - size: 654321, - uploadDate: '2025-06-25', - lastAccessed: '2025-06-28', - tags: ['mathematics', 'formulas', 'reference'], - favorite: true, - description: 'Quick reference for important mathematical formulas', - folder: 'Mathematics' - }, - { - id: '6', - name: 'Physics Audio Lecture', - type: 'audio', - size: 8765432, - uploadDate: '2025-06-19', - lastAccessed: '2025-06-25', - tags: ['physics', 'lecture', 'quantum'], - favorite: false, - progress: 45, - description: 'Audio recording of quantum physics lecture', - folder: 'Physics' - } - ]; - - const folders = ['all', ...Array.from(new Set(materials.map(m => m.folder).filter(Boolean)))]; - - const getFileIcon = (type: string) => { - switch (type) { - case 'image': return <Image className="w-6 h-6" />; - case 'video': return <Film className="w-6 h-6" />; - case 'audio': return <Music className="w-6 h-6" />; - default: return <FileText className="w-6 h-6" />; - } - }; - - const getFileColor = (type: string) => { - switch (type) { - case 'pdf': return 'text-red-600 bg-red-100 dark:bg-red-900 dark:text-red-400'; - case 'doc': return 'text-blue-600 bg-blue-100 dark:bg-blue-900 dark:text-blue-400'; - case 'image': return 'text-green-600 bg-green-100 dark:bg-green-900 dark:text-green-400'; - case 'video': return 'text-purple-600 bg-purple-100 dark:bg-purple-900 dark:text-purple-400'; - case 'audio': return 'text-orange-600 bg-orange-100 dark:bg-orange-900 dark:text-orange-400'; - default: return 'text-gray-600 bg-gray-100 dark:bg-gray-700 dark:text-gray-400'; - } - }; - - const formatFileSize = (bytes: number) => { - if (bytes === 0) return '0 Bytes'; - const k = 1024; - const sizes = ['Bytes', 'KB', 'MB', 'GB']; - const i = Math.floor(Math.log(bytes) / Math.log(k)); - return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]; - }; - - const formatDate = (dateString: string) => { - return new Date(dateString).toLocaleDateString(); - }; - - const filteredMaterials = materials - .filter(material => { - if (filterType !== 'all' && material.type !== filterType) return false; - if (selectedFolder !== 'all' && material.folder !== selectedFolder) return false; - if (searchQuery && !material.name.toLowerCase().includes(searchQuery.toLowerCase()) && - !material.tags.some(tag => tag.toLowerCase().includes(searchQuery.toLowerCase()))) return false; - return true; - }) - .sort((a, b) => { - switch (sortBy) { - case 'name': return a.name.localeCompare(b.name); - case 'date': return new Date(b.uploadDate).getTime() - new Date(a.uploadDate).getTime(); - case 'size': return b.size - a.size; - case 'type': return a.type.localeCompare(b.type); - default: return 0; - } - }); - - return ( - <div className="p-6 space-y-6"> - {/* Header */} - <div className="flex items-center justify-between"> - <div> - <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Study Materials</h1> - <p className="text-gray-600 dark:text-gray-400 mt-1"> - Organize and access all your learning resources - </p> - </div> - <button className="bg-gradient-to-r from-blue-500 to-purple-600 text-white px-4 py-2 rounded-lg hover:from-blue-600 hover:to-purple-700 transition-all duration-200 flex items-center gap-2"> - <Upload className="w-4 h-4" /> - Upload Files - </button> - </div> - - {/* Search and Filters */} - <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700"> - <div className="flex flex-col lg:flex-row gap-4"> - {/* Search */} - <div className="flex-1"> - <div className="relative"> - <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" /> - <input - type="text" - placeholder="Search materials, tags, or descriptions..." - value={searchQuery} - onChange={(e) => setSearchQuery(e.target.value)} - className="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 focus:ring-2 focus:ring-blue-500 focus:border-transparent" - /> - </div> - </div> - - {/* Filters */} - <div className="flex gap-4"> - <select - value={selectedFolder} - onChange={(e) => setSelectedFolder(e.target.value)} - className="px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white" - > - {folders.map(folder => ( - <option key={folder} value={folder}> - {folder === 'all' ? 'All Folders' : folder} - </option> - ))} - </select> - - <select - value={filterType} - onChange={(e) => setFilterType(e.target.value as any)} - className="px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white" - > - <option value="all">All Types</option> - <option value="pdf">PDF</option> - <option value="doc">Documents</option> - <option value="image">Images</option> - <option value="video">Videos</option> - <option value="audio">Audio</option> - </select> - - <select - value={sortBy} - onChange={(e) => setSortBy(e.target.value as any)} - className="px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white" - > - <option value="date">Sort by Date</option> - <option value="name">Sort by Name</option> - <option value="size">Sort by Size</option> - <option value="type">Sort by Type</option> - </select> - - <div className="flex border border-gray-300 dark:border-gray-600 rounded-lg"> - <button - onClick={() => setViewMode('grid')} - className={`p-2 ${viewMode === 'grid' ? 'bg-blue-500 text-white' : 'text-gray-600 dark:text-gray-400'}`} - > - <Grid3X3 className="w-4 h-4" /> - </button> - <button - onClick={() => setViewMode('list')} - className={`p-2 ${viewMode === 'list' ? 'bg-blue-500 text-white' : 'text-gray-600 dark:text-gray-400'}`} - > - <List className="w-4 h-4" /> - </button> - </div> - </div> - </div> - </div> - - {/* Stats */} - <div className="grid grid-cols-1 md:grid-cols-4 gap-4"> - <div className="bg-white dark:bg-gray-800 rounded-xl p-4 border border-gray-200 dark:border-gray-700"> - <div className="text-2xl font-bold text-blue-600 dark:text-blue-400">{materials.length}</div> - <div className="text-sm text-gray-600 dark:text-gray-400">Total Files</div> - </div> - <div className="bg-white dark:bg-gray-800 rounded-xl p-4 border border-gray-200 dark:border-gray-700"> - <div className="text-2xl font-bold text-green-600 dark:text-green-400"> - {formatFileSize(materials.reduce((sum, m) => sum + m.size, 0))} - </div> - <div className="text-sm text-gray-600 dark:text-gray-400">Total Size</div> - </div> - <div className="bg-white dark:bg-gray-800 rounded-xl p-4 border border-gray-200 dark:border-gray-700"> - <div className="text-2xl font-bold text-purple-600 dark:text-purple-400"> - {materials.filter(m => m.favorite).length} - </div> - <div className="text-sm text-gray-600 dark:text-gray-400">Favorites</div> - </div> - <div className="bg-white dark:bg-gray-800 rounded-xl p-4 border border-gray-200 dark:border-gray-700"> - <div className="text-2xl font-bold text-orange-600 dark:text-orange-400"> - {folders.length - 1} - </div> - <div className="text-sm text-gray-600 dark:text-gray-400">Folders</div> - </div> - </div> - - {/* Materials Grid/List */} - <AnimatePresence mode="wait"> - {viewMode === 'grid' ? ( - <motion.div - key="grid" - initial={{ opacity: 0 }} - animate={{ opacity: 1 }} - exit={{ opacity: 0 }} - className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6" - > - {filteredMaterials.map((material, index) => ( - <motion.div - key={material.id} - initial={{ opacity: 0, y: 20 }} - animate={{ opacity: 1, y: 0 }} - transition={{ delay: index * 0.1 }} - className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700 hover:shadow-lg transition-all duration-200" - > - <div className="flex items-start justify-between mb-4"> - <div className={`w-12 h-12 rounded-lg flex items-center justify-center ${getFileColor(material.type)}`}> - {getFileIcon(material.type)} - </div> - <div className="flex items-center gap-2"> - {material.favorite && ( - <Star className="w-4 h-4 text-yellow-500 fill-current" /> - )} - <button className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"> - <MoreVertical className="w-4 h-4" /> - </button> - </div> - </div> - - <h4 className="font-semibold text-gray-900 dark:text-white mb-2 truncate"> - {material.name} - </h4> - - {material.description && ( - <p className="text-sm text-gray-600 dark:text-gray-400 mb-3 line-clamp-2"> - {material.description} - </p> - )} - - {material.progress !== undefined && ( - <div className="mb-3"> - <div className="flex justify-between items-center mb-1"> - <span className="text-xs text-gray-600 dark:text-gray-400">Progress</span> - <span className="text-xs text-gray-600 dark:text-gray-400">{material.progress}%</span> - </div> - <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1"> - <div - className="bg-blue-500 h-1 rounded-full transition-all duration-300" - style={{ width: `${material.progress}%` }} - /> - </div> - </div> - )} - - <div className="flex flex-wrap gap-1 mb-3"> - {material.tags.slice(0, 2).map((tag, tagIndex) => ( - <span - key={tagIndex} - className="px-2 py-1 bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400 text-xs rounded-full" - > - {tag} - </span> - ))} - {material.tags.length > 2 && ( - <span className="px-2 py-1 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 text-xs rounded-full"> - +{material.tags.length - 2} - </span> - )} - </div> - - <div className="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400 mb-4"> - <span>{formatFileSize(material.size)}</span> - <span>{formatDate(material.uploadDate)}</span> - </div> - - <div className="flex gap-2"> - <button className="flex-1 bg-blue-500 text-white text-sm py-2 px-3 rounded-lg hover:bg-blue-600 transition-colors flex items-center justify-center gap-1"> - <Eye className="w-3 h-3" /> - View - </button> - <button className="bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 text-sm py-2 px-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"> - <Download className="w-3 h-3" /> - </button> - </div> - </motion.div> - ))} - </motion.div> - ) : ( - <motion.div - key="list" - initial={{ opacity: 0 }} - animate={{ opacity: 1 }} - exit={{ opacity: 0 }} - className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden" - > - <div className="grid grid-cols-12 gap-4 p-4 bg-gray-50 dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300 border-b border-gray-200 dark:border-gray-600"> - <div className="col-span-5">Name</div> - <div className="col-span-2">Type</div> - <div className="col-span-1">Size</div> - <div className="col-span-2">Modified</div> - <div className="col-span-1">Progress</div> - <div className="col-span-1">Actions</div> - </div> - - {filteredMaterials.map((material, index) => ( - <motion.div - key={material.id} - initial={{ opacity: 0, x: -20 }} - animate={{ opacity: 1, x: 0 }} - transition={{ delay: index * 0.05 }} - className="grid grid-cols-12 gap-4 p-4 border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors" - > - <div className="col-span-5 flex items-center gap-3"> - <div className={`w-8 h-8 rounded-lg flex items-center justify-center ${getFileColor(material.type)}`}> - {getFileIcon(material.type)} - </div> - <div> - <div className="font-medium text-gray-900 dark:text-white flex items-center gap-2"> - {material.name} - {material.favorite && ( - <Star className="w-3 h-3 text-yellow-500 fill-current" /> - )} - </div> - {material.folder && ( - <div className="text-xs text-gray-500 dark:text-gray-400 flex items-center gap-1"> - <Folder className="w-3 h-3" /> - {material.folder} - </div> - )} - </div> - </div> - - <div className="col-span-2 flex items-center"> - <span className={`px-2 py-1 rounded-full text-xs font-medium ${getFileColor(material.type)}`}> - {material.type.toUpperCase()} - </span> - </div> - - <div className="col-span-1 flex items-center text-sm text-gray-600 dark:text-gray-400"> - {formatFileSize(material.size)} - </div> - - <div className="col-span-2 flex items-center text-sm text-gray-600 dark:text-gray-400"> - {formatDate(material.lastAccessed)} - </div> - - <div className="col-span-1 flex items-center"> - {material.progress !== undefined ? ( - <div className="w-full"> - <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1"> - <div - className="bg-blue-500 h-1 rounded-full" - style={{ width: `${material.progress}%` }} - /> - </div> - <div className="text-xs text-gray-500 dark:text-gray-400 mt-1"> - {material.progress}% - </div> - </div> - ) : ( - <span className="text-xs text-gray-400">-</span> - )} - </div> - - <div className="col-span-1 flex items-center gap-2"> - <button className="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300"> - <Eye className="w-4 h-4" /> - </button> - <button className="text-gray-600 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"> - <Download className="w-4 h-4" /> - </button> - <button className="text-gray-600 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"> - <MoreVertical className="w-4 h-4" /> - </button> - </div> - </motion.div> - ))} - </motion.div> - )} - </AnimatePresence> - - {/* Empty State */} - {filteredMaterials.length === 0 && ( - <div className="text-center py-12"> - <FileText className="w-16 h-16 text-gray-400 mx-auto mb-4" /> - <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">No materials found</h3> - <p className="text-gray-600 dark:text-gray-400 mb-4"> - {searchQuery || filterType !== 'all' || selectedFolder !== 'all' - ? 'Try adjusting your search or filters' - : 'Upload your first study material to get started'} - </p> - <button className="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition-colors"> - Upload Files - </button> - </div> - )} - </div> - ); -}; - -export default Materials; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 -210 -211 -212 -213 -214 -215 -216 -217 -218 -219 -220 -221 -222 -223 -224 -225 -226 -227 -228 -229 -230 -231 -232 -233 -234 -235 -236 -237 -238 -239 -240 -241 -242 -243 -244 -245 -246 -247 -248 -249 -250 -251 -252 -253 -254 -255 -256 -257 -258 -259 -260 -261 -262 -263 -264 -265 -266 -267 -268 -269 -270 -271 -272 -273 -274 -275 -276 -277 -278 -279 -280 -281 -282 -283 -284 -285 -286 -287 -288 -289 -290 -291 -292 -293 -294 -295 -296 -297 -298 -299 -300 -301 -302 -303 -304 -305 -306 -307 -308 -309 -310 -311 -312 -313 -314 -315 -316 -317 -318 -319 -320 -321 -322 -323 -324 -325 -326 -327 -328 -329 -330 -331 -332 -333 -334 -335 -336 -337 -338 -339 -340 -341 -342 -343 -344 -345 -346 -347 -348 -349 -350 -351 -352 -353 -354 -355 -356 -357 -358 -359 -360 -361 -362 -363 -364 -365 -366 -367 -368 -369 -370 -371 -372 -373 -374 -375 -376 -377 -378 -379 -380 -381 -382 -383 -384 -385 -386 -387 -388 -389 -390 -391 -392 -393 -394 -395 -396 -397 -398 -399 -400 -401 -402 -403 -404 -405 -406 -407 -408 -409 -410 -411 -412 -413 -414 -415 -416 -417 -418 -419 -420 -421 -422 -423 -424 -425 -426 -427 -428 -429 -430 -431 -432 -433 -434 -435 -436 -437 -438 -439 -440 -441 -442 -443 -444 -445 -446 -447 -448 -449 -450 -451 -452 -453 -454 -455 -456 -457 -458 -459 -460 -461 -462 -463 -464 -465 -466 -467 -468 -469 -470 -471 -472 -473 -474 -475 -476 -477 -478 -479 -480 -481 -482 -483 -484 -485 -486 -487 -488 -489 -490 -491 -492 -493 -494 -495 -496 -497 -498 -499 -500 -501 -502 -503 -504 -505 -506 -507 -508 -509 -510 -511 -512 -513 -514 -515 -516 -517 -518 -519 -520 -521 -522 -523 -524 -525 -526 -527 -528 -529 -530 -531 -532 -533 -534 -535 -536 -537 -538 -539 -540 -541 -542 -543 -544 -545 -546 -547 -548 -549 -550 -551 -552 -553 -554 -555 -556 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | import React, { useState, useEffect } from 'react'; -import { motion, AnimatePresence } from 'framer-motion'; -import { - Play, - Pause, - RotateCcw, - Check, - X, - Clock, - Trophy, - Target, - ChevronRight, - Brain, - Zap, - Award -} from 'lucide-react'; - -interface Question { - id: string; - question: string; - options: string[]; - correctAnswer: number; - explanation: string; - difficulty: 'easy' | 'medium' | 'hard'; - subject: string; -} - -interface QuizResult { - questionId: string; - selectedAnswer: number | null; - isCorrect: boolean; - timeSpent: number; -} - -const Quiz: React.FC = () => { - const [selectedSubject, setSelectedSubject] = useState('Psychology'); - const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0); - const [selectedAnswer, setSelectedAnswer] = useState<number | null>(null); - const [showResult, setShowResult] = useState(false); - const [quizStarted, setQuizStarted] = useState(false); - const [quizCompleted, setQuizCompleted] = useState(false); - const [results, setResults] = useState<QuizResult[]>([]); - const [timeElapsed, setTimeElapsed] = useState(0); - const [questionStartTime, setQuestionStartTime] = useState(Date.now()); - - const subjects = ['Psychology', 'Biology', 'History', 'Mathematics', 'Physics']; - - const questions: Question[] = [ - { - id: '1', - question: 'What is cognitive dissonance?', - options: [ - 'Mental discomfort from conflicting beliefs', - 'A type of memory disorder', - 'Enhanced cognitive ability', - 'Rapid information processing' - ], - correctAnswer: 0, - explanation: 'Cognitive dissonance occurs when a person holds contradictory beliefs, ideas, or values simultaneously, causing psychological discomfort.', - difficulty: 'medium', - subject: 'Psychology' - }, - { - id: '2', - question: 'Which part of the brain processes emotions and fear?', - options: [ - 'Cerebellum', - 'Amygdala', - 'Hippocampus', - 'Frontal cortex' - ], - correctAnswer: 1, - explanation: 'The amygdala is an almond-shaped structure in the limbic system that plays a key role in processing emotions, particularly fear and threat detection.', - difficulty: 'easy', - subject: 'Psychology' - }, - { - id: '3', - question: 'What is the process by which plants convert light energy into chemical energy?', - options: [ - 'Cellular respiration', - 'Photosynthesis', - 'Fermentation', - 'Osmosis' - ], - correctAnswer: 1, - explanation: 'Photosynthesis is the process by which plants use sunlight, water, and carbon dioxide to produce glucose and oxygen.', - difficulty: 'easy', - subject: 'Biology' - }, - { - id: '4', - question: 'Which event triggered World War I?', - options: [ - 'Invasion of Poland', - 'Assassination of Archduke Franz Ferdinand', - 'Attack on Pearl Harbor', - 'Sinking of the Lusitania' - ], - correctAnswer: 1, - explanation: 'The assassination of Archduke Franz Ferdinand of Austria-Hungary on June 28, 1914, was the immediate trigger that led to the outbreak of World War I.', - difficulty: 'medium', - subject: 'History' - }, - { - id: '5', - question: 'What is the function of mitochondria in cells?', - options: [ - 'Protein synthesis', - 'DNA storage', - 'Energy production', - 'Waste removal' - ], - correctAnswer: 2, - explanation: 'Mitochondria are known as the powerhouses of the cell because they produce ATP (adenosine triphosphate), which provides energy for cellular processes.', - difficulty: 'medium', - subject: 'Biology' - } - ]; - - const currentQuestions = questions.filter(q => q.subject === selectedSubject); - const currentQuestion = currentQuestions[currentQuestionIndex]; - - useEffect(() => { - let interval: NodeJS.Timeout; - if (quizStarted && !quizCompleted) { - interval = setInterval(() => { - setTimeElapsed(prev => prev + 1); - }, 1000); - } - return () => clearInterval(interval); - }, [quizStarted, quizCompleted]); - - const startQuiz = () => { - setQuizStarted(true); - setCurrentQuestionIndex(0); - setSelectedAnswer(null); - setShowResult(false); - setQuizCompleted(false); - setResults([]); - setTimeElapsed(0); - setQuestionStartTime(Date.now()); - }; - - const handleAnswerSelect = (answerIndex: number) => { - if (showResult) return; - setSelectedAnswer(answerIndex); - }; - - const handleSubmitAnswer = () => { - if (selectedAnswer === null) return; - - const isCorrect = selectedAnswer === currentQuestion.correctAnswer; - const timeSpent = Math.floor((Date.now() - questionStartTime) / 1000); - - const result: QuizResult = { - questionId: currentQuestion.id, - selectedAnswer, - isCorrect, - timeSpent - }; - - setResults(prev => [...prev, result]); - setShowResult(true); - }; - - const handleNextQuestion = () => { - if (currentQuestionIndex < currentQuestions.length - 1) { - setCurrentQuestionIndex(prev => prev + 1); - setSelectedAnswer(null); - setShowResult(false); - setQuestionStartTime(Date.now()); - } else { - setQuizCompleted(true); - } - }; - - const resetQuiz = () => { - setQuizStarted(false); - setCurrentQuestionIndex(0); - setSelectedAnswer(null); - setShowResult(false); - setQuizCompleted(false); - setResults([]); - setTimeElapsed(0); - }; - - const formatTime = (seconds: number) => { - const mins = Math.floor(seconds / 60); - const secs = seconds % 60; - return `${mins}:${secs.toString().padStart(2, '0')}`; - }; - - const calculateScore = () => { - const correct = results.filter(r => r.isCorrect).length; - return Math.round((correct / results.length) * 100); - }; - - const getDifficultyColor = (difficulty: string) => { - switch (difficulty) { - case 'easy': return 'text-green-600 bg-green-100 dark:bg-green-900 dark:text-green-400'; - case 'medium': return 'text-yellow-600 bg-yellow-100 dark:bg-yellow-900 dark:text-yellow-400'; - case 'hard': return 'text-red-600 bg-red-100 dark:bg-red-900 dark:text-red-400'; - default: return 'text-gray-600 bg-gray-100'; - } - }; - - if (!quizStarted) { - return ( - <div className="p-6 space-y-6"> - {/* Header */} - <div className="flex items-center justify-between"> - <div> - <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Interactive Quizzes</h1> - <p className="text-gray-600 dark:text-gray-400 mt-1"> - Test your knowledge with AI-generated questions - </p> - </div> - <div className="flex items-center gap-2 text-sm text-purple-600 dark:text-purple-400"> - <Zap className="w-4 h-4" /> - <span>AI-Powered</span> - </div> - </div> - - {/* Subject Selection */} - <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700"> - <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Choose Subject</h3> - <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3"> - {subjects.map((subject) => ( - <button - key={subject} - onClick={() => setSelectedSubject(subject)} - className={`p-4 rounded-lg border-2 transition-all duration-200 ${ - selectedSubject === subject - ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400' - : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 text-gray-700 dark:text-gray-300' - }`} - > - <div className="font-medium">{subject}</div> - <div className="text-sm opacity-75"> - {currentQuestions.filter(q => q.subject === subject).length} questions - </div> - </button> - ))} - </div> - </div> - - {/* Quiz Preview */} - <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700"> - <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4"> - {selectedSubject} Quiz Preview - </h3> - - <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> - <div className="text-center p-4 bg-blue-50 dark:bg-blue-900/30 rounded-lg"> - <Brain className="w-8 h-8 text-blue-600 dark:text-blue-400 mx-auto mb-2" /> - <div className="font-semibold text-gray-900 dark:text-white">{currentQuestions.length}</div> - <div className="text-sm text-gray-600 dark:text-gray-400">Questions</div> - </div> - <div className="text-center p-4 bg-green-50 dark:bg-green-900/30 rounded-lg"> - <Clock className="w-8 h-8 text-green-600 dark:text-green-400 mx-auto mb-2" /> - <div className="font-semibold text-gray-900 dark:text-white">~{currentQuestions.length * 2} min</div> - <div className="text-sm text-gray-600 dark:text-gray-400">Estimated Time</div> - </div> - <div className="text-center p-4 bg-purple-50 dark:bg-purple-900/30 rounded-lg"> - <Target className="w-8 h-8 text-purple-600 dark:text-purple-400 mx-auto mb-2" /> - <div className="font-semibold text-gray-900 dark:text-white">Mixed</div> - <div className="text-sm text-gray-600 dark:text-gray-400">Difficulty</div> - </div> - </div> - - <button - onClick={startQuiz} - className="w-full bg-gradient-to-r from-blue-500 to-purple-600 text-white py-3 px-6 rounded-lg hover:from-blue-600 hover:to-purple-700 transition-all duration-200 flex items-center justify-center gap-2 font-medium" - > - <Play className="w-5 h-5" /> - Start Quiz - </button> - </div> - - {/* Study Tips */} - <div className="bg-gradient-to-r from-green-500 to-blue-500 rounded-xl p-6 text-white"> - <h3 className="text-lg font-semibold mb-2">Quiz Tips</h3> - <div className="grid grid-cols-1 md:grid-cols-3 gap-4"> - <div> - <h4 className="font-medium mb-1">Read Carefully</h4> - <p className="text-sm text-green-100">Take time to understand each question fully</p> - </div> - <div> - <h4 className="font-medium mb-1">Eliminate Options</h4> - <p className="text-sm text-green-100">Rule out obviously wrong answers first</p> - </div> - <div> - <h4 className="font-medium mb-1">Learn from Mistakes</h4> - <p className="text-sm text-green-100">Review explanations to improve understanding</p> - </div> - </div> - </div> - </div> - ); - } - - if (quizCompleted) { - const score = calculateScore(); - const averageTime = Math.round(results.reduce((sum, r) => sum + r.timeSpent, 0) / results.length); - - return ( - <div className="p-6 space-y-6"> - {/* Results Header */} - <div className="text-center"> - <motion.div - initial={{ scale: 0 }} - animate={{ scale: 1 }} - className="w-20 h-20 bg-gradient-to-r from-green-500 to-blue-500 rounded-full flex items-center justify-center mx-auto mb-4" - > - <Trophy className="w-10 h-10 text-white" /> - </motion.div> - <h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">Quiz Complete!</h1> - <p className="text-gray-600 dark:text-gray-400">Great job on completing the {selectedSubject} quiz</p> - </div> - - {/* Score Summary */} - <div className="grid grid-cols-1 md:grid-cols-4 gap-4"> - <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700 text-center"> - <div className="text-3xl font-bold text-blue-600 dark:text-blue-400 mb-2">{score}%</div> - <div className="text-gray-600 dark:text-gray-400">Final Score</div> - </div> - <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700 text-center"> - <div className="text-3xl font-bold text-green-600 dark:text-green-400 mb-2"> - {results.filter(r => r.isCorrect).length} - </div> - <div className="text-gray-600 dark:text-gray-400">Correct Answers</div> - </div> - <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700 text-center"> - <div className="text-3xl font-bold text-purple-600 dark:text-purple-400 mb-2"> - {formatTime(timeElapsed)} - </div> - <div className="text-gray-600 dark:text-gray-400">Total Time</div> - </div> - <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700 text-center"> - <div className="text-3xl font-bold text-orange-600 dark:text-orange-400 mb-2"> - {averageTime}s - </div> - <div className="text-gray-600 dark:text-gray-400">Avg per Question</div> - </div> - </div> - - {/* Performance Badge */} - <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700"> - <div className="flex items-center justify-center"> - <div className={`px-6 py-3 rounded-full flex items-center gap-2 ${ - score >= 90 ? 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-600 dark:text-yellow-400' : - score >= 80 ? 'bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400' : - score >= 70 ? 'bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400' : - 'bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400' - }`}> - <Award className="w-5 h-5" /> - <span className="font-medium"> - {score >= 90 ? 'Excellent!' : score >= 80 ? 'Great Job!' : score >= 70 ? 'Good Work!' : 'Keep Practicing!'} - </span> - </div> - </div> - </div> - - {/* Question Review */} - <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700"> - <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Question Review</h3> - <div className="space-y-4"> - {currentQuestions.map((question, index) => { - const result = results[index]; - return ( - <div key={question.id} className="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg"> - <div className="flex items-start justify-between mb-2"> - <h4 className="font-medium text-gray-900 dark:text-white">{question.question}</h4> - <div className={`flex items-center gap-1 ${result.isCorrect ? 'text-green-600' : 'text-red-600'}`}> - {result.isCorrect ? <Check className="w-4 h-4" /> : <X className="w-4 h-4" />} - </div> - </div> - <div className="text-sm text-gray-600 dark:text-gray-400 mb-2"> - <strong>Correct Answer:</strong> {question.options[question.correctAnswer]} - </div> - {result.selectedAnswer !== null && result.selectedAnswer !== question.correctAnswer && ( - <div className="text-sm text-red-600 dark:text-red-400 mb-2"> - <strong>Your Answer:</strong> {question.options[result.selectedAnswer]} - </div> - )} - <div className="text-sm text-gray-700 dark:text-gray-300"> - {question.explanation} - </div> - </div> - ); - })} - </div> - </div> - - {/* Actions */} - <div className="flex gap-4"> - <button - onClick={resetQuiz} - className="flex-1 bg-gradient-to-r from-blue-500 to-purple-600 text-white py-3 px-6 rounded-lg hover:from-blue-600 hover:to-purple-700 transition-all duration-200 flex items-center justify-center gap-2 font-medium" - > - <RotateCcw className="w-5 h-5" /> - Take Another Quiz - </button> - </div> - </div> - ); - } - - return ( - <div className="p-6 space-y-6"> - {/* Quiz Header */} - <div className="flex items-center justify-between"> - <div className="flex items-center gap-4"> - <button - onClick={resetQuiz} - className="p-2 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors" - > - <X className="w-5 h-5" /> - </button> - <div> - <h1 className="text-xl font-bold text-gray-900 dark:text-white">{selectedSubject} Quiz</h1> - <p className="text-sm text-gray-600 dark:text-gray-400"> - Question {currentQuestionIndex + 1} of {currentQuestions.length} - </p> - </div> - </div> - <div className="flex items-center gap-4"> - <div className="flex items-center gap-2 text-gray-600 dark:text-gray-400"> - <Clock className="w-4 h-4" /> - <span className="font-mono">{formatTime(timeElapsed)}</span> - </div> - </div> - </div> - - {/* Progress Bar */} - <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2"> - <div - className="bg-gradient-to-r from-blue-500 to-purple-600 h-2 rounded-full transition-all duration-300" - style={{ width: `${((currentQuestionIndex + 1) / currentQuestions.length) * 100}%` }} - /> - </div> - - {/* Question Card */} - <div className="bg-white dark:bg-gray-800 rounded-xl p-8 border border-gray-200 dark:border-gray-700"> - <div className="flex items-center justify-between mb-6"> - <span className={`px-3 py-1 rounded-full text-xs font-medium ${getDifficultyColor(currentQuestion.difficulty)}`}> - {currentQuestion.difficulty.charAt(0).toUpperCase() + currentQuestion.difficulty.slice(1)} - </span> - <span className="text-sm text-gray-500 dark:text-gray-400"> - ID: {currentQuestion.id} - </span> - </div> - - <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-8"> - {currentQuestion.question} - </h2> - - <div className="space-y-3 mb-8"> - {currentQuestion.options.map((option, index) => ( - <motion.button - key={index} - onClick={() => handleAnswerSelect(index)} - className={`w-full p-4 text-left rounded-lg border-2 transition-all duration-200 ${ - selectedAnswer === index - ? showResult - ? index === currentQuestion.correctAnswer - ? 'border-green-500 bg-green-50 dark:bg-green-900/30 text-green-700 dark:text-green-300' - : 'border-red-500 bg-red-50 dark:bg-red-900/30 text-red-700 dark:text-red-300' - : 'border-blue-500 bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300' - : showResult && index === currentQuestion.correctAnswer - ? 'border-green-500 bg-green-50 dark:bg-green-900/30 text-green-700 dark:text-green-300' - : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 text-gray-900 dark:text-white' - }`} - whileHover={{ scale: 1.02 }} - whileTap={{ scale: 0.98 }} - > - <div className="flex items-center gap-3"> - <div className={`w-6 h-6 rounded-full border-2 flex items-center justify-center text-sm font-medium ${ - selectedAnswer === index - ? showResult - ? index === currentQuestion.correctAnswer - ? 'border-green-500 bg-green-500 text-white' - : 'border-red-500 bg-red-500 text-white' - : 'border-blue-500 bg-blue-500 text-white' - : showResult && index === currentQuestion.correctAnswer - ? 'border-green-500 bg-green-500 text-white' - : 'border-gray-300 dark:border-gray-600' - }`}> - {showResult && (selectedAnswer === index || index === currentQuestion.correctAnswer) ? ( - index === currentQuestion.correctAnswer ? ( - <Check className="w-3 h-3" /> - ) : ( - <X className="w-3 h-3" /> - ) - ) : ( - String.fromCharCode(65 + index) - )} - </div> - <span>{option}</span> - </div> - </motion.button> - ))} - </div> - - {/* Explanation */} - <AnimatePresence> - {showResult && ( - <motion.div - initial={{ opacity: 0, height: 0 }} - animate={{ opacity: 1, height: 'auto' }} - exit={{ opacity: 0, height: 0 }} - className="p-4 bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-700 rounded-lg mb-6" - > - <h4 className="font-medium text-blue-900 dark:text-blue-100 mb-2">Explanation:</h4> - <p className="text-blue-800 dark:text-blue-200">{currentQuestion.explanation}</p> - </motion.div> - )} - </AnimatePresence> - - {/* Action Buttons */} - <div className="flex gap-4"> - {!showResult ? ( - <button - onClick={handleSubmitAnswer} - disabled={selectedAnswer === null} - className="flex-1 bg-gradient-to-r from-blue-500 to-purple-600 text-white py-3 px-6 rounded-lg hover:from-blue-600 hover:to-purple-700 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 flex items-center justify-center gap-2 font-medium" - > - <Check className="w-5 h-5" /> - Submit Answer - </button> - ) : ( - <button - onClick={handleNextQuestion} - className="flex-1 bg-gradient-to-r from-green-500 to-blue-500 text-white py-3 px-6 rounded-lg hover:from-green-600 hover:to-blue-600 transition-all duration-200 flex items-center justify-center gap-2 font-medium" - > - {currentQuestionIndex < currentQuestions.length - 1 ? ( - <> - Next Question - <ChevronRight className="w-5 h-5" /> - </> - ) : ( - <> - View Results - <Trophy className="w-5 h-5" /> - </> - )} - </button> - )} - </div> - </div> - </div> - ); -}; - -export default Quiz; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 -210 -211 -212 -213 -214 -215 -216 -217 -218 -219 -220 -221 -222 -223 -224 -225 -226 -227 -228 -229 -230 -231 -232 -233 -234 -235 -236 -237 -238 -239 -240 -241 -242 -243 -244 -245 -246 -247 -248 -249 -250 -251 -252 -253 -254 -255 -256 -257 -258 -259 -260 -261 -262 -263 -264 -265 -266 -267 -268 -269 -270 -271 -272 -273 -274 -275 -276 -277 -278 -279 -280 -281 -282 -283 -284 -285 -286 -287 -288 -289 -290 -291 -292 -293 -294 -295 -296 -297 -298 -299 -300 -301 -302 -303 -304 -305 -306 -307 -308 -309 -310 -311 -312 -313 -314 -315 -316 -317 -318 -319 -320 -321 -322 -323 -324 -325 -326 -327 -328 -329 -330 -331 -332 -333 -334 -335 -336 -337 -338 -339 -340 -341 -342 -343 -344 -345 -346 -347 -348 -349 -350 -351 -352 -353 -354 -355 -356 -357 -358 -359 -360 -361 -362 -363 -364 -365 -366 -367 -368 -369 -370 -371 -372 -373 -374 -375 -376 -377 -378 -379 -380 -381 -382 -383 -384 -385 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | import React, { useState } from 'react'; -import { motion } from 'framer-motion'; -import { - Search, - Filter, - Clock, - FileText, - Brain, - BookOpen, - Target, - Sparkles, - TrendingUp, - Calendar, - Tag, - Star -} from 'lucide-react'; - -interface SearchResult { - id: string; - title: string; - type: 'flashcard' | 'quiz' | 'material' | 'note' | 'concept'; - content: string; - relevance: number; - lastAccessed: string; - tags: string[]; - subject: string; - favorite?: boolean; -} - -const SearchResults: React.FC = () => { - const [searchQuery, setSearchQuery] = useState(''); - const [selectedFilter, setSelectedFilter] = useState<'all' | 'flashcard' | 'quiz' | 'material' | 'note' | 'concept'>('all'); - const [sortBy, setSortBy] = useState<'relevance' | 'date' | 'alphabetical'>('relevance'); - - const searchResults: SearchResult[] = [ - { - id: '1', - title: 'Cognitive Dissonance Definition', - type: 'flashcard', - content: 'Mental discomfort from conflicting beliefs, ideas, or values simultaneously held by an individual.', - relevance: 95, - lastAccessed: '2025-06-28', - tags: ['psychology', 'cognitive', 'theory'], - subject: 'Psychology', - favorite: true - }, - { - id: '2', - title: 'Psychology Quiz - Cognitive Theories', - type: 'quiz', - content: 'Test your knowledge of cognitive psychology theories including dissonance, schemas, and processing models.', - relevance: 88, - lastAccessed: '2025-06-27', - tags: ['psychology', 'quiz', 'cognitive'], - subject: 'Psychology' - }, - { - id: '3', - title: 'Mitochondria Function', - type: 'concept', - content: 'Powerhouse of the cell - produces ATP through cellular respiration, contains its own DNA.', - relevance: 82, - lastAccessed: '2025-06-26', - tags: ['biology', 'cellular', 'energy'], - subject: 'Biology' - }, - { - id: '4', - title: 'World War I Causes Study Material', - type: 'material', - content: 'Comprehensive document covering the complex causes of WWI including nationalism, imperialism, and alliance systems.', - relevance: 76, - lastAccessed: '2025-06-25', - tags: ['history', 'war', 'causes'], - subject: 'History' - }, - { - id: '5', - title: 'Photosynthesis Process Notes', - type: 'note', - content: 'Detailed notes on light-dependent and light-independent reactions in photosynthesis.', - relevance: 71, - lastAccessed: '2025-06-24', - tags: ['biology', 'plants', 'energy'], - subject: 'Biology', - favorite: true - }, - { - id: '6', - title: 'Classical Conditioning Flashcard', - type: 'flashcard', - content: 'Learning process through association between stimuli - Pavlov\'s dogs experiment.', - relevance: 68, - lastAccessed: '2025-06-23', - tags: ['psychology', 'learning', 'behaviorism'], - subject: 'Psychology' - } - ]; - - const getTypeIcon = (type: string) => { - switch (type) { - case 'flashcard': return <Brain className="w-4 h-4" />; - case 'quiz': return <Target className="w-4 h-4" />; - case 'material': return <FileText className="w-4 h-4" />; - case 'note': return <BookOpen className="w-4 h-4" />; - case 'concept': return <Sparkles className="w-4 h-4" />; - default: return <Search className="w-4 h-4" />; - } - }; - - const getTypeColor = (type: string) => { - switch (type) { - case 'flashcard': return 'text-blue-600 bg-blue-100 dark:bg-blue-900 dark:text-blue-400'; - case 'quiz': return 'text-green-600 bg-green-100 dark:bg-green-900 dark:text-green-400'; - case 'material': return 'text-purple-600 bg-purple-100 dark:bg-purple-900 dark:text-purple-400'; - case 'note': return 'text-orange-600 bg-orange-100 dark:bg-orange-900 dark:text-orange-400'; - case 'concept': return 'text-pink-600 bg-pink-100 dark:bg-pink-900 dark:text-pink-400'; - default: return 'text-gray-600 bg-gray-100 dark:bg-gray-700 dark:text-gray-400'; - } - }; - - const filteredResults = searchResults - .filter(result => selectedFilter === 'all' || result.type === selectedFilter) - .filter(result => - searchQuery === '' || - result.title.toLowerCase().includes(searchQuery.toLowerCase()) || - result.content.toLowerCase().includes(searchQuery.toLowerCase()) || - result.tags.some(tag => tag.toLowerCase().includes(searchQuery.toLowerCase())) - ) - .sort((a, b) => { - switch (sortBy) { - case 'relevance': return b.relevance - a.relevance; - case 'date': return new Date(b.lastAccessed).getTime() - new Date(a.lastAccessed).getTime(); - case 'alphabetical': return a.title.localeCompare(b.title); - default: return 0; - } - }); - - const recentSearches = [ - 'cognitive dissonance', - 'mitochondria function', - 'world war 1 causes', - 'photosynthesis', - 'classical conditioning' - ]; - - const suggestedTopics = [ - { name: 'Psychology Theories', count: 24 }, - { name: 'Cell Biology', count: 18 }, - { name: 'Historical Events', count: 15 }, - { name: 'Chemical Reactions', count: 12 }, - { name: 'Mathematical Formulas', count: 9 } - ]; - - return ( - <div className="p-6 space-y-6"> - {/* Header */} - <div className="flex items-center justify-between"> - <div> - <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Search & Discovery</h1> - <p className="text-gray-600 dark:text-gray-400 mt-1"> - Find anything across your study materials and notes - </p> - </div> - <div className="flex items-center gap-2 text-sm text-blue-600 dark:text-blue-400"> - <Sparkles className="w-4 h-4" /> - <span>AI-Enhanced Search</span> - </div> - </div> - - {/* Search Bar */} - <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700"> - <div className="relative mb-4"> - <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" /> - <input - type="text" - placeholder="Search across all your study materials, flashcards, quizzes, and notes..." - value={searchQuery} - onChange={(e) => setSearchQuery(e.target.value)} - className="w-full pl-12 pr-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 focus:ring-2 focus:ring-blue-500 focus:border-transparent text-lg" - /> - </div> - - {/* Filters */} - <div className="flex flex-wrap gap-4"> - <div className="flex items-center gap-2"> - <Filter className="w-4 h-4 text-gray-600 dark:text-gray-400" /> - <span className="text-sm font-medium text-gray-700 dark:text-gray-300">Filter by:</span> - </div> - - <select - value={selectedFilter} - onChange={(e) => setSelectedFilter(e.target.value as any)} - className="px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm" - > - <option value="all">All Types</option> - <option value="flashcard">Flashcards</option> - <option value="quiz">Quizzes</option> - <option value="material">Materials</option> - <option value="note">Notes</option> - <option value="concept">Concepts</option> - </select> - - <select - value={sortBy} - onChange={(e) => setSortBy(e.target.value as any)} - className="px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm" - > - <option value="relevance">Most Relevant</option> - <option value="date">Recently Accessed</option> - <option value="alphabetical">Alphabetical</option> - </select> - </div> - </div> - - {/* Search Results */} - {searchQuery || selectedFilter !== 'all' ? ( - <div className="space-y-4"> - <div className="flex items-center justify-between"> - <h2 className="text-lg font-semibold text-gray-900 dark:text-white"> - Search Results ({filteredResults.length}) - </h2> - {searchQuery && ( - <div className="text-sm text-gray-600 dark:text-gray-400"> - Showing results for "{searchQuery}" - </div> - )} - </div> - - <div className="space-y-3"> - {filteredResults.map((result, index) => ( - <motion.div - key={result.id} - initial={{ opacity: 0, y: 20 }} - animate={{ opacity: 1, y: 0 }} - transition={{ delay: index * 0.1 }} - className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700 hover:shadow-lg transition-all duration-200 cursor-pointer" - > - <div className="flex items-start justify-between mb-3"> - <div className="flex items-center gap-3"> - <div className={`w-8 h-8 rounded-lg flex items-center justify-center ${getTypeColor(result.type)}`}> - {getTypeIcon(result.type)} - </div> - <div> - <h3 className="font-semibold text-gray-900 dark:text-white flex items-center gap-2"> - {result.title} - {result.favorite && ( - <Star className="w-4 h-4 text-yellow-500 fill-current" /> - )} - </h3> - <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400"> - <span className="capitalize">{result.type}</span> - <span>•</span> - <span>{result.subject}</span> - <span>•</span> - <div className="flex items-center gap-1"> - <TrendingUp className="w-3 h-3" /> - <span>{result.relevance}% match</span> - </div> - </div> - </div> - </div> - <div className="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400"> - <Clock className="w-3 h-3" /> - <span>{new Date(result.lastAccessed).toLocaleDateString()}</span> - </div> - </div> - - <p className="text-gray-700 dark:text-gray-300 mb-3 line-clamp-2"> - {result.content} - </p> - - <div className="flex items-center justify-between"> - <div className="flex flex-wrap gap-2"> - {result.tags.map((tag, tagIndex) => ( - <span - key={tagIndex} - className="px-2 py-1 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 text-xs rounded-full flex items-center gap-1" - > - <Tag className="w-2 h-2" /> - {tag} - </span> - ))} - </div> - <button className="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 text-sm font-medium"> - Open → - </button> - </div> - </motion.div> - ))} - </div> - - {filteredResults.length === 0 && ( - <div className="text-center py-12"> - <Search className="w-16 h-16 text-gray-400 mx-auto mb-4" /> - <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">No results found</h3> - <p className="text-gray-600 dark:text-gray-400"> - Try adjusting your search terms or filters - </p> - </div> - )} - </div> - ) : ( - /* Default State - Recent Searches & Suggestions */ - <div className="grid grid-cols-1 lg:grid-cols-2 gap-6"> - {/* Recent Searches */} - <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700"> - <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2"> - <Clock className="w-5 h-5" /> - Recent Searches - </h3> - <div className="space-y-3"> - {recentSearches.map((search, index) => ( - <button - key={index} - onClick={() => setSearchQuery(search)} - className="w-full text-left p-3 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors" - > - <div className="flex items-center gap-3"> - <Search className="w-4 h-4 text-gray-400" /> - <span className="text-gray-900 dark:text-white">{search}</span> - </div> - </button> - ))} - </div> - </div> - - {/* Suggested Topics */} - <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700"> - <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2"> - <Sparkles className="w-5 h-5" /> - Suggested Topics - </h3> - <div className="space-y-3"> - {suggestedTopics.map((topic, index) => ( - <button - key={index} - onClick={() => setSearchQuery(topic.name.toLowerCase())} - className="w-full text-left p-3 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors" - > - <div className="flex items-center justify-between"> - <span className="text-gray-900 dark:text-white">{topic.name}</span> - <span className="text-sm text-gray-500 dark:text-gray-400"> - {topic.count} items - </span> - </div> - </button> - ))} - </div> - </div> - </div> - )} - - {/* Search Tips */} - <div className="bg-gradient-to-r from-blue-500 to-purple-600 rounded-xl p-6 text-white"> - <h3 className="text-lg font-semibold mb-4 flex items-center gap-2"> - <Sparkles className="w-5 h-5" /> - Search Tips - </h3> - <div className="grid grid-cols-1 md:grid-cols-3 gap-4"> - <div> - <h4 className="font-medium mb-1">Use Keywords</h4> - <p className="text-sm text-blue-100"> - Search for specific terms, concepts, or topics you're studying - </p> - </div> - <div> - <h4 className="font-medium mb-1">Filter by Type</h4> - <p className="text-sm text-blue-100"> - Narrow down results by content type: flashcards, quizzes, or materials - </p> - </div> - <div> - <h4 className="font-medium mb-1">Use Tags</h4> - <p className="text-sm text-blue-100"> - Search by subject tags like "psychology" or "biology" for better results - </p> - </div> - </div> - </div> - </div> - ); -}; - -export default SearchResults; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 -210 -211 -212 -213 -214 -215 -216 -217 -218 -219 -220 -221 -222 -223 -224 -225 -226 -227 -228 -229 -230 -231 -232 -233 -234 -235 -236 -237 -238 -239 -240 -241 -242 -243 -244 -245 -246 -247 -248 -249 -250 -251 -252 -253 -254 -255 -256 -257 -258 -259 -260 -261 -262 -263 -264 -265 -266 -267 -268 -269 -270 -271 -272 -273 -274 -275 -276 -277 -278 -279 -280 -281 -282 -283 -284 -285 -286 -287 -288 -289 -290 -291 -292 -293 -294 -295 -296 -297 -298 -299 -300 -301 -302 -303 -304 -305 -306 -307 -308 -309 -310 -311 -312 -313 -314 -315 -316 -317 -318 -319 -320 -321 -322 -323 -324 -325 -326 -327 -328 -329 -330 -331 -332 -333 -334 -335 -336 -337 -338 -339 -340 -341 -342 -343 -344 -345 -346 -347 -348 -349 -350 -351 -352 -353 -354 -355 -356 -357 -358 -359 -360 -361 -362 -363 -364 -365 -366 -367 -368 -369 -370 -371 -372 -373 -374 -375 -376 -377 -378 -379 -380 -381 -382 -383 -384 -385 -386 -387 -388 -389 -390 -391 -392 -393 -394 -395 -396 -397 -398 -399 -400 -401 -402 -403 -404 -405 -406 -407 -408 -409 -410 -411 -412 -413 -414 -415 -416 -417 -418 -419 -420 -421 -422 -423 -424 -425 -426 -427 -428 -429 -430 -431 -432 -433 -434 -435 -436 -437 -438 -439 -440 -441 -442 -443 -444 -445 -446 -447 -448 -449 -450 -451 -452 -453 -454 -455 -456 -457 -458 -459 -460 -461 -462 -463 -464 -465 -466 -467 -468 -469 -470 -471 -472 -473 -474 -475 -476 -477 -478 -479 -480 -481 -482 -483 -484 -485 -486 -487 -488 -489 -490 -491 -492 -493 -494 -495 -496 -497 -498 -499 -500 -501 -502 -503 -504 -505 -506 -507 -508 -509 -510 -511 -512 -513 -514 -515 -516 -517 -518 -519 -520 -521 -522 -523 -524 -525 -526 -527 -528 -529 -530 -531 -532 -533 -534 -535 -536 -537 -538 -539 -540 -541 -542 -543 -544 -545 -546 -547 -548 -549 -550 -551 -552 -553 -554 -555 -556 -557 -558 -559 -560 -561 -562 -563 -564 -565 -566 -567 -568 -569 -570 -571 -572 -573 -574 -575 -576 -577 -578 -579 -580 -581 -582 -583 -584 -585 -586 -587 -588 -589 -590 -591 -592 -593 -594 -595 -596 -597 -598 -599 -600 -601 -602 -603 -604 -605 -606 -607 -608 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | import React, { useState } from 'react'; -import { motion } from 'framer-motion'; -import { - User, - Bell, - Shield, - Palette, - Globe, - Download, - Trash2, - Key, - Moon, - Sun, - Volume2, - VolumeX, - Smartphone, - Mail, - Lock, - Eye, - EyeOff, - Save, - RefreshCw -} from 'lucide-react'; -import { useTheme } from '../contexts/ThemeContext'; - -const Settings: React.FC = () => { - const { isDark, toggleTheme } = useTheme(); - const [activeTab, setActiveTab] = useState('profile'); - const [showPassword, setShowPassword] = useState(false); - const [notifications, setNotifications] = useState({ - email: true, - push: true, - studyReminders: true, - quizResults: true, - achievements: true, - weeklyReports: false - }); - const [privacy, setPrivacy] = useState({ - profileVisibility: 'private', - studyStats: 'friends', - achievements: 'public' - }); - const [preferences, setPreferences] = useState({ - language: 'en', - timezone: 'UTC-5', - soundEffects: true, - autoSave: true, - darkMode: isDark, - studyReminders: true, - dailyGoal: 4 - }); - - const tabs = [ - { id: 'profile', label: 'Profile', icon: User }, - { id: 'notifications', label: 'Notifications', icon: Bell }, - { id: 'privacy', label: 'Privacy & Security', icon: Shield }, - { id: 'preferences', label: 'Preferences', icon: Palette }, - { id: 'data', label: 'Data & Storage', icon: Download } - ]; - - const handleNotificationChange = (key: string, value: boolean) => { - setNotifications(prev => ({ ...prev, [key]: value })); - }; - - const handlePrivacyChange = (key: string, value: string) => { - setPrivacy(prev => ({ ...prev, [key]: value })); - }; - - const handlePreferenceChange = (key: string, value: any) => { - setPreferences(prev => ({ ...prev, [key]: value })); - if (key === 'darkMode') { - toggleTheme(); - } - }; - - const renderTabContent = () => { - switch (activeTab) { - case 'profile': - return ( - <div className="space-y-6"> - <div className="flex items-center gap-6"> - <div className="w-24 h-24 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-white text-2xl font-bold"> - AJ - </div> - <div> - <h3 className="text-xl font-semibold text-gray-900 dark:text-white">Alex Johnson</h3> - <p className="text-gray-600 dark:text-gray-400">alex.johnson@email.com</p> - <button className="mt-2 text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 text-sm font-medium"> - Change Photo - </button> - </div> - </div> - - <div className="grid grid-cols-1 md:grid-cols-2 gap-6"> - <div> - <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"> - First Name - </label> - <input - type="text" - defaultValue="Alex" - className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" - /> - </div> - <div> - <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"> - Last Name - </label> - <input - type="text" - defaultValue="Johnson" - className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" - /> - </div> - <div> - <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"> - Email - </label> - <input - type="email" - defaultValue="alex.johnson@email.com" - className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" - /> - </div> - <div> - <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"> - Phone - </label> - <input - type="tel" - placeholder="+1 (555) 123-4567" - className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" - /> - </div> - </div> - - <div> - <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"> - Bio - </label> - <textarea - rows={3} - placeholder="Tell us about yourself..." - className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" - /> - </div> - - <div> - <h4 className="text-lg font-medium text-gray-900 dark:text-white mb-4">Change Password</h4> - <div className="space-y-4"> - <div> - <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"> - Current Password - </label> - <div className="relative"> - <input - type={showPassword ? 'text' : 'password'} - className="w-full px-3 py-2 pr-10 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" - /> - <button - onClick={() => setShowPassword(!showPassword)} - className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" - > - {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />} - </button> - </div> - </div> - <div className="grid grid-cols-1 md:grid-cols-2 gap-4"> - <div> - <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"> - New Password - </label> - <input - type="password" - className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" - /> - </div> - <div> - <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"> - Confirm Password - </label> - <input - type="password" - className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" - /> - </div> - </div> - </div> - </div> - </div> - ); - - case 'notifications': - return ( - <div className="space-y-6"> - <div> - <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">Notification Preferences</h3> - <div className="space-y-4"> - {Object.entries(notifications).map(([key, value]) => ( - <div key={key} className="flex items-center justify-between"> - <div> - <h4 className="font-medium text-gray-900 dark:text-white capitalize"> - {key.replace(/([A-Z])/g, ' $1').trim()} - </h4> - <p className="text-sm text-gray-600 dark:text-gray-400"> - {key === 'email' && 'Receive notifications via email'} - {key === 'push' && 'Receive push notifications on your device'} - {key === 'studyReminders' && 'Get reminded about your study sessions'} - {key === 'quizResults' && 'Notifications when quiz results are available'} - {key === 'achievements' && 'Get notified when you unlock achievements'} - {key === 'weeklyReports' && 'Receive weekly progress reports'} - </p> - </div> - <button - onClick={() => handleNotificationChange(key, !value)} - className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${ - value ? 'bg-blue-600' : 'bg-gray-200 dark:bg-gray-700' - }`} - > - <span - className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${ - value ? 'translate-x-6' : 'translate-x-1' - }`} - /> - </button> - </div> - ))} - </div> - </div> - - <div> - <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">Notification Channels</h3> - <div className="grid grid-cols-1 md:grid-cols-2 gap-4"> - <div className="p-4 border border-gray-200 dark:border-gray-700 rounded-lg"> - <div className="flex items-center gap-3 mb-2"> - <Mail className="w-5 h-5 text-blue-600 dark:text-blue-400" /> - <h4 className="font-medium text-gray-900 dark:text-white">Email</h4> - </div> - <p className="text-sm text-gray-600 dark:text-gray-400 mb-3"> - alex.johnson@email.com - </p> - <button className="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 text-sm font-medium"> - Change Email - </button> - </div> - <div className="p-4 border border-gray-200 dark:border-gray-700 rounded-lg"> - <div className="flex items-center gap-3 mb-2"> - <Smartphone className="w-5 h-5 text-green-600 dark:text-green-400" /> - <h4 className="font-medium text-gray-900 dark:text-white">Push Notifications</h4> - </div> - <p className="text-sm text-gray-600 dark:text-gray-400 mb-3"> - Enabled on this device - </p> - <button className="text-green-600 dark:text-green-400 hover:text-green-700 dark:hover:text-green-300 text-sm font-medium"> - Manage Devices - </button> - </div> - </div> - </div> - </div> - ); - - case 'privacy': - return ( - <div className="space-y-6"> - <div> - <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">Privacy Settings</h3> - <div className="space-y-4"> - {Object.entries(privacy).map(([key, value]) => ( - <div key={key}> - <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 capitalize"> - {key.replace(/([A-Z])/g, ' $1').trim()} - </label> - <select - value={value} - onChange={(e) => handlePrivacyChange(key, e.target.value)} - className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white" - > - <option value="public">Public</option> - <option value="friends">Friends Only</option> - <option value="private">Private</option> - </select> - </div> - ))} - </div> - </div> - - <div> - <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">Security</h3> - <div className="space-y-4"> - <div className="p-4 border border-gray-200 dark:border-gray-700 rounded-lg"> - <div className="flex items-center justify-between"> - <div> - <h4 className="font-medium text-gray-900 dark:text-white">Two-Factor Authentication</h4> - <p className="text-sm text-gray-600 dark:text-gray-400"> - Add an extra layer of security to your account - </p> - </div> - <button className="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition-colors"> - Enable - </button> - </div> - </div> - <div className="p-4 border border-gray-200 dark:border-gray-700 rounded-lg"> - <div className="flex items-center justify-between"> - <div> - <h4 className="font-medium text-gray-900 dark:text-white">Login Sessions</h4> - <p className="text-sm text-gray-600 dark:text-gray-400"> - Manage your active login sessions - </p> - </div> - <button className="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-medium"> - View Sessions - </button> - </div> - </div> - </div> - </div> - </div> - ); - - case 'preferences': - return ( - <div className="space-y-6"> - <div> - <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">General Preferences</h3> - <div className="space-y-4"> - <div className="grid grid-cols-1 md:grid-cols-2 gap-4"> - <div> - <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"> - Language - </label> - <select - value={preferences.language} - onChange={(e) => handlePreferenceChange('language', e.target.value)} - className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white" - > - <option value="en">English</option> - <option value="es">Spanish</option> - <option value="fr">French</option> - <option value="de">German</option> - </select> - </div> - <div> - <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"> - Timezone - </label> - <select - value={preferences.timezone} - onChange={(e) => handlePreferenceChange('timezone', e.target.value)} - className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white" - > - <option value="UTC-8">Pacific Time (UTC-8)</option> - <option value="UTC-5">Eastern Time (UTC-5)</option> - <option value="UTC+0">GMT (UTC+0)</option> - <option value="UTC+1">Central European Time (UTC+1)</option> - </select> - </div> - </div> - - <div> - <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"> - Daily Study Goal (sessions) - </label> - <input - type="number" - min="1" - max="20" - value={preferences.dailyGoal} - onChange={(e) => handlePreferenceChange('dailyGoal', parseInt(e.target.value))} - className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" - /> - </div> - </div> - </div> - - <div> - <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">App Preferences</h3> - <div className="space-y-4"> - <div className="flex items-center justify-between"> - <div className="flex items-center gap-3"> - {isDark ? <Moon className="w-5 h-5" /> : <Sun className="w-5 h-5" />} - <div> - <h4 className="font-medium text-gray-900 dark:text-white">Dark Mode</h4> - <p className="text-sm text-gray-600 dark:text-gray-400"> - Use dark theme for better night studying - </p> - </div> - </div> - <button - onClick={() => handlePreferenceChange('darkMode', !preferences.darkMode)} - className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${ - preferences.darkMode ? 'bg-blue-600' : 'bg-gray-200 dark:bg-gray-700' - }`} - > - <span - className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${ - preferences.darkMode ? 'translate-x-6' : 'translate-x-1' - }`} - /> - </button> - </div> - - <div className="flex items-center justify-between"> - <div className="flex items-center gap-3"> - {preferences.soundEffects ? <Volume2 className="w-5 h-5" /> : <VolumeX className="w-5 h-5" />} - <div> - <h4 className="font-medium text-gray-900 dark:text-white">Sound Effects</h4> - <p className="text-sm text-gray-600 dark:text-gray-400"> - Play sounds for interactions and notifications - </p> - </div> - </div> - <button - onClick={() => handlePreferenceChange('soundEffects', !preferences.soundEffects)} - className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${ - preferences.soundEffects ? 'bg-blue-600' : 'bg-gray-200 dark:bg-gray-700' - }`} - > - <span - className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${ - preferences.soundEffects ? 'translate-x-6' : 'translate-x-1' - }`} - /> - </button> - </div> - - <div className="flex items-center justify-between"> - <div className="flex items-center gap-3"> - <Save className="w-5 h-5" /> - <div> - <h4 className="font-medium text-gray-900 dark:text-white">Auto-Save</h4> - <p className="text-sm text-gray-600 dark:text-gray-400"> - Automatically save your progress - </p> - </div> - </div> - <button - onClick={() => handlePreferenceChange('autoSave', !preferences.autoSave)} - className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${ - preferences.autoSave ? 'bg-blue-600' : 'bg-gray-200 dark:bg-gray-700' - }`} - > - <span - className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${ - preferences.autoSave ? 'translate-x-6' : 'translate-x-1' - }`} - /> - </button> - </div> - </div> - </div> - </div> - ); - - case 'data': - return ( - <div className="space-y-6"> - <div> - <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">Data Management</h3> - <div className="grid grid-cols-1 md:grid-cols-2 gap-4"> - <div className="p-4 border border-gray-200 dark:border-gray-700 rounded-lg"> - <h4 className="font-medium text-gray-900 dark:text-white mb-2">Export Data</h4> - <p className="text-sm text-gray-600 dark:text-gray-400 mb-3"> - Download all your study data, progress, and materials - </p> - <button className="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition-colors flex items-center gap-2"> - <Download className="w-4 h-4" /> - Export Data - </button> - </div> - <div className="p-4 border border-gray-200 dark:border-gray-700 rounded-lg"> - <h4 className="font-medium text-gray-900 dark:text-white mb-2">Storage Usage</h4> - <p className="text-sm text-gray-600 dark:text-gray-400 mb-3"> - You're using 2.4 GB of 10 GB available - </p> - <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 mb-3"> - <div className="bg-blue-500 h-2 rounded-full" style={{ width: '24%' }} /> - </div> - <button className="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-medium"> - Manage Storage - </button> - </div> - </div> - </div> - - <div> - <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">Backup & Sync</h3> - <div className="space-y-4"> - <div className="p-4 border border-gray-200 dark:border-gray-700 rounded-lg"> - <div className="flex items-center justify-between"> - <div> - <h4 className="font-medium text-gray-900 dark:text-white">Auto Backup</h4> - <p className="text-sm text-gray-600 dark:text-gray-400"> - Automatically backup your data to the cloud - </p> - </div> - <button className="relative inline-flex h-6 w-11 items-center rounded-full bg-blue-600"> - <span className="inline-block h-4 w-4 transform rounded-full bg-white translate-x-6" /> - </button> - </div> - </div> - <div className="p-4 border border-gray-200 dark:border-gray-700 rounded-lg"> - <div className="flex items-center justify-between"> - <div> - <h4 className="font-medium text-gray-900 dark:text-white">Last Backup</h4> - <p className="text-sm text-gray-600 dark:text-gray-400"> - June 28, 2025 at 3:45 PM - </p> - </div> - <button className="bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors flex items-center gap-2"> - <RefreshCw className="w-4 h-4" /> - Backup Now - </button> - </div> - </div> - </div> - </div> - - <div> - <h3 className="text-lg font-medium text-red-600 dark:text-red-400 mb-4">Danger Zone</h3> - <div className="p-4 border border-red-200 dark:border-red-700 rounded-lg bg-red-50 dark:bg-red-900/20"> - <h4 className="font-medium text-red-900 dark:text-red-100 mb-2">Delete Account</h4> - <p className="text-sm text-red-700 dark:text-red-300 mb-4"> - Permanently delete your account and all associated data. This action cannot be undone. - </p> - <button className="bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700 transition-colors flex items-center gap-2"> - <Trash2 className="w-4 h-4" /> - Delete Account - </button> - </div> - </div> - </div> - ); - - default: - return null; - } - }; - - return ( - <div className="p-6 space-y-6"> - {/* Header */} - <div className="flex items-center justify-between"> - <div> - <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Settings</h1> - <p className="text-gray-600 dark:text-gray-400 mt-1"> - Manage your account, preferences, and privacy settings - </p> - </div> - </div> - - <div className="grid grid-cols-1 lg:grid-cols-4 gap-6"> - {/* Sidebar */} - <div className="lg:col-span-1"> - <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden"> - {tabs.map((tab) => { - const Icon = tab.icon; - return ( - <button - key={tab.id} - onClick={() => setActiveTab(tab.id)} - className={`w-full flex items-center gap-3 px-4 py-3 text-left transition-colors ${ - activeTab === tab.id - ? 'bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 border-r-2 border-blue-500' - : 'text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700' - }`} - > - <Icon className="w-5 h-5" /> - <span className="font-medium">{tab.label}</span> - </button> - ); - })} - </div> - </div> - - {/* Content */} - <div className="lg:col-span-3"> - <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700"> - <motion.div - key={activeTab} - initial={{ opacity: 0, y: 20 }} - animate={{ opacity: 1, y: 0 }} - transition={{ duration: 0.2 }} - > - {renderTabContent()} - </motion.div> - - {/* Save Button */} - <div className="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700"> - <div className="flex justify-end gap-4"> - <button className="px-4 py-2 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors"> - Cancel - </button> - <button className="bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 transition-colors flex items-center gap-2"> - <Save className="w-4 h-4" /> - Save Changes - </button> - </div> - </div> - </div> - </div> - </div> - </div> - ); -}; - -export default Settings; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | import React from 'react'; -import { - Home, - BookOpen, - Brain, - BarChart3, - Upload, - Timer, - Trophy, - Settings, - GraduationCap, - FileText, - Search, - X, - Menu -} from 'lucide-react'; - -interface SidebarProps { - activeSection: string; - setActiveSection: (section: string) => void; - isOpen?: boolean; - onClose?: () => void; -} - -const Sidebar: React.FC<SidebarProps> = ({ activeSection, setActiveSection, isOpen = true, onClose }) => { - const menuItems = [ - { id: 'dashboard', label: 'Dashboard', icon: Home }, - { id: 'flashcards', label: 'Flashcards', icon: Brain }, - { id: 'quiz', label: 'Quizzes', icon: BookOpen }, - { id: 'upload', label: 'Upload', icon: Upload }, - { id: 'analytics', label: 'Analytics', icon: BarChart3 }, - { id: 'study-timer', label: 'Study Timer', icon: Timer }, - { id: 'achievements', label: 'Achievements', icon: Trophy }, - { id: 'materials', label: 'Materials', icon: FileText }, - { id: 'search', label: 'Search', icon: Search }, - { id: 'settings', label: 'Settings', icon: Settings }, - ]; - - const handleItemClick = (itemId: string) => { - setActiveSection(itemId); - if (onClose) { - onClose(); - } - }; - - return ( - <> - {/* Mobile Overlay */} - {isOpen && ( - <div - className="fixed inset-0 bg-black bg-opacity-50 z-40 lg:hidden" - onClick={onClose} - /> - )} - - {/* Sidebar */} - <div className={` - fixed lg:static inset-y-0 left-0 z-50 lg:z-auto - w-64 bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-700 - min-h-screen flex flex-col transform transition-transform duration-300 ease-in-out - ${isOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'} - `}> - {/* Logo */} - <div className="flex items-center justify-between gap-3 p-4 lg:p-6 border-b border-gray-200 dark:border-gray-700"> - <div className="flex items-center gap-3"> - <div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center"> - <GraduationCap className="w-5 h-5 text-white" /> - </div> - <span className="text-xl font-bold text-gray-900 dark:text-white">StudyMaster</span> - </div> - - {/* Close button for mobile */} - <button - onClick={onClose} - className="lg:hidden p-2 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg" - > - <X className="w-5 h-5" /> - </button> - </div> - - {/* Navigation */} - <nav className="flex-1 p-3 lg:p-4 space-y-1 lg:space-y-2 overflow-y-auto"> - {menuItems.map((item) => { - const Icon = item.icon; - const isActive = activeSection === item.id; - - return ( - <button - key={item.id} - onClick={() => handleItemClick(item.id)} - className={`w-full flex items-center gap-3 px-3 lg:px-4 py-3 rounded-lg text-left transition-all duration-200 touch-manipulation ${ - isActive - ? 'bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 border border-blue-200 dark:border-blue-700' - : 'text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-200' - }`} - > - <Icon className="w-5 h-5 flex-shrink-0" /> - <span className="font-medium truncate">{item.label}</span> - </button> - ); - })} - </nav> - - {/* Upgrade Section */} - <div className="p-3 lg:p-4 border-t border-gray-200 dark:border-gray-700"> - <div className="bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg p-4 text-white"> - <h3 className="font-semibold mb-2 text-sm lg:text-base">Upgrade to Pro</h3> - <p className="text-xs lg:text-sm text-blue-100 mb-3">Unlock advanced AI features and unlimited storage</p> - <button className="w-full bg-white text-blue-600 rounded-lg py-2 text-sm font-medium hover:bg-blue-50 transition-colors touch-manipulation"> - Upgrade Now - </button> - </div> - </div> - </div> - </> - ); -}; - -export default Sidebar; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 -210 -211 -212 -213 -214 -215 -216 -217 -218 -219 -220 -221 -222 -223 -224 -225 -226 -227 -228 -229 -230 -231 -232 -233 -234 -235 -236 -237 -238 -239 -240 -241 -242 -243 -244 -245 -246 -247 -248 -249 -250 -251 -252 -253 -254 -255 -256 -257 -258 -259 -260 -261 -262 -263 -264 -265 -266 -267 -268 -269 -270 -271 -272 -273 -274 -275 -276 -277 -278 -279 -280 -281 -282 -283 -284 -285 -286 -287 -288 -289 -290 -291 -292 -293 -294 -295 -296 -297 -298 -299 -300 -301 -302 -303 -304 -305 -306 -307 -308 -309 -310 -311 -312 -313 -314 -315 -316 -317 -318 -319 -320 -321 -322 -323 -324 -325 -326 -327 -328 -329 -330 -331 -332 -333 -334 -335 -336 -337 -338 -339 -340 -341 -342 -343 -344 -345 -346 -347 -348 -349 -350 -351 -352 -353 -354 -355 -356 -357 -358 -359 -360 -361 -362 -363 -364 -365 -366 -367 -368 -369 -370 -371 -372 -373 -374 -375 -376 -377 -378 -379 -380 -381 -382 -383 -384 -385 -386 -387 -388 -389 -390 -391 -392 -393 -394 -395 -396 -397 -398 -399 -400 -401 -402 -403 -404 -405 -406 -407 -408 -409 -410 -411 -412 -413 -414 -415 -416 -417 -418 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | import React, { useState, useEffect, useRef } from 'react'; -import { motion, AnimatePresence } from 'framer-motion'; -import { - Play, - Pause, - RotateCcw, - Clock, - Coffee, - Brain, - Target, - Settings, - Volume2, - VolumeX, - Bell, - CheckCircle -} from 'lucide-react'; - -interface Session { - type: 'focus' | 'break' | 'longBreak'; - duration: number; - completed: boolean; -} - -const StudyTimer: React.FC = () => { - const [timeLeft, setTimeLeft] = useState(25 * 60); // 25 minutes in seconds - const [isRunning, setIsRunning] = useState(false); - const [currentSession, setCurrentSession] = useState<'focus' | 'break' | 'longBreak'>('focus'); - const [sessionsCompleted, setSessionsCompleted] = useState(0); - const [customDurations, setCustomDurations] = useState({ - focus: 25, - shortBreak: 5, - longBreak: 15 - }); - const [soundEnabled, setSoundEnabled] = useState(true); - const [showSettings, setShowSettings] = useState(false); - const [dailyGoal, setDailyGoal] = useState(8); // sessions - const [totalStudyTime, setTotalStudyTime] = useState(0); - const [currentStreak, setCurrentStreak] = useState(0); - - const intervalRef = useRef<NodeJS.Timeout | null>(null); - const audioRef = useRef<HTMLAudioElement | null>(null); - - const sessions: Session[] = [ - { type: 'focus', duration: customDurations.focus * 60, completed: false }, - { type: 'break', duration: customDurations.shortBreak * 60, completed: false }, - { type: 'focus', duration: customDurations.focus * 60, completed: false }, - { type: 'break', duration: customDurations.shortBreak * 60, completed: false }, - { type: 'focus', duration: customDurations.focus * 60, completed: false }, - { type: 'break', duration: customDurations.shortBreak * 60, completed: false }, - { type: 'focus', duration: customDurations.focus * 60, completed: false }, - { type: 'longBreak', duration: customDurations.longBreak * 60, completed: false }, - ]; - - useEffect(() => { - if (isRunning && timeLeft > 0) { - intervalRef.current = setInterval(() => { - setTimeLeft(prev => { - if (prev <= 1) { - handleSessionComplete(); - return 0; - } - return prev - 1; - }); - }, 1000); - } else if (intervalRef.current) { - clearInterval(intervalRef.current); - } - - return () => { - if (intervalRef.current) { - clearInterval(intervalRef.current); - } - }; - }, [isRunning, timeLeft]); - - const handleSessionComplete = () => { - setIsRunning(false); - if (soundEnabled && audioRef.current) { - audioRef.current.play(); - } - - if (currentSession === 'focus') { - setSessionsCompleted(prev => prev + 1); - setTotalStudyTime(prev => prev + customDurations.focus); - setCurrentStreak(prev => prev + 1); - } - - // Auto-advance to next session - const nextSessionIndex = sessionsCompleted % sessions.length; - const nextSession = sessions[nextSessionIndex]; - setCurrentSession(nextSession.type); - setTimeLeft(nextSession.duration); - }; - - const toggleTimer = () => { - setIsRunning(prev => !prev); - }; - - const resetTimer = () => { - setIsRunning(false); - const sessionDuration = currentSession === 'focus' - ? customDurations.focus * 60 - : currentSession === 'break' - ? customDurations.shortBreak * 60 - : customDurations.longBreak * 60; - setTimeLeft(sessionDuration); - }; - - const formatTime = (seconds: number) => { - const mins = Math.floor(seconds / 60); - const secs = seconds % 60; - return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`; - }; - - const getProgress = () => { - const totalDuration = currentSession === 'focus' - ? customDurations.focus * 60 - : currentSession === 'break' - ? customDurations.shortBreak * 60 - : customDurations.longBreak * 60; - return ((totalDuration - timeLeft) / totalDuration) * 100; - }; - - const getSessionColor = () => { - switch (currentSession) { - case 'focus': return 'from-blue-500 to-purple-600'; - case 'break': return 'from-green-500 to-blue-500'; - case 'longBreak': return 'from-orange-500 to-red-500'; - default: return 'from-blue-500 to-purple-600'; - } - }; - - const getSessionIcon = () => { - switch (currentSession) { - case 'focus': return <Brain className="w-8 h-8" />; - case 'break': return <Coffee className="w-8 h-8" />; - case 'longBreak': return <Coffee className="w-8 h-8" />; - default: return <Brain className="w-8 h-8" />; - } - }; - - const handleDurationChange = (type: keyof typeof customDurations, value: number) => { - setCustomDurations(prev => ({ ...prev, [type]: value })); - if (type === 'focus' && currentSession === 'focus') { - setTimeLeft(value * 60); - } else if (type === 'shortBreak' && currentSession === 'break') { - setTimeLeft(value * 60); - } else if (type === 'longBreak' && currentSession === 'longBreak') { - setTimeLeft(value * 60); - } - }; - - return ( - <div className="p-6 space-y-6"> - {/* Header */} - <div className="flex items-center justify-between"> - <div> - <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Focus Timer</h1> - <p className="text-gray-600 dark:text-gray-400 mt-1"> - Use the Pomodoro Technique to boost your productivity - </p> - </div> - <button - onClick={() => setShowSettings(!showSettings)} - className="p-2 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors" - > - <Settings className="w-5 h-5" /> - </button> - </div> - - {/* Settings Panel */} - <AnimatePresence> - {showSettings && ( - <motion.div - initial={{ opacity: 0, height: 0 }} - animate={{ opacity: 1, height: 'auto' }} - exit={{ opacity: 0, height: 0 }} - className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700" - > - <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Timer Settings</h3> - <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4"> - <div> - <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"> - Focus Duration (minutes) - </label> - <input - type="number" - min="1" - max="60" - value={customDurations.focus} - onChange={(e) => handleDurationChange('focus', parseInt(e.target.value) || 25)} - className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" - /> - </div> - <div> - <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"> - Short Break (minutes) - </label> - <input - type="number" - min="1" - max="30" - value={customDurations.shortBreak} - onChange={(e) => handleDurationChange('shortBreak', parseInt(e.target.value) || 5)} - className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" - /> - </div> - <div> - <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"> - Long Break (minutes) - </label> - <input - type="number" - min="1" - max="60" - value={customDurations.longBreak} - onChange={(e) => handleDurationChange('longBreak', parseInt(e.target.value) || 15)} - className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" - /> - </div> - </div> - <div className="flex items-center justify-between"> - <div className="flex items-center gap-2"> - <button - onClick={() => setSoundEnabled(!soundEnabled)} - className="flex items-center gap-2 text-gray-600 dark:text-gray-400" - > - {soundEnabled ? <Volume2 className="w-4 h-4" /> : <VolumeX className="w-4 h-4" />} - <span className="text-sm">Sound Notifications</span> - </button> - </div> - <div className="flex items-center gap-2"> - <label className="text-sm text-gray-700 dark:text-gray-300">Daily Goal:</label> - <input - type="number" - min="1" - max="20" - value={dailyGoal} - onChange={(e) => setDailyGoal(parseInt(e.target.value) || 8)} - className="w-16 px-2 py-1 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-sm" - /> - <span className="text-sm text-gray-700 dark:text-gray-300">sessions</span> - </div> - </div> - </motion.div> - )} - </AnimatePresence> - - {/* Main Timer */} - <div className="flex justify-center"> - <div className="relative"> - {/* Progress Ring */} - <svg className="w-80 h-80 transform -rotate-90" viewBox="0 0 320 320"> - <circle - cx="160" - cy="160" - r="140" - stroke="currentColor" - strokeWidth="8" - fill="transparent" - className="text-gray-200 dark:text-gray-700" - /> - <circle - cx="160" - cy="160" - r="140" - stroke="url(#gradient)" - strokeWidth="8" - fill="transparent" - strokeDasharray={`${2 * Math.PI * 140}`} - strokeDashoffset={`${2 * Math.PI * 140 * (1 - getProgress() / 100)}`} - className="transition-all duration-1000 ease-in-out" - strokeLinecap="round" - /> - <defs> - <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%"> - <stop offset="0%" stopColor={currentSession === 'focus' ? '#3B82F6' : currentSession === 'break' ? '#10B981' : '#F59E0B'} /> - <stop offset="100%" stopColor={currentSession === 'focus' ? '#8B5CF6' : currentSession === 'break' ? '#3B82F6' : '#EF4444'} /> - </linearGradient> - </defs> - </svg> - - {/* Timer Content */} - <div className="absolute inset-0 flex flex-col items-center justify-center"> - <motion.div - key={currentSession} - initial={{ scale: 0.8, opacity: 0 }} - animate={{ scale: 1, opacity: 1 }} - className={`w-16 h-16 bg-gradient-to-r ${getSessionColor()} rounded-full flex items-center justify-center text-white mb-4`} - > - {getSessionIcon()} - </motion.div> - - <div className="text-5xl font-mono font-bold text-gray-900 dark:text-white mb-2"> - {formatTime(timeLeft)} - </div> - - <div className="text-lg font-medium text-gray-600 dark:text-gray-400 mb-6"> - {currentSession === 'focus' ? 'Focus Time' : - currentSession === 'break' ? 'Short Break' : 'Long Break'} - </div> - - <div className="flex gap-4"> - <button - onClick={toggleTimer} - className={`w-16 h-16 bg-gradient-to-r ${getSessionColor()} text-white rounded-full flex items-center justify-center hover:scale-105 transition-transform duration-200 shadow-lg`} - > - {isRunning ? <Pause className="w-6 h-6" /> : <Play className="w-6 h-6 ml-1" />} - </button> - - <button - onClick={resetTimer} - className="w-16 h-16 bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400 rounded-full flex items-center justify-center hover:scale-105 transition-transform duration-200" - > - <RotateCcw className="w-6 h-6" /> - </button> - </div> - </div> - </div> - </div> - - {/* Session Progress */} - <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700"> - <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Today's Progress</h3> - - <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6"> - <div className="text-center p-4 bg-blue-50 dark:bg-blue-900/30 rounded-lg"> - <div className="text-2xl font-bold text-blue-600 dark:text-blue-400">{sessionsCompleted}</div> - <div className="text-sm text-gray-600 dark:text-gray-400">Sessions Completed</div> - </div> - <div className="text-center p-4 bg-green-50 dark:bg-green-900/30 rounded-lg"> - <div className="text-2xl font-bold text-green-600 dark:text-green-400">{Math.floor(totalStudyTime / 60)}h {totalStudyTime % 60}m</div> - <div className="text-sm text-gray-600 dark:text-gray-400">Study Time</div> - </div> - <div className="text-center p-4 bg-purple-50 dark:bg-purple-900/30 rounded-lg"> - <div className="text-2xl font-bold text-purple-600 dark:text-purple-400">{currentStreak}</div> - <div className="text-sm text-gray-600 dark:text-gray-400">Current Streak</div> - </div> - <div className="text-center p-4 bg-orange-50 dark:bg-orange-900/30 rounded-lg"> - <div className="text-2xl font-bold text-orange-600 dark:text-orange-400">{Math.round((sessionsCompleted / dailyGoal) * 100)}%</div> - <div className="text-sm text-gray-600 dark:text-gray-400">Daily Goal</div> - </div> - </div> - - {/* Session Timeline */} - <div className="flex items-center gap-2 mb-4"> - <span className="text-sm font-medium text-gray-700 dark:text-gray-300">Session Timeline:</span> - </div> - <div className="flex gap-2"> - {sessions.map((session, index) => ( - <div - key={index} - className={`flex-1 h-3 rounded-full ${ - index < sessionsCompleted - ? session.type === 'focus' - ? 'bg-blue-500' - : 'bg-green-500' - : index === sessionsCompleted - ? session.type === 'focus' - ? 'bg-blue-300' - : 'bg-green-300' - : 'bg-gray-200 dark:bg-gray-700' - }`} - /> - ))} - </div> - <div className="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-2"> - <span>Focus</span> - <span>Break</span> - <span>Focus</span> - <span>Break</span> - <span>Focus</span> - <span>Break</span> - <span>Focus</span> - <span>Long Break</span> - </div> - </div> - - {/* Tips */} - <div className="bg-gradient-to-r from-indigo-500 to-purple-600 rounded-xl p-6 text-white"> - <h3 className="text-lg font-semibold mb-4 flex items-center gap-2"> - <Target className="w-5 h-5" /> - Pomodoro Tips - </h3> - <div className="grid grid-cols-1 md:grid-cols-3 gap-4"> - <div> - <h4 className="font-medium mb-1">Stay Focused</h4> - <p className="text-sm text-indigo-100"> - During focus sessions, avoid all distractions. Put your phone away and close unnecessary tabs. - </p> - </div> - <div> - <h4 className="font-medium mb-1">Take Real Breaks</h4> - <p className="text-sm text-indigo-100"> - Use break time to rest your mind. Stand up, stretch, or take a short walk. - </p> - </div> - <div> - <h4 className="font-medium mb-1">Track Progress</h4> - <p className="text-sm text-indigo-100"> - Review your daily sessions to identify patterns and optimize your study schedule. - </p> - </div> - </div> - </div> - - {/* Hidden audio element for notifications */} - <audio - ref={audioRef} - preload="auto" - > - <source src="data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQoGAACBhYqFbF1fdJivrJBhNjVgodDbq2EcBj+a2/LDciUFLIHO8tiJNwgZaLvt559NEAxQp+PwtmMcBjiR1/LMeSwFJHfH8N2QQAoUXrTp66hVFApGn+DyvmwhJGZBnp2Q4K2Ae3w=" type="audio/wav" /> - </audio> - </div> - ); -}; - -export default StudyTimer; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| AIChat.tsx | -
-
- |
- 0% | -0/276 | -0% | -0/1 | -0% | -0/1 | -0% | -0/276 | -
| Achievements.tsx | -
-
- |
- 0% | -0/409 | -0% | -0/1 | -0% | -0/1 | -0% | -0/409 | -
| Analytics.tsx | -
-
- |
- 0% | -0/360 | -0% | -0/1 | -0% | -0/1 | -0% | -0/360 | -
| Dashboard.tsx | -
-
- |
- 0% | -0/201 | -0% | -0/1 | -0% | -0/1 | -0% | -0/201 | -
| FileUpload.tsx | -
-
- |
- 0% | -0/203 | -0% | -0/1 | -0% | -0/1 | -0% | -0/203 | -
| Flashcards.tsx | -
-
- |
- 0% | -0/217 | -0% | -0/1 | -0% | -0/1 | -0% | -0/217 | -
| Header.tsx | -
-
- |
- 0% | -0/86 | -0% | -0/1 | -0% | -0/1 | -0% | -0/86 | -
| Materials.tsx | -
-
- |
- 0% | -0/496 | -0% | -0/1 | -0% | -0/1 | -0% | -0/496 | -
| Quiz.tsx | -
-
- |
- 0% | -0/556 | -0% | -0/1 | -0% | -0/1 | -0% | -0/556 | -
| SearchResults.tsx | -
-
- |
- 0% | -0/385 | -0% | -0/1 | -0% | -0/1 | -0% | -0/385 | -
| Settings.tsx | -
-
- |
- 0% | -0/608 | -0% | -0/1 | -0% | -0/1 | -0% | -0/608 | -
| Sidebar.tsx | -
-
- |
- 0% | -0/119 | -0% | -0/1 | -0% | -0/1 | -0% | -0/119 | -
| StudyTimer.tsx | -
-
- |
- 0% | -0/418 | -0% | -0/1 | -0% | -0/1 | -0% | -0/418 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 | 1x -1x -1x -1x -1x -1x -1x -1x -1x -1x - - - - - - -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x - -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x | import React, { createContext, useContext, useState, useEffect } from 'react';
-
-interface ThemeContextType {
- isDark: boolean;
- toggleTheme: () => void;
-}
-
-const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
-
-export const useTheme = () => {
- const context = useContext(ThemeContext);
- if (!context) {
- throw new Error('useTheme must be used within a ThemeProvider');
- }
- return context;
-};
-
-export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
- const [isDark, setIsDark] = useState(() => {
- const saved = localStorage.getItem('theme');
- return saved ? saved === 'dark' : false;
- });
-
- useEffect(() => {
- localStorage.setItem('theme', isDark ? 'dark' : 'light');
- if (isDark) {
- document.documentElement.classList.add('dark');
- } else {
- document.documentElement.classList.remove('dark');
- }
- }, [isDark]);
-
- const toggleTheme = () => setIsDark(!isDark);
-
- return (
- <ThemeContext.Provider value={{ isDark, toggleTheme }}>
- {children}
- </ThemeContext.Provider>
- );
-}; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| ThemeContext.tsx | -
-
- |
- 82.5% | -33/40 | -50% | -3/6 | -33.33% | -1/3 | -82.5% | -33/40 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| sampleData.ts | -
-
- |
- 0% | -0/122 | -0% | -0/1 | -0% | -0/1 | -0% | -0/122 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | // Sample flashcards data -export const flashcardsData = { - "decks": [ - { - "subject": "Psychology", - "cards": [ - { - "front": "What is cognitive dissonance?", - "back": "Mental discomfort from conflicting beliefs" - }, - { - "front": "Define operant conditioning", - "back": "Learning through rewards and punishments" - }, - { - "front": "What is the amygdala?", - "back": "Brain region that processes emotions and fear" - }, - { - "front": "What does the prefrontal cortex do?", - "back": "Involved in decision-making and self-control" - }, - { - "front": "Define classical conditioning", - "back": "Learning through association between stimuli" - } - ] - }, - { - "subject": "Biology", - "cards": [ - { - "front": "What is mitosis?", - "back": "Cell division creating identical diploid cells" - }, - { - "front": "Define photosynthesis", - "back": "Process plants use to convert light into energy" - }, - { - "front": "What is DNA?", - "back": "Genetic material containing hereditary information" - }, - { - "front": "What is the function of mitochondria?", - "back": "Produces energy through cellular respiration" - }, - { - "front": "Define osmosis", - "back": "Movement of water across a semi-permeable membrane" - } - ] - }, - { - "subject": "History", - "cards": [ - { - "front": "Who was the first President of the United States?", - "back": "George Washington" - }, - { - "front": "What triggered World War I?", - "back": "The assassination of Archduke Franz Ferdinand" - }, - { - "front": "When did India gain independence?", - "back": "August 15, 1947" - }, - { - "front": "What was the Cold War?", - "back": "Period of political tension between the US and USSR" - }, - { - "front": "Who was Napoleon Bonaparte?", - "back": "French military leader who rose to power after the French Revolution" - } - ] - } - ] -}; - -// Sample quiz results data -export const quizResultsData = [ - { date: "28-06-2025", subject: "Psychology", score: 92, timeTaken: 8.5, questionsTotal: 10, questionsCorrect: 9 }, - { date: "27-06-2025", subject: "Biology", score: 87, timeTaken: 12.3, questionsTotal: 15, questionsCorrect: 13 }, - { date: "26-06-2025", subject: "History", score: 95, timeTaken: 6.2, questionsTotal: 8, questionsCorrect: 8 }, - { date: "25-06-2025", subject: "Psychology", score: 83, timeTaken: 9.1, questionsTotal: 12, questionsCorrect: 10 }, - { date: "24-06-2025", subject: "Biology", score: 91, timeTaken: 10.8, questionsTotal: 11, questionsCorrect: 10 } -]; - -// Sample study progress data -export const studyProgressData = { - "user": { - "name": "Alex Johnson", - "studyStreak": 15, - "totalStudyHours": 67, - "cardsReviewed": 342, - "quizzesTaken": 28, - "averageScore": 88.5, - "level": 7, - "xpPoints": 2450 - }, - "subjects": [ - {"name": "Psychology", "progress": 75, "lastStudied": "2025-06-27"}, - {"name": "Biology", "progress": 62, "lastStudied": "2025-06-26"}, - {"name": "History", "progress": 89, "lastStudied": "2025-06-28"} - ], - "achievements": [ - {"name": "Study Streak Master", "unlocked": true}, - {"name": "Quiz Champion", "unlocked": true}, - {"name": "Flashcard Expert", "unlocked": false} - ] -}; - -// Sample AI responses for chat -export const aiResponses = [ - "I'd be happy to help you with that concept. Can you tell me more about what specific aspect you're struggling with?", - "That's a great question! Let me break this down into simpler terms for you.", - "Based on your recent study sessions, I notice you might benefit from reviewing this topic again.", - "Excellent work! You're showing great progress in this subject area.", - "I recommend focusing on the key concepts we discussed earlier. Would you like me to create some practice questions?" -]; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 | - - - - - - - - - - | import { StrictMode } from 'react'; -import { createRoot } from 'react-dom/client'; -import App from './App.tsx'; -import './index.css'; - -createRoot(document.getElementById('root')!).render( - <StrictMode> - <App /> - </StrictMode> -); - |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 | - - - - - - - - - - - - - - - - - - - - - - - - | /** @type {import('tailwindcss').Config} */ -export default { - content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], - darkMode: 'class', - theme: { - extend: { - screens: { - 'xs': '475px', - }, - spacing: { - 'safe-top': 'env(safe-area-inset-top)', - 'safe-bottom': 'env(safe-area-inset-bottom)', - 'safe-left': 'env(safe-area-inset-left)', - 'safe-right': 'env(safe-area-inset-right)', - }, - minHeight: { - 'screen-safe': 'calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom))', - }, - maxHeight: { - 'screen-safe': 'calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom))', - }, - }, - }, - plugins: [], -}; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| StudyMaster | -
-
- |
- 0% | -0/55 | -0% | -0/3 | -0% | -0/3 | -0% | -0/55 | -
| StudyMaster/src | -
-
- |
- 0% | -0/88 | -0% | -0/2 | -0% | -0/2 | -0% | -0/88 | -
| StudyMaster/src/components | -
-
- |
- 0% | -0/4334 | -0% | -0/13 | -0% | -0/13 | -0% | -0/4334 | -
| StudyMaster/src/contexts | -
-
- |
- 82.5% | -33/40 | -50% | -3/6 | -33.33% | -1/3 | -82.5% | -33/40 | -
| StudyMaster/src/data | -
-
- |
- 0% | -0/122 | -0% | -0/1 | -0% | -0/1 | -0% | -0/122 | -