[V0_FILE]typescriptreact:file="tailwind.config.ts" isMerged="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "#9D8189", foreground: "#FFFFFF", }, secondary: { DEFAULT: "#F4ACB7", foreground: "#9D8189", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "#D8E2DC", foreground: "#9D8189", }, accent: { DEFAULT: "#FFCAD4", foreground: "#9D8189", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "#FFFFFF", foreground: "#9D8189", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]typescriptreact:file="components/bottom-navigation.tsx" isMerged="true" "use client" import { Home, Search, BookOpen, MessageCircle, Calendar, User } from "lucide-react" import { usePathname } from "next/navigation" import Link from "next/link" export default function BottomNavigation() { const pathname = usePathname() const navItems = [ { icon: Home, label: "Home", href: "/" }, { icon: Search, label: "Search", href: "/search" }, { icon: BookOpen, label: "Enrolled", href: "/enrolled" }, { icon: MessageCircle, label: "Chats", href: "/chats" }, { icon: Calendar, label: "Schedule", href: "/schedule" }, { icon: User, label: "Profile", href: "/profile" }, ] return (

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

) } [V0_FILE]typescriptreact:file="components/tutor-card.tsx" isMerged="true" import { Star } from "lucide-react" import Image from "next/image" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" interface TutorCardProps { id: string name: string subject: string rating: number price: number imageUrl: string } export default function TutorCard({ id, name, subject, rating, price, imageUrl }: TutorCardProps) { return (

{name}

{subject}

{rating.toFixed(1)}

${price}/hr

) } [V0_FILE]typescriptreact:file="components/enrolled-subject-card.tsx" isMerged="true" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import Image from "next/image" import { MessageCircle, Calendar } from "lucide-react" interface EnrolledSubjectCardProps { id: string subject: string tutorName: string tutorImage: string nextClass: string } export default function EnrolledSubjectCard({ id, subject, tutorName, tutorImage, nextClass, }: EnrolledSubjectCardProps) { return (

{subject}

with {tutorName}

Next class: {nextClass}

) } [V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/search/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { ThemeProvider } from "@/components/theme-provider" import { SidebarProvider } from "@/components/ui/sidebar" import AppSidebar from "@/components/app-sidebar" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "LearnMate - Student Dashboard", description: "A dashboard for students to manage their tutors and classes", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return (

{children}

) } [V0_FILE]typescriptreact:file="components/app-sidebar.tsx" isMerged="true" "use client" import { Home, User, BookOpen, Calendar, MessageCircle, Search, Settings, LogOut } from "lucide-react" import { usePathname } from "next/navigation" import Link from "next/link" import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarTrigger, } from "@/components/ui/sidebar" export default function AppSidebar() { const pathname = usePathname() const navItems = [ { icon: Home, label: "Home", href: "/" }, { icon: User, label: "My Profile", href: "/profile" }, { icon: BookOpen, label: "Enrolled", href: "/enrolled" }, { icon: Calendar, label: "Schedule", href: "/schedule" }, { icon: MessageCircle, label: "Chats", href: "/chats" }, { icon: Search, label: "Search", href: "/search" }, ] return ( <>

LearnMate

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

LearnMate

) } [V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 152 54% 96%; --foreground: 324 9% 56%; --card: 0 0% 100%; --card-foreground: 324 9% 56%; --popover: 0 0% 100%; --popover-foreground: 324 9% 56%; --primary: 324 9% 56%; --primary-foreground: 0 0% 100%; --secondary: 351 84% 83%; --secondary-foreground: 324 9% 56%; --muted: 152 20% 86%; --muted-foreground: 324 9% 56%; --accent: 351 100% 91%; --accent-foreground: 324 9% 56%; --destructive: 0 84% 60%; --destructive-foreground: 0 0% 100%; --border: 152 20% 86%; --input: 152 20% 86%; --ring: 324 9% 56%; --radius: 0.5rem; --sidebar-background: 0 0% 96%; --sidebar-foreground: 324 9% 56%; --sidebar-primary: 324 9% 56%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 351 100% 91%; --sidebar-accent-foreground: 324 9% 56%; --sidebar-border: 152 20% 86%; --sidebar-ring: 324 9% 56%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="components/search-bar.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { Search } from "lucide-react" import { Input } from "@/components/ui/input" import { useState } from "react" export default function SearchBar({ onSearch }: { onSearch: (query: string) => void }) { const [query, setQuery] = useState("") const handleSearch = (e: React.FormEvent) => { e.preventDefault() onSearch(query) } return (

setQuery(e.target.value)} /> ) } [V0_FILE]typescriptreact:file="app/chats/page.tsx" isEdit="true" isMerged="true" import { Card, CardContent } from "@/components/ui/card" import Image from "next/image" import { Input } from "@/components/ui/input" // Mock data for chats const chats = [ { id: "1", name: "Dr. Sarah Johnson", subject: "Mathematics", lastMessage: "Don't forget to submit your assignment by Friday!", time: "10:30 AM", unread: 2, image: "/placeholder.svg?height=100&width=100", }, { id: "2", name: "Prof. Michael Chen", subject: "Physics", lastMessage: "I've shared some additional resources for the upcoming test.", time: "Yesterday", unread: 0, image: "/placeholder.svg?height=100&width=100", }, { id: "3", name: "Ms. Emily Rodriguez", subject: "English Literature", lastMessage: "Great work on your essay! Let's discuss it in our next class.", time: "Monday", unread: 0, image: "/placeholder.svg?height=100&width=100", }, ] export default function ChatsPage() { return (

Chats

{chats.map((chat) => (

{chat.unread > 0 && (

{chat.unread}

)}

{chat.name}

{chat.time}

{chat.subject}

{chat.lastMessage}

))}

) } [V0_FILE]typescriptreact:file="app/profile/page.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" 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 { Card, CardContent } from "@/components/ui/card" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Edit, LogOut, Save, Trash2 } from "lucide-react" export default function ProfilePage() { const [isEditing, setIsEditing] = useState(false) const [userData, setUserData] = useState({ name: "Alex Johnson", email: "alex.johnson@example.com", phone: "+1 (555) 123-4567", school: "University of Technology", major: "Computer Science", year: "Junior", }) const handleSave = () => { // Save logic would go here setIsEditing(false) } return (

My Profile

{userData.name}

{userData.school}

{userData.major}, {userData.year}

Information Settings {isEditing ? (

Full Name setUserData({ ...userData, name: e.target.value })} className="bg-white border-[#D8E2DC] focus-visible:ring-[#9D8189]" />

Email setUserData({ ...userData, email: e.target.value })} className="bg-white border-[#D8E2DC] focus-visible:ring-[#9D8189]" />

Phone setUserData({ ...userData, phone: e.target.value })} className="bg-white border-[#D8E2DC] focus-visible:ring-[#9D8189]" />

School setUserData({ ...userData, school: e.target.value })} className="bg-white border-[#D8E2DC] focus-visible:ring-[#9D8189]" />

Major setUserData({ ...userData, major: e.target.value })} className="bg-white border-[#D8E2DC] focus-visible:ring-[#9D8189]" />

Year setUserData({ ...userData, year: e.target.value })} className="bg-white border-[#D8E2DC] focus-visible:ring-[#9D8189]" />

) : (

Full Name

{userData.name}

{userData.email}

Phone

{userData.phone}

School

{userData.school}

Major

{userData.major}

Year

{userData.year}

)}

Account Settings

Notifications

Email Notifications

SMS Notifications

Danger Zone

) } [V0_FILE]typescriptreact:file="app/schedule/page.tsx" isEdit="true" isMerged="true" import { Card, CardContent } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Calendar, Clock } from "lucide-react" // Mock data for schedule const scheduleData = { today: [ { id: "1", subject: "Advanced Calculus", tutor: "Dr. Sarah Johnson", time: "4:00 PM - 5:30 PM", location: "Online (Zoom)", }, ], tomorrow: [ { id: "2", subject: "Quantum Physics", tutor: "Prof. Michael Chen", time: "2:30 PM - 4:00 PM", location: "Room 302, Science Building", }, ], upcoming: [ { id: "3", subject: "English Literature", tutor: "Ms. Emily Rodriguez", time: "Wed, 10:00 AM - 11:30 AM", location: "Online (Google Meet)", }, { id: "4", subject: "Advanced Calculus", tutor: "Dr. Sarah Johnson", time: "Fri, 4:00 PM - 5:30 PM", location: "Online (Zoom)", }, ], } function ScheduleCard({ subject, tutor, time, location, }: { subject: string tutor: string time: string location: string }) { return (

{subject}

with {tutor}

{time}

{location}

) } export default function SchedulePage() { return (

Class Schedule

Today Tomorrow Upcoming {scheduleData.today.length > 0 ? ( scheduleData.today.map((item) => ( )) ) : (

No classes scheduled for today.

)} {scheduleData.tomorrow.length > 0 ? ( scheduleData.tomorrow.map((item) => ( )) ) : (

No classes scheduled for tomorrow.

)} {scheduleData.upcoming.length > 0 ? ( scheduleData.upcoming.map((item) => ( )) ) : (

No upcoming classes scheduled.

)}

) } [V0_FILE]typescriptreact:file="app/search/page.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import SearchBar from "@/components/search-bar" import TutorCard from "@/components/tutor-card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" // Mock data for tutors const tutors = [ { id: "1", name: "Dr. Sarah Johnson", subject: "Mathematics", rating: 4.8, price: 35, imageUrl: "/placeholder.svg?height=200&width=400", }, { id: "2", name: "Prof. Michael Chen", subject: "Physics", rating: 4.7, price: 40, imageUrl: "/placeholder.svg?height=200&width=400", }, { id: "3", name: "Ms. Emily Rodriguez", subject: "English Literature", rating: 4.9, price: 30, imageUrl: "/placeholder.svg?height=200&width=400", }, { id: "4", name: "Dr. James Wilson", subject: "Computer Science", rating: 4.6, price: 45, imageUrl: "/placeholder.svg?height=200&width=400", }, ] // Mock data for students const students = [ { id: "1", name: "Alex Johnson", major: "Computer Science", year: "Junior", imageUrl: "/placeholder.svg?height=200&width=400", }, { id: "2", name: "Emma Williams", major: "Physics", year: "Senior", imageUrl: "/placeholder.svg?height=200&width=400", }, { id: "3", name: "Noah Brown", major: "Mathematics", year: "Sophomore", imageUrl: "/placeholder.svg?height=200&width=400", }, ] export default function SearchPage() { const [searchQuery, setSearchQuery] = useState("") const [activeTab, setActiveTab] = useState("tutors") const filteredTutors = tutors.filter( (tutor) => tutor.name.toLowerCase().includes(searchQuery.toLowerCase()) || tutor.subject.toLowerCase().includes(searchQuery.toLowerCase()), ) const filteredStudents = students.filter( (student) => student.name.toLowerCase().includes(searchQuery.toLowerCase()) || student.major.toLowerCase().includes(searchQuery.toLowerCase()), ) const handleSearch = (query: string) => { setSearchQuery(query) } return (

Search

Tutors Students {filteredTutors.length > 0 ? (

{filteredTutors.map((tutor) => ( ))}

) : (

{searchQuery ? "No tutors found matching your search." : "Start typing to search for tutors."}

)} {filteredStudents.length > 0 ? (

{filteredStudents.map((student) => (

{student.name}

{student.major}, {student.year}

))}

) : (

{searchQuery ? "No students found matching your search." : "Start typing to search for students."}

)}

) } [V0_FILE]typescriptreact:file="components/section-header.tsx" isEdit="true" isQuickEdit="true" "use client" interface SectionHeaderProps { title: string actionText?: string onAction?: () => void } export default function SectionHeader({ title, actionText, onAction }: SectionHeaderProps) { return (

{title}

{actionText && onAction && ( )}

) } [V0_FILE]typescriptreact:file="app/enrolled/page.tsx" isEdit="true" isQuickEdit="true" "use client" import SectionHeader from "@/components/section-header" import EnrolledSubjectCard from "@/components/enrolled-subject-card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" // Mock data for enrolled subjects const enrolledSubjects = [ { id: "1", subject: "Advanced Calculus", tutorName: "Dr. Sarah Johnson", tutorImage: "/placeholder.svg?height=100&width=100", nextClass: "Today, 4:00 PM", }, { id: "2", subject: "Quantum Physics", tutorName: "Prof. Michael Chen", tutorImage: "/placeholder.svg?height=100&width=100", nextClass: "Tomorrow, 2:30 PM", }, { id: "3", subject: "English Literature", tutorName: "Ms. Emily Rodriguez", tutorImage: "/placeholder.svg?height=100&width=100", nextClass: "Wednesday, 10:00 AM", }, ] // Mock data for completed subjects const completedSubjects = [ { id: "4", subject: "Introduction to Programming", tutorName: "Dr. James Wilson", tutorImage: "/placeholder.svg?height=100&width=100", nextClass: "Completed on May 15, 2023", }, { id: "5", subject: "Basic Statistics", tutorName: "Prof. Lisa Thompson", tutorImage: "/placeholder.svg?height=100&width=100", nextClass: "Completed on April 20, 2023", }, ] export default function EnrolledPage() { const handleSort = (type: string) => { console.log(`Sort ${type} subjects`) } return (

Enrolled Subjects

Active Completed handleSort("enrolled")} />

{enrolledSubjects.map((subject) => ( ))}

handleSort("completed")} />

{completedSubjects.map((subject) => ( ))}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import SearchBar from "@/components/search-bar" import TutorCard from "@/components/tutor-card" import SectionHeader from "@/components/section-header" import EnrolledSubjectCard from "@/components/enrolled-subject-card" // Mock data for tutors const tutors = [ { id: "1", name: "Dr. Sarah Johnson", subject: "Mathematics", rating: 4.8, price: 35, imageUrl: "/placeholder.svg?height=200&width=400", }, { id: "2", name: "Prof. Michael Chen", subject: "Physics", rating: 4.7, price: 40, imageUrl: "/placeholder.svg?height=200&width=400", }, { id: "3", name: "Ms. Emily Rodriguez", subject: "English Literature", rating: 4.9, price: 30, imageUrl: "/placeholder.svg?height=200&width=400", }, ] // Mock data for enrolled subjects const enrolledSubjects = [ { id: "1", subject: "Advanced Calculus", tutorName: "Dr. Sarah Johnson", tutorImage: "/placeholder.svg?height=100&width=100", nextClass: "Today, 4:00 PM", }, { id: "2", subject: "Quantum Physics", tutorName: "Prof. Michael Chen", tutorImage: "/placeholder.svg?height=100&width=100", nextClass: "Tomorrow, 2:30 PM", }, ] export default function Home() { const handleSearch = (query: string) => { console.log("Searching for:", query) } const handleViewAll = (section: string) => { console.log(`View all ${section}`) } return (

Student Dashboard

handleViewAll("enrolled subjects")} />

{enrolledSubjects.map((subject) => ( ))}

handleViewAll("tutors")} />

{tutors.map((tutor) => ( ))}

) }