[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import { ThemeProvider } from "@/components/theme-provider" import { Toaster } from "@/components/ui/toaster" import { cn } from "@/lib/utils" import "@/app/globals.css" import type { Metadata } from "next" import { Inter } from "next/font/google" import { AuthProvider } from "@/components/auth-provider" import { APP_CONFIG } from "./config" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: { default: APP_CONFIG.name, template: `%s | ${APP_CONFIG.name}`, }, description: APP_CONFIG.description, keywords: ["education", "study", "learning", "students", "teachers", "timetable", "notes", "flashcards"], authors: [{ name: "BrainWave Team" }], creator: "BrainWave Team", themeColor: APP_CONFIG.themeColor, openGraph: { type: "website", locale: "en_US", url: APP_CONFIG.url, title: APP_CONFIG.name, description: APP_CONFIG.description, siteName: APP_CONFIG.name, images: [{ url: APP_CONFIG.ogImage }], }, twitter: { card: "summary_large_image", title: APP_CONFIG.name, description: APP_CONFIG.description, images: [APP_CONFIG.ogImage], }, icons: { icon: "/favicon.ico", shortcut: "/favicon-16x16.png", apple: "/apple-touch-icon.png", }, manifest: "/site.webmanifest", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/sidebar.tsx" isMerged="true" "use client" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import Link from "next/link" import { usePathname } from "next/navigation" import { Home, Calendar, BookOpen, Users, FileText, Clock, Settings, MessageSquare, Award, Bookmark, Activity, Layers, Bell, } from "lucide-react" const navItems = [ { name: "Dashboard", href: "/dashboard", icon: Home }, { name: "Timetable", href: "/timetable", icon: Calendar }, { name: "Classes", href: "/classes", icon: BookOpen }, { name: "Study Groups", href: "/study-groups", icon: Users }, { name: "Notes", href: "/notes", icon: FileText }, { name: "Tasks", href: "/tasks", icon: Bookmark }, { name: "Study Timer", href: "/timer", icon: Clock }, { name: "Flashcards", href: "/flashcards", icon: Layers }, { name: "Chats", href: "/chats", icon: MessageSquare }, { name: "Achievements", href: "/achievements", icon: Award }, { name: "Activities", href: "/activities", icon: Activity }, { name: "Announcements", href: "/announcements", icon: Bell }, { name: "Settings", href: "/settings", icon: Settings }, ] export default function Sidebar() { const pathname = usePathname() return (

StudySync

Need help?

Check our documentation or contact support

) } [V0_FILE]typescriptreact:file="components/header.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Bell, Moon, Search, Sun } from "lucide-react" import { useTheme } from "next-themes" import { Input } from "@/components/ui/input" import { useAuth } from "@/components/auth-provider" export default function Header() { const { theme, setTheme } = useTheme() const { user, logout } = useAuth() const [searchOpen, setSearchOpen] = useState(false) return (

{searchOpen ? (

setSearchOpen(false)} />

) : ( )} My Account Profile Settings Log out

) } [V0_FILE]typescriptreact:file="components/timetable-preview.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Skeleton } from "@/components/ui/skeleton" import { MoreHorizontal, ChevronRight, MapPin, Clock, User } from "lucide-react" import Link from "next/link" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" // Mock data for classes const mockClasses = [ { id: 1, subject: "Mathematics", room: "Room 101", teacher: "Mr. Johnson", startTime: "08:30", endTime: "09:30", color: "bg-blue-500", status: "upcoming", }, { id: 2, subject: "English Literature", room: "Room 203", teacher: "Ms. Williams", startTime: "09:45", endTime: "10:45", color: "bg-pink-500", status: "current", }, { id: 3, subject: "Physics", room: "Lab 3", teacher: "Dr. Smith", startTime: "11:00", endTime: "12:00", color: "bg-purple-500", status: "upcoming", }, { id: 4, subject: "Lunch Break", room: "Cafeteria", teacher: "", startTime: "12:00", endTime: "13:00", color: "bg-yellow-500", status: "upcoming", }, { id: 5, subject: "History", room: "Room 105", teacher: "Mrs. Davis", startTime: "13:15", endTime: "14:15", color: "bg-green-500", status: "upcoming", }, ] interface TimetablePreviewProps { isLoading?: boolean expanded?: boolean } export function TimetablePreview({ isLoading = false, expanded = false }: TimetablePreviewProps) { const [classes, setClasses] = useState(mockClasses) const [currentTime, setCurrentTime] = useState(new Date()) // Update current time every minute useEffect(() => { const interval = setInterval(() => { setCurrentTime(new Date()) // Update class statuses based on current time const updatedClasses = classes.map((cls) => { const now = new Date() const [startHour, startMinute] = cls.startTime.split(":").map(Number) const [endHour, endMinute] = cls.endTime.split(":").map(Number) const startDate = new Date(now) startDate.setHours(startHour, startMinute, 0) const endDate = new Date(now) endDate.setHours(endHour, endMinute, 0) let status = "upcoming" if (now >= startDate && now < endDate) { status = "current" } else if (now >= endDate) { status = "completed" } return { ...cls, status } }) setClasses(updatedClasses) }, 60000) return () => clearInterval(interval) }, [classes]) // Format time to 12-hour format const formatTime = (time: string) => { const [hour, minute] = time.split(":").map(Number) const period = hour >= 12 ? "PM" : "AM" const hour12 = hour % 12 || 12 return `${hour12}:${minute.toString().padStart(2, "0")} ${period}` } // Get status badge const getStatusBadge = (status: string) => { switch (status) { case "current": return ( Current ) case "completed": return ( Completed ) default: return Upcoming } } if (isLoading) { return (

{Array.from({ length: 3 }).map((_, i) => (

))}

) } // Filter classes based on expanded prop const displayClasses = expanded ? classes : classes.slice(0, 3) return (

{displayClasses.map((cls) => (

{cls.subject.substring(0, 2)}

{cls.subject}

{getStatusBadge(cls.status)}

{formatTime(cls.startTime)} - {formatTime(cls.endTime)}

{cls.room}

{cls.teacher && (

{cls.teacher}

)}

Options View details Add to calendar Set reminder View class details

))} {!expanded && classes.length > 3 && ( )}

) } [V0_FILE]typescriptreact:file="components/upcoming-tasks.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Checkbox } from "@/components/ui/checkbox" import { Skeleton } from "@/components/ui/skeleton" import { Badge } from "@/components/ui/badge" import { MoreHorizontal, ChevronRight, Calendar } from "lucide-react" import Link from "next/link" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { toast } from "@/components/ui/use-toast" // Mock data for tasks const mockTasks = [ { id: 1, title: "Math Assignment - Chapter 5", subject: "Mathematics", dueDate: "2025-03-12T23:59:00", priority: "high", completed: false, color: "bg-blue-500", }, { id: 2, title: "English Essay - Shakespeare Analysis", subject: "English Literature", dueDate: "2025-03-15T23:59:00", priority: "medium", completed: false, color: "bg-pink-500", }, { id: 3, title: "Physics Lab Report", subject: "Physics", dueDate: "2025-03-18T12:00:00", priority: "high", completed: false, color: "bg-purple-500", }, { id: 4, title: "History Presentation - Industrial Revolution", subject: "History", dueDate: "2025-03-20T14:15:00", priority: "medium", completed: false, color: "bg-green-500", }, { id: 5, title: "Computer Science Project - Algorithm Implementation", subject: "Computer Science", dueDate: "2025-03-25T23:59:00", priority: "low", completed: false, color: "bg-indigo-500", }, ] interface UpcomingTasksProps { isLoading?: boolean expanded?: boolean } export function UpcomingTasks({ isLoading = false, expanded = false }: UpcomingTasksProps) { const [tasks, setTasks] = useState(mockTasks) // Format date const formatDate = (dateString: string) => { const date = new Date(dateString) const now = new Date() const tomorrow = new Date(now) tomorrow.setDate(tomorrow.getDate() + 1) // Check if date is today if (date.toDateString() === now.toDateString()) { return `Today, ${date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}` } // Check if date is tomorrow if (date.toDateString() === tomorrow.toDateString()) { return `Tomorrow, ${date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}` } // Otherwise, return full date return date.toLocaleDateString([], { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit", }) } // Get days remaining const getDaysRemaining = (dateString: string) => { const dueDate = new Date(dateString) const now = new Date() // Set time to midnight for accurate day calculation dueDate.setHours(0, 0, 0, 0) const today = new Date(now) today.setHours(0, 0, 0, 0) const diffTime = dueDate.getTime() - today.getTime() const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) if (diffDays === 0) return "Due today" if (diffDays === 1) return "Due tomorrow" if (diffDays < 0) return `Overdue by ${Math.abs(diffDays)} days` return `Due in ${diffDays} days` } // Get priority badge const getPriorityBadge = (priority: string) => { switch (priority) { case "high": return High case "medium": return ( Medium ) default: return Low } } // Toggle task completion const toggleTaskCompletion = (id: number) => { setTasks(tasks.map((task) => (task.id === id ? { ...task, completed: !task.completed } : task))) const task = tasks.find((t) => t.id === id) if (task) { if (!task.completed) { toast({ title: "Task completed", description: `You've completed "${task.title}"`, }) } } } if (isLoading) { return (

{Array.from({ length: 3 }).map((_, i) => (

))}

) } // Filter tasks based on expanded prop const displayTasks = expanded ? tasks : tasks.slice(0, 3) return (

{displayTasks.map((task) => (

toggleTaskCompletion(task.id)} className="data-[state=checked]:bg-green-500 data-[state=checked]:border-green-500" />

{task.title}

{task.subject}

{getDaysRemaining(task.dueDate)}

{getPriorityBadge(task.priority)}

Options Edit task Set reminder Delete task

))} {!expanded && tasks.length > 3 && ( )}

) } [V0_FILE]typescriptreact:file="app/(auth)/register/page.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import Link from "next/link" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Eye, EyeOff, Brain } from "lucide-react" import { APP_CONFIG } from "@/app/config" export default function RegisterPage() { const router = useRouter() const [showPassword, setShowPassword] = useState(false) const [isLoading, setIsLoading] = useState(false) const [formData, setFormData] = useState({ firstName: "", lastName: "", email: "", password: "", userType: "", }) const handleChange = (e: React.ChangeEvent) => { const { id, value } = e.target setFormData((prev) => ({ ...prev, [id]: value })) } const handleRegister = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) // Simulate registration process await new Promise((resolve) => setTimeout(resolve, 1500)) // Redirect to onboarding after successful registration router.push("/onboarding") } return (

{/* Fun animated background elements */}

{APP_CONFIG.name}

Create an account Enter your information to get started

First name

Last name

Password

I am a

Already have an account?{" "} Sign in

) } [V0_FILE]typescriptreact:file="app/onboarding/page.tsx" isMerged="true" "use client" import { useState } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Switch } from "@/components/ui/switch" import { ArrowRight, Upload } from "lucide-react" export default function OnboardingPage() { const router = useRouter() const [step, setStep] = useState(1) const [isLoading, setIsLoading] = useState(false) const handleNext = async () => { if (step < 4) { setStep(step + 1) } else { setIsLoading(true) // Simulate completion process await new Promise((resolve) => setTimeout(resolve, 1500)) router.push("/dashboard") } } return (

Welcome to StudySync Let's set up your account in a few simple steps

{[1, 2, 3, 4].map((i) => (

{i < step ? "✓" : i}

))}

{step === 1 && (

Basic Information

School Name

Year Level

Profile Picture

)} {step === 2 && (

Timetable Setup

Manual Entry Import

Homeroom

Homeroom Teacher

Period 1

Period 2

Period 3

Period 4

Period 5

Period 6

Upload your timetable

Drag and drop your timetable file or click to browse

Supported formats: CSV, Excel, or PDF

)} {step === 3 && (

Calendar Integration

Google Calendar

Sync your timetable with Google Calendar

Sync Classes

Automatically add your classes to your calendar

Sync Assignments

Automatically add your assignments to your calendar

Sync Exams

Automatically add your exams to your calendar

)} {step === 4 && (

Privacy Settings

Show Email

Allow other users to see your email address

Show Classes

Allow other users to see your classes

Show Grades

Allow other users to see your grades

Allow Messages

Allow other users to send you messages

Allow Group Invites

Allow other users to invite you to study groups

)}

) } [V0_FILE]typescriptreact:file="app/flashcards/page.tsx" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Textarea } from "@/components/ui/textarea" import { ChevronLeft, ChevronRight, Plus, Trash, Edit, RotateCw } from "lucide-react" // Mock data for flashcard decks const mockDecks = [ { id: 1, title: "Mathematics Formulas", description: "Key formulas for calculus and algebra", cardCount: 24, lastStudied: "2 days ago", subject: "Mathematics", }, { id: 2, title: "Biology Terms", description: "Important biology terminology", cardCount: 36, lastStudied: "1 week ago", subject: "Science", }, { id: 3, title: "Historical Dates", description: "Key dates in world history", cardCount: 18, lastStudied: "3 days ago", subject: "History", }, ] // Mock data for flashcards const mockCards = [ { id: 1, front: "What is the derivative of sin(x)?", back: "cos(x)" }, { id: 2, front: "What is the integral of 1/x?", back: "ln|x| + C" }, { id: 3, front: "What is the Pythagorean theorem?", back: "a² + b² = c²" }, { id: 4, front: "What is the quadratic formula?", back: "x = (-b ± √(b² - 4ac)) / 2a" }, { id: 5, front: "What is the derivative of e^x?", back: "e^x" }, ] export default function FlashcardsPage() { const [activeTab, setActiveTab] = useState("decks") const [selectedDeck, setSelectedDeck] = useState(null) const [studyMode, setStudyMode] = useState(false) const [currentCardIndex, setCurrentCardIndex] = useState(0) const [showAnswer, setShowAnswer] = useState(false) const handleSelectDeck = (deckId: number) => { setSelectedDeck(deckId) setActiveTab("cards") } const handleStartStudy = () => { setStudyMode(true) setCurrentCardIndex(0) setShowAnswer(false) } const handleNextCard = () => { if (currentCardIndex < mockCards.length - 1) { setCurrentCardIndex(currentCardIndex + 1) setShowAnswer(false) } else { // End of deck setStudyMode(false) } } const handlePrevCard = () => { if (currentCardIndex > 0) { setCurrentCardIndex(currentCardIndex - 1) setShowAnswer(false) } } const handleFlipCard = () => { setShowAnswer(!showAnswer) } const renderDeckList = () => (

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This