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

import { useEffect } from 'react';
import { useParams, Link } from 'react-router-dom';
import { useWorkshop } from '../lib/dataLoader';
import { motion } from 'framer-motion';
import { ArrowLeft, Calendar, Clock, Users, MapPin, Video, DollarSign, Mail, ExternalLink, CheckCircle } from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/card';
import { Badge } from '../components/ui/badge';
import { Button } from '../components/ui/button';

export default function WorkshopDetailPage() {
  const { id } = useParams();
  const { data: workshop, isLoading, error } = useWorkshop(id);

useEffect(() => {
    if (id === 'workshop-2') {
      window.location.assign('https://qiskit-developer-workshop-l1gx.vercel.app/');
    }
  }, [id]);

if (id === 'workshop-2') {
    return (
      <div className="min-h-screen bg-background flex items-center justify-center">
        <div className="text-center">
          <p className="text-muted-foreground">Redirecting to event site...</p>
        </div>
      </div>
    );
  }

if (isLoading) {
    return (
      <div className="min-h-screen bg-background flex items-center justify-center">
        <div className="text-center">
          <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 event details...</p>
        </div>
      </div>
    );
  }

if (error || !workshop) {
    return (
      <div className="min-h-screen bg-background flex items-center justify-center">
        <div className="text-center">
          <h2 className="text-2xl font-bold text-foreground mb-4">Event Not Found</h2>
          <Link to="/education" className="text-primary hover:text-primary/80 flex items-center justify-center gap-2">
            <ArrowLeft className="h-4 w-4" />
            Back to Education
          </Link>
        </div>
      </div>
    );
  }

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

return (
    <div className="min-h-screen bg-background">
      {/* Back Button */}
      <div className="bg-card border-b border-border">
        <div className="container mx-auto px-4 py-4">
          <Link 
            to="/education" 
            className="inline-flex items-center gap-2 text-primary hover:text-primary/80 transition-colors"
          >
            <ArrowLeft className="h-4 w-4" />
            Back to Education
          </Link>
        </div>
      </div>

<div className="container mx-auto px-4 py-12">
        {/* Header */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
          className="mb-8"
        >
          <div className="flex flex-wrap gap-2 mb-4">
            <Badge variant="outline" className="text-sm">{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>
            <Badge variant="secondary">{workshop.format}</Badge>
            {workshop.featured && <Badge className="bg-gradient-to-r from-accent to-primary text-white">Featured</Badge>}
          </div>
          <h1 className="text-4xl md:text-5xl font-bold text-foreground mb-4">{workshop.title}</h1>
          <p className="text-xl text-muted-foreground leading-relaxed">{workshop.description}</p>
        </motion.div>

{/* Event Image */}
        <motion.div
          initial={{ opacity: 0, scale: 0.95 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration: 0.5, delay: 0.1 }}
          className="mb-12"
        >
          <img 
            src={workshop.image} 
            alt={workshop.title}
            className="w-full h-64 md:h-96 object-cover rounded-xl shadow-lg"
          />
        </motion.div>

{/* Quick Info Cards */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.2 }}
          className="grid md:grid-cols-4 gap-4 mb-12"
        >
          <Card>
            <CardContent className="p-6 text-center">
              <Calendar className="h-8 w-8 text-primary mx-auto mb-2" />
              <p className="text-sm text-muted-foreground mb-1">Start Date</p>
              <p className="font-semibold text-foreground">{formatDate(workshop.startDate)}</p>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-6 text-center">
              <Clock className="h-8 w-8 text-primary mx-auto mb-2" />
              <p className="text-sm text-muted-foreground mb-1">Duration</p>
              <p className="font-semibold text-foreground">{workshop.duration}</p>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-6 text-center">
              <MapPin className="h-8 w-8 text-primary mx-auto mb-2" />
              <p className="text-sm text-muted-foreground mb-1">Venue</p>
              <p className="font-semibold text-foreground text-sm">{workshop.venue}</p>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-6 text-center">
              <Users className="h-8 w-8 text-primary mx-auto mb-2" />
              <p className="text-sm text-muted-foreground mb-1">Attendance</p>
              <p className="font-semibold text-foreground">{workshop.registered}/{workshop.capacity}</p>
            </CardContent>
          </Card>
        </motion.div>

<div className="grid lg:grid-cols-3 gap-8">
          {/* Main Content */}
          <div className="lg:col-span-2 space-y-8">
            {/* Speakers */}
            {workshop.speakers && workshop.speakers.length > 0 && (
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: 0.3 }}
              >
                <Card>
                  <CardHeader>
                    <CardTitle>Speakers</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      {workshop.speakers.map((speaker: any, index: number) => (
                        <div key={index} className="border-l-4 border-primary pl-4 py-2">
                          <h4 className="font-semibold text-foreground">{speaker.name}</h4>
                          <p className="text-sm text-muted-foreground">{speaker.affiliation}</p>
                          {speaker.title && <p className="text-sm text-muted-foreground mt-1 italic">{speaker.title}</p>}
                        </div>
                      ))}
                    </div>
                  </CardContent>
                </Card>
              </motion.div>
            )}

{/* Schedule */}
            {workshop.schedule && workshop.schedule.length > 0 && (
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: 0.4 }}
              >
                <Card>
                  <CardHeader>
                    <CardTitle>Event Schedule</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-6">
                      {workshop.schedule.map((day: any, index: number) => (
                        <div key={index}>
                          <h4 className="font-semibold text-lg text-foreground mb-3 flex items-center gap-2">
                            <Calendar className="h-5 w-5 text-primary" />
                            {day.day} - {day.date}
                          </h4>
                          <div className="space-y-2 ml-7">
                            {day.sessions && day.sessions.map((session: string, sessionIndex: number) => (
                              <div key={sessionIndex} className="flex items-start gap-2 py-2 border-b border-border last:border-0">
                                <CheckCircle className="h-4 w-4 text-primary flex-shrink-0 mt-1" />
                                <span className="text-foreground">{session}</span>
                              </div>
                            ))}
                          </div>
                        </div>
                      ))}
                    </div>
                  </CardContent>
                </Card>
              </motion.div>
            )}

{/* Topics */}
            {workshop.topics && workshop.topics.length > 0 && (
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: 0.5 }}
              >
                <Card>
                  <CardHeader>
                    <CardTitle>Topics Covered</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <ul className="space-y-2">
                      {workshop.topics.map((topic: string, index: number) => (
                        <li key={index} className="flex items-start gap-2">
                          <CheckCircle className="h-5 w-5 text-primary flex-shrink-0 mt-0.5" />
                          <span className="text-foreground">{topic}</span>
                        </li>
                      ))}
                    </ul>
                  </CardContent>
                </Card>
              </motion.div>
            )}

{/* Highlights */}
            {workshop.highlights && workshop.highlights.length > 0 && (
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: 0.6 }}
              >
                <Card>
                  <CardHeader>
                    <CardTitle>Event Highlights</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <ul className="space-y-2">
                      {workshop.highlights.map((highlight: string, index: number) => (
                        <li key={index} className="flex items-start gap-2">
                          <CheckCircle className="h-5 w-5 text-green-600 dark:text-green-400 flex-shrink-0 mt-0.5" />
                          <span className="text-foreground">{highlight}</span>
                        </li>
                      ))}
                    </ul>
                  </CardContent>
                </Card>
              </motion.div>
            )}

{/* Learning Outcomes */}
            {workshop.outcomes && workshop.outcomes.length > 0 && (
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: 0.7 }}
              >
                <Card>
                  <CardHeader>
                    <CardTitle>Learning Outcomes</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <ul className="space-y-3">
                      {workshop.outcomes.map((outcome: string, index: number) => (
                        <li key={index} className="flex items-start gap-3">
                          <div className="flex-shrink-0 w-6 h-6 rounded-full bg-primary/10 text-primary flex items-center justify-center text-sm font-semibold">
                            {index + 1}
                          </div>
                          <span className="text-foreground pt-0.5">{outcome}</span>
                        </li>
                      ))}
                    </ul>
                  </CardContent>
                </Card>
              </motion.div>
            )}

{/* Prerequisites */}
            {workshop.prerequisites && workshop.prerequisites.length > 0 && (
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: 0.8 }}
              >
                <Card>
                  <CardHeader>
                    <CardTitle>Prerequisites</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <ul className="space-y-2">
                      {workshop.prerequisites.map((prereq: string, index: number) => (
                        <li key={index} className="flex items-start gap-2">
                          <CheckCircle className="h-5 w-5 text-primary flex-shrink-0 mt-0.5" />
                          <span className="text-foreground">{prereq}</span>
                        </li>
                      ))}
                    </ul>
                  </CardContent>
                </Card>
              </motion.div>
            )}

{/* Organizers */}
            {workshop.organizers && workshop.organizers.length > 0 && (
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: 0.9 }}
              >
                <Card>
                  <CardHeader>
                    <CardTitle>Organizers</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="flex flex-wrap gap-2">
                      {workshop.organizers.map((organizer: string, index: number) => (
                        <Badge key={index} variant="outline" className="text-sm">{organizer}</Badge>
                      ))}
                    </div>
                  </CardContent>
                </Card>
              </motion.div>
            )}
          </div>

{/* Sidebar */}
          <div className="space-y-6">
            {/* Registration Card */}
            <motion.div
              initial={{ opacity: 0, x: 20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.5, delay: 0.3 }}
            >
              <Card className="sticky top-24">
                <CardHeader>
                  <CardTitle>Registration</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  {workshop.registrationFee && (
                    <div>
                      <p className="text-sm text-muted-foreground mb-2 flex items-center gap-2">
                        <DollarSign className="h-4 w-4" />
                        Registration Fee
                      </p>
                      <div className="space-y-1">
                        {Object.entries(workshop.registrationFee).map(([category, fee]) => (
                          <div key={category} className="flex justify-between items-center text-sm">
                            <span className="text-muted-foreground capitalize">{category}:</span>
                            <span className="font-semibold text-foreground">{String(fee)}</span>
                          </div>
                        ))}
                      </div>
                    </div>
                  )}
                  {workshop.format && (
                    <div className="flex items-center gap-2 text-foreground">
                      <Video className="h-5 w-5 text-muted-foreground" />
                      <div>
                        <p className="text-sm text-muted-foreground">Format</p>
                        <p className="font-medium">{workshop.format}</p>
                      </div>
                    </div>
                  )}
                  {workshop.registrationDeadline && (
                    <div className="flex items-center gap-2 text-foreground">
                      <Calendar className="h-5 w-5 text-muted-foreground" />
                      <div>
                        <p className="text-sm text-muted-foreground">Registration Deadline</p>
                        <p className="font-medium">{formatDate(workshop.registrationDeadline)}</p>
                      </div>
                    </div>
                  )}
                  <div className="pt-4 border-t">
                    {workshop.registrationLink ? (
                      <Button 
                        className="w-full" 
                        size="lg"
                        disabled={workshop.status === 'Registration Closed'}
                        asChild
                      >
                        <a href={workshop.registrationLink} target="_blank" rel="noopener noreferrer">
                          {workshop.status === 'Registration Open' ? 'Register Now' : 
                           workshop.status === 'Almost Full' ? 'Register (Limited Seats)' : 'Registration Closed'}
                          <ExternalLink className="h-4 w-4 ml-2" />
                        </a>
                      </Button>
                    ) : (
                      <Button 
                        className="w-full" 
                        size="lg"
                        disabled
                      >
                        Registration Coming Soon
                      </Button>
                    )}
                  </div>
                  {workshop.contactEmail && (
                    <div className="pt-4 border-t">
                      <Button variant="outline" className="w-full" asChild>
                        <a href={`mailto:${workshop.contactEmail}`} className="flex items-center justify-center gap-2">
                          <Mail className="h-4 w-4" />
                          Contact Organizers
                        </a>
                      </Button>
                    </div>
                  )}
                  {workshop.websiteLink && (
                    <Button variant="ghost" className="w-full" asChild>
                      <a href={workshop.websiteLink} target="_blank" rel="noopener noreferrer" className="flex items-center justify-center gap-2">
                        <ExternalLink className="h-4 w-4" />
                        Event Website
                      </a>
                    </Button>
                  )}
                </CardContent>
              </Card>
            </motion.div>

{/* Tags */}
            {workshop.tags && workshop.tags.length > 0 && (
              <motion.div
                initial={{ opacity: 0, x: 20 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ duration: 0.5, delay: 0.4 }}
              >
                <Card>
                  <CardHeader>
                    <CardTitle>Tags</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="flex flex-wrap gap-2">
                      {workshop.tags.map((tag: string, index: number) => (
                        <Badge key={index} variant="secondary">{tag}</Badge>
                      ))}
                    </div>
                  </CardContent>
                </Card>
              </motion.div>
            )}
          </div>
        </div>

{/* Back Button */}
        <div className="mt-12 text-center">
          <Link to="/education">
            <Button variant="outline" size="lg">
              <ArrowLeft className="h-4 w-4 mr-2" />
              Back to All Events
            </Button>
          </Link>
        </div>
      </div>
    </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.