/ 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 : WorkshopsPage.tsx

import { useState } from 'react';
import { Link } from 'react-router-dom';
import { motion } from 'framer-motion';
import { 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 { Search, Calendar, MapPin, Users } from 'lucide-react';

export default function WorkshopsPage() {
  const { data: workshops = [], isLoading } = useWorkshops();
  const [workshopSearch, setWorkshopSearch] = useState('');
  const [workshopType, setWorkshopType] = useState('All');

// 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 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="pt-24 pb-16">
        <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="mb-12"
          >
            <h1 className="text-5xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent mb-4">
              Workshops & Events
            </h1>
            <p className="text-lg text-muted-foreground max-w-2xl">
              Explore our comprehensive range of workshops, seminars, and training events designed to advance your knowledge in quantum technology.
            </p>
          </motion.div>

{/* Search and Filters */}
          <motion.div
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.1 }}
            className="mb-12"
          >
            <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>
          </motion.div>

{/* Workshops Grid */}
          {isLoading ? (
            <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>

{filteredWorkshops.length > 0 ? (
                <motion.div
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  transition={{ duration: 0.3 }}
                  className="grid md:grid-cols-3 gap-6"
                >
                  {filteredWorkshops.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 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-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 || workshop.location}</span>
                              </div>
                              {workshop.registered && workshop.capacity && (
                                <div className="flex items-center gap-2">
                                  <Users className="h-3 w-3" />
                                  <span>{workshop.registered}/{workshop.capacity} registered</span>
                                </div>
                              )}
                            </div>
                          </CardContent>
                          <CardFooter>
                            <Button variant="outline" className="w-full">View Details</Button>
                          </CardFooter>
                        </Card>
                      </Link>
                    </motion.div>
                  ))}
                </motion.div>
              ) : (
                <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>
              )}
            </>
          )}
        </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.