/ var / www / html / cqt / src / pages / [ HOME SHELL ]

Name	Size	Permission	Action
AboutPage.tsx	464 B	-rw-r--r--
AdminDashboard.tsx	6.63 KB	-rw-r--r--
AdminLogin.tsx	4.9 KB	-rw-r--r--
ContactPage.tsx	403 B	-rw-r--r--
CourseDetailPage.tsx	17.14 KB	-rw-r--r--
CoursesManager.tsx	15.6 KB	-rw-r--r--
EducationPage.tsx	23.77 KB	-rw-r--r--
Index.tsx	1.25 KB	-rw-r--r--
LabsManager.tsx	13.28 KB	-rw-r--r--
LabsPage.tsx	12.33 KB	-rw-r--r--
NewsDetailPage.tsx	10.51 KB	-rw-r--r--
NewsManager.tsx	11.66 KB	-rw-r--r--
NewsPage.tsx	11.77 KB	-rw-r--r--
NotFound.tsx	727 B	-rw-r--r--
PersonPage.tsx	1.67 KB	-rw-r--r--
PublicationsManager.tsx	12.17 KB	-rw-r--r--
PublicationsPage.tsx	15.17 KB	-rw-r--r--
ResearchDetailPage.tsx	16.93 KB	-rw-r--r--
ResearchManager.tsx	15.75 KB	-rw-r--r--
ResearchPage.tsx	14.3 KB	-rw-r--r--
TeamManager.tsx	12.4 KB	-rw-r--r--
TeamPage.tsx	781 B	-rw-r--r--
WorkshopDetailPage.tsx	19.23 KB	-rw-r--r--
WorkshopsManager.tsx	16.05 KB	-rw-r--r--
WorkshopsPage.tsx	7.63 KB	-rw-r--r--

Code Editor : EducationPage.tsx

import { useState, useEffect } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { motion } from 'framer-motion';
import { useCourses, useWorkshops } from '../lib/dataLoader';
import Navigation from '../components/Navigation';
import Footer from '../components/Footer';
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '../components/ui/card';
import { Badge } from '../components/ui/badge';
import { Button } from '../components/ui/button';
import { Input } from '../components/ui/input';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '../components/ui/tabs';
import { Search, Calendar, Clock, Users, MapPin, BookOpen, GraduationCap } from 'lucide-react';
import { scrollToHash } from '../lib/scroll';

export default function EducationPage() {
  const { data: courses = [], isLoading: coursesLoading } = useCourses();
  const { data: workshops = [], isLoading: workshopsLoading } = useWorkshops();
  const location = useLocation();
  
  const [courseSearch, setCourseSearch] = useState('');
  const [workshopSearch, setWorkshopSearch] = useState('');
  const [courseLevel, setCourseLevel] = useState('All');
  const [courseStatus, setCourseStatus] = useState('All');
  const [workshopType, setWorkshopType] = useState('All');

// Scroll to hash on mount and when location changes
  useEffect(() => {
    if (location.hash) {
      setTimeout(() => scrollToHash(location.hash), 200);
    }
  }, [location.hash]);

// Filter courses
  const filteredCourses = courses.filter((course: any) => {
    const matchesSearch = courseSearch === '' || 
      course.title.toLowerCase().includes(courseSearch.toLowerCase()) ||
      course.description.toLowerCase().includes(courseSearch.toLowerCase()) ||
      course.code.toLowerCase().includes(courseSearch.toLowerCase()) ||
      course.tags?.some((tag: string) => tag.toLowerCase().includes(courseSearch.toLowerCase()));
    
    const matchesLevel = courseLevel === 'All' || course.level === courseLevel;
    const matchesStatus = courseStatus === 'All' || course.enrollmentStatus === courseStatus;
    
    return matchesSearch && matchesLevel && matchesStatus;
  });

// Filter workshops
  const filteredWorkshops = workshops.filter((workshop: any) => {
    const matchesSearch = workshopSearch === '' || 
      workshop.title.toLowerCase().includes(workshopSearch.toLowerCase()) ||
      workshop.description.toLowerCase().includes(workshopSearch.toLowerCase()) ||
      workshop.tags?.some((tag: string) => tag.toLowerCase().includes(workshopSearch.toLowerCase()));
    
    const matchesType = workshopType === 'All' || workshop.type === workshopType;
    
    return matchesSearch && matchesType;
  });

const featuredCourses = filteredCourses.filter((course: any) => course.featured);
  const regularCourses = filteredCourses.filter((course: any) => !course.featured);
  
  const featuredWorkshops = filteredWorkshops.filter((workshop: any) => workshop.featured);
  const regularWorkshops = filteredWorkshops.filter((workshop: any) => !workshop.featured);

const courseLevels = ['All', 'Undergraduate', 'Graduate'];
  const courseStatuses = ['All', 'Open', 'Waitlist', 'Closed'];
  const workshopTypes = ['All', 'Workshop', 'Seminar', 'Symposium'];

const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString('en-US', { 
      year: 'numeric', 
      month: 'short', 
      day: 'numeric' 
    });
  };

return (
    <div className="min-h-screen bg-background">
      <Navigation />
      
      <div className="bg-gradient-to-b from-primary/5 to-background py-24">
        <div className="container mx-auto px-4">
          {/* Header */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            className="text-center mb-16"
          >
            <h1 className="text-5xl font-bold text-foreground mb-4">Education & Training</h1>
            <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
              Explore our comprehensive courses and attend cutting-edge workshops to advance your knowledge in quantum technologies.
            </p>
          </motion.div>

<Tabs defaultValue="courses" className="w-full">
            <TabsList className="grid w-full max-w-md mx-auto grid-cols-2 mb-8">
              <TabsTrigger value="courses" className="text-lg">
                <GraduationCap className="h-5 w-5 mr-2" />
                Courses
              </TabsTrigger>
              <TabsTrigger value="workshops" className="text-lg">
                <BookOpen className="h-5 w-5 mr-2" />
                Workshops & Events
              </TabsTrigger>
            </TabsList>

{/* Courses Tab */}
            <TabsContent value="courses" id="courses">
              <motion.div
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ duration: 0.3 }}
              >
                {/* Search and Filters */}
                <div className="mb-8">
                  <div className="relative max-w-2xl mx-auto mb-6">
                    <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-muted-foreground" />
                    <Input
                      type="text"
                      placeholder="Search courses by title, code, or tags..."
                      value={courseSearch}
                      onChange={(e) => setCourseSearch(e.target.value)}
                      className="pl-10 py-6 text-lg"
                    />
                  </div>

<div className="flex flex-wrap gap-4 justify-center">
                    <div className="flex gap-2">
                      <span className="text-sm font-medium text-muted-foreground py-2">Level:</span>
                      {courseLevels.map((level) => (
                        <Button
                          key={level}
                          onClick={() => setCourseLevel(level)}
                          variant={courseLevel === level ? "default" : "outline"}
                          size="sm"
                        >
                          {level}
                        </Button>
                      ))}
                    </div>
                    <div className="flex gap-2">
                      <span className="text-sm font-medium text-muted-foreground py-2">Status:</span>
                      {courseStatuses.map((status) => (
                        <Button
                          key={status}
                          onClick={() => setCourseStatus(status)}
                          variant={courseStatus === status ? "default" : "outline"}
                          size="sm"
                        >
                          {status}
                        </Button>
                      ))}
                    </div>
                  </div>
                </div>

{coursesLoading ? (
                  <div className="text-center py-12">
                    <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto"></div>
                    <p className="mt-4 text-muted-foreground">Loading courses...</p>
                  </div>
                ) : (
                  <>
                    <div className="mb-4 text-center text-muted-foreground">
                      Showing {filteredCourses.length} {filteredCourses.length === 1 ? 'course' : 'courses'}
                    </div>

{/* Featured Courses */}
                    {featuredCourses.length > 0 && (
                      <div className="mb-12">
                        <h2 className="text-3xl font-bold text-foreground mb-6">Featured Courses</h2>
                        <div className="grid md:grid-cols-2 gap-6">
                          {featuredCourses.map((course: any, index: number) => (
                            <motion.div
                              key={course.id}
                              initial={{ opacity: 0, y: 20 }}
                              animate={{ opacity: 1, y: 0 }}
                              transition={{ duration: 0.5, delay: index * 0.1 }}
                            >
                              <Link to={`/courses/${course.id}`}>
                                <Card className="h-full hover:shadow-xl transition-all duration-300 hover:-translate-y-1 border-border">
                                  <CardHeader>
                                    <div className="flex gap-2 mb-2 flex-wrap">
                                      <Badge variant="outline">{course.code}</Badge>
                                      <Badge className={course.level === 'Undergraduate' ? 'bg-green-500/10 text-green-600 dark:text-green-400' : 'bg-primary/10 text-primary'}>
                                        {course.level}
                                      </Badge>
                                      <Badge className={
                                        course.enrollmentStatus === 'Open' ? 'bg-green-500 text-white' :
                                        course.enrollmentStatus === 'Closed' ? 'bg-red-500 text-white' : 'bg-yellow-500 text-white'
                                      }>
                                        {course.enrollmentStatus}
                                      </Badge>
                                    </div>
                                    <CardTitle className="text-xl">{course.title}</CardTitle>
                                  </CardHeader>
                                  <CardContent>
                                    <p className="text-muted-foreground mb-4">{course.description}</p>
                                    <div className="space-y-2 text-sm text-muted-foreground">
                                      <div className="flex items-center gap-2">
                                        <Calendar className="h-4 w-4" />
                                        <span>{course.semester}</span>
                                      </div>
                                      <div className="flex items-center gap-2">
                                        <Clock className="h-4 w-4" />
                                        <span>{course.duration} • {course.credits} credits</span>
                                      </div>
                                      <div className="flex items-center gap-2">
                                        <Users className="h-4 w-4" />
                                        <span>{course.enrolled}/{course.capacity} enrolled</span>
                                      </div>
                                    </div>
                                  </CardContent>
                                  <CardFooter>
                                    <Button className="w-full">View Details</Button>
                                  </CardFooter>
                                </Card>
                              </Link>
                            </motion.div>
                          ))}
                        </div>
                      </div>
                    )}

{/* Regular Courses */}
                    {regularCourses.length > 0 && (
                      <div>
                        <h2 className="text-3xl font-bold text-foreground mb-6">All Courses</h2>
                        <div className="grid md:grid-cols-3 gap-6">
                          {regularCourses.map((course: any, index: number) => (
                            <motion.div
                              key={course.id}
                              initial={{ opacity: 0, y: 20 }}
                              animate={{ opacity: 1, y: 0 }}
                              transition={{ duration: 0.5, delay: index * 0.05 }}
                            >
                              <Link to={`/courses/${course.id}`}>
                                <Card className="h-full hover:shadow-lg transition-all duration-300 border-border">
                                  <CardHeader>
                                    <div className="flex gap-2 mb-2 flex-wrap">
                                      <Badge variant="outline">{course.code}</Badge>
                                      <Badge className={
                                        course.enrollmentStatus === 'Open' ? 'bg-green-500 text-white' :
                                        course.enrollmentStatus === 'Closed' ? 'bg-red-500 text-white' : 'bg-yellow-500 text-white'
                                      }>
                                        {course.enrollmentStatus}
                                      </Badge>
                                    </div>
                                    <CardTitle className="text-lg">{course.title}</CardTitle>
                                  </CardHeader>
                                  <CardContent>
                                    <p className="text-muted-foreground text-sm mb-3 line-clamp-2">{course.description}</p>
                                    <div className="space-y-1 text-xs text-muted-foreground">
                                      <div className="flex items-center gap-2">
                                        <Calendar className="h-3 w-3" />
                                        <span>{course.semester}</span>
                                      </div>
                                      <div className="flex items-center gap-2">
                                        <Users className="h-3 w-3" />
                                        <span>{course.enrolled}/{course.capacity} enrolled</span>
                                      </div>
                                    </div>
                                  </CardContent>
                                  <CardFooter>
                                    <Button variant="outline" className="w-full">View Details</Button>
                                  </CardFooter>
                                </Card>
                              </Link>
                            </motion.div>
                          ))}
                        </div>
                      </div>
                    )}

{filteredCourses.length === 0 && (
                      <div className="text-center py-12">
                        <p className="text-muted-foreground mb-4">No courses found matching your criteria.</p>
                        <Button onClick={() => { setCourseSearch(''); setCourseLevel('All'); setCourseStatus('All'); }}>
                          Clear Filters
                        </Button>
                      </div>
                    )}
                  </>
                )}
              </motion.div>
            </TabsContent>

{/* Workshops Tab */}
            <TabsContent value="workshops" id="workshops">
              <motion.div
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ duration: 0.3 }}
              >
                {/* Search and Filters */}
                <div className="mb-8">
                  <div className="relative max-w-2xl mx-auto mb-6">
                    <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-muted-foreground" />
                    <Input
                      type="text"
                      placeholder="Search workshops and events..."
                      value={workshopSearch}
                      onChange={(e) => setWorkshopSearch(e.target.value)}
                      className="pl-10 py-6 text-lg"
                    />
                  </div>

<div className="flex flex-wrap gap-2 justify-center">
                    <span className="text-sm font-medium text-muted-foreground py-2">Type:</span>
                    {workshopTypes.map((type) => (
                      <Button
                        key={type}
                        onClick={() => setWorkshopType(type)}
                        variant={workshopType === type ? "default" : "outline"}
                        size="sm"
                      >
                        {type}
                      </Button>
                    ))}
                  </div>
                </div>

{workshopsLoading ? (
                  <div className="text-center py-12">
                    <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto"></div>
                    <p className="mt-4 text-muted-foreground">Loading events...</p>
                  </div>
                ) : (
                  <>
                    <div className="mb-4 text-center text-muted-foreground">
                      Showing {filteredWorkshops.length} {filteredWorkshops.length === 1 ? 'event' : 'events'}
                    </div>

{/* Featured Workshops */}
                    {featuredWorkshops.length > 0 && (
                      <div className="mb-12">
                        <h2 className="text-3xl font-bold text-foreground mb-6">Featured Events</h2>
                        <div className="grid md:grid-cols-2 gap-6">
                          {featuredWorkshops.map((workshop: any, index: number) => (
                            <motion.div
                              key={workshop.id}
                              initial={{ opacity: 0, y: 20 }}
                              animate={{ opacity: 1, y: 0 }}
                              transition={{ duration: 0.5, delay: index * 0.1 }}
                            >
                              <Link to={`/workshops/${workshop.id}`}>
                                <Card className="h-full hover:shadow-xl transition-all duration-300 hover:-translate-y-1 border-border">
                                  <CardHeader>
                                    <div className="flex gap-2 mb-2 flex-wrap">
                                      <Badge variant="outline">{workshop.type}</Badge>
                                      <Badge className={
                                        workshop.status === 'Registration Open' ? 'bg-green-500 text-white' :
                                        workshop.status === 'Almost Full' ? 'bg-yellow-500 text-white' : 'bg-red-500 text-white'
                                      }>
                                        {workshop.status}
                                      </Badge>
                                    </div>
                                    <CardTitle className="text-xl">{workshop.title}</CardTitle>
                                  </CardHeader>
                                  <CardContent>
                                    <p className="text-muted-foreground mb-4">{workshop.description}</p>
                                    <div className="space-y-2 text-sm text-muted-foreground">
                                      <div className="flex items-center gap-2">
                                        <Calendar className="h-4 w-4" />
                                        <span>{formatDate(workshop.startDate)} - {formatDate(workshop.endDate)}</span>
                                      </div>
                                      <div className="flex items-center gap-2">
                                        <Clock className="h-4 w-4" />
                                        <span>{workshop.duration}</span>
                                      </div>
                                      <div className="flex items-center gap-2">
                                        <MapPin className="h-4 w-4" />
                                        <span>{workshop.format}</span>
                                      </div>
                                      <div className="flex items-center gap-2">
                                        <Users className="h-4 w-4" />
                                        <span>{workshop.registered}/{workshop.capacity} registered</span>
                                      </div>
                                    </div>
                                  </CardContent>
                                  <CardFooter>
                                    <Button className="w-full">View Details</Button>
                                  </CardFooter>
                                </Card>
                              </Link>
                            </motion.div>
                          ))}
                        </div>
                      </div>
                    )}

{/* Regular Workshops */}
                    {regularWorkshops.length > 0 && (
                      <div>
                        <h2 className="text-3xl font-bold text-foreground mb-6">More Events</h2>
                        <div className="grid md:grid-cols-3 gap-6">
                          {regularWorkshops.map((workshop: any, index: number) => (
                            <motion.div
                              key={workshop.id}
                              initial={{ opacity: 0, y: 20 }}
                              animate={{ opacity: 1, y: 0 }}
                              transition={{ duration: 0.5, delay: index * 0.05 }}
                            >
                              <Link to={`/workshops/${workshop.id}`}>
                                <Card className="h-full hover:shadow-lg transition-all duration-300 border-border">
                                  <CardHeader>
                                    <div className="flex gap-2 mb-2 flex-wrap">
                                      <Badge variant="outline">{workshop.type}</Badge>
                                      <Badge className={
                                        workshop.status === 'Registration Open' ? 'bg-green-500 text-white' :
                                        workshop.status === 'Almost Full' ? 'bg-yellow-500 text-white' : 'bg-red-500 text-white'
                                      }>
                                        {workshop.status}
                                      </Badge>
                                    </div>
                                    <CardTitle className="text-lg">{workshop.title}</CardTitle>
                                  </CardHeader>
                                  <CardContent>
                                    <p className="text-muted-foreground text-sm mb-3 line-clamp-2">{workshop.description}</p>
                                    <div className="space-y-1 text-xs text-muted-foreground">
                                      <div className="flex items-center gap-2">
                                        <Calendar className="h-3 w-3" />
                                        <span>{formatDate(workshop.startDate)}</span>
                                      </div>
                                      <div className="flex items-center gap-2">
                                        <MapPin className="h-3 w-3" />
                                        <span className="line-clamp-1">{workshop.venue}</span>
                                      </div>
                                    </div>
                                  </CardContent>
                                  <CardFooter>
                                    <Button variant="outline" className="w-full">View Details</Button>
                                  </CardFooter>
                                </Card>
                              </Link>
                            </motion.div>
                          ))}
                        </div>
                      </div>
                    )}

{filteredWorkshops.length === 0 && (
                      <div className="text-center py-12">
                        <p className="text-muted-foreground mb-4">No events found matching your criteria.</p>
                        <Button onClick={() => { setWorkshopSearch(''); setWorkshopType('All'); }}>
                          Clear Filters
                        </Button>
                      </div>
                    )}
                  </>
                )}
              </motion.div>
            </TabsContent>
          </Tabs>
        </div>
      </div>

<Footer />
    </div>
  );
}

Urban Research Lab

Urban Research Lab

The Urban Research Lab (URL) at IIIT-Delhi was established in 2020, during a time when the pandemic brought the complexities of urban life more visible than ever. What started as an initiative by faculty and students has grown into a collaborative space for critically exploring and reimagining the urban questions through research, dialogue, and interdisciplinary engagement.