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

import { useState, useEffect } from "react";
import { Link, useLocation } from "react-router-dom";
import Navigation from "@/components/Navigation";
import Footer from "@/components/Footer";
import { useResearch } from "@/lib/dataLoader";
import { Card, CardContent, CardDescription, 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, Filter, ExternalLink } from "lucide-react";
import { motion } from "framer-motion";
import { scrollToHash } from "@/lib/scroll";

const ResearchPage = () => {
  const { data: projects, isLoading, isError } = useResearch();
  const location = useLocation();
  const [searchQuery, setSearchQuery] = useState("");
  const [selectedCategory, setSelectedCategory] = useState("All");
  const [selectedStatus, setSelectedStatus] = useState("All");

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

// Get unique categories and statuses
  const categories = ["All", ...Array.from(new Set(projects?.map((p: any) => p.category) || []))];
  const statuses = ["All", ...Array.from(new Set(projects?.map((p: any) => p.status) || []))];

// Filter projects
  const filteredProjects = projects?.filter((project: any) => {
    const matchesSearch = project.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
                         project.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
                         project.tags.some((tag: string) => tag.toLowerCase().includes(searchQuery.toLowerCase()));
    const matchesCategory = selectedCategory === "All" || project.category === selectedCategory;
    const matchesStatus = selectedStatus === "All" || project.status === selectedStatus;
    return matchesSearch && matchesCategory && matchesStatus;
  });

// Separate featured and regular projects
  const featuredProjects = filteredProjects?.filter((p: any) => p.featured);
  const regularProjects = filteredProjects?.filter((p: any) => !p.featured);

if (isLoading) {
    return (
      <div className="min-h-screen">
        <Navigation />
        <main id="main-content" className="container mx-auto px-4 py-24">
          <div className="text-center py-20">Loading research projects...</div>
        </main>
        <Footer />
      </div>
    );
  }

if (isError) {
    return (
      <div className="min-h-screen">
        <Navigation />
        <main id="main-content" className="container mx-auto px-4 py-24">
          <div className="text-center py-20">Failed to load research data</div>
        </main>
        <Footer />
      </div>
    );
  }

return (
    <div className="min-h-screen bg-background">
      <Navigation />
      <main id="main-content" className="container mx-auto px-4 py-24">
        <div className="max-w-7xl mx-auto">
          {/* Header */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            className="mb-12"
          >
            <h1 className="text-4xl md:text-5xl font-bold text-foreground mb-4">
              Research Projects
            </h1>
            <p className="text-xl text-muted-foreground max-w-3xl leading-relaxed">
              Explore our cutting-edge research spanning quantum computing, communication, 
              sensing, and fundamental quantum physics.
            </p>
          </motion.div>

{/* Search and Filters */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.1 }}
            className="mb-8 space-y-4"
          >
            {/* Search Bar */}
            <div className="relative">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
              <Input
                type="text"
                placeholder="Search projects by title, description, or tags..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="pl-10 h-12 text-base"
              />
            </div>

{/* Filter Pills */}
            <div className="flex flex-wrap items-center gap-4">
              <div className="flex items-center gap-2">
                <Filter className="h-4 w-4 text-muted-foreground" />
                <span className="text-sm font-medium text-muted-foreground">Category:</span>
              </div>
              <div className="flex flex-wrap gap-2">
                {categories.map((category) => (
                  <Button
                    key={category}
                    variant={selectedCategory === category ? "default" : "outline"}
                    size="sm"
                    onClick={() => setSelectedCategory(category)}
                    className="h-8"
                  >
                    {category}
                  </Button>
                ))}
              </div>
            </div>

<div className="flex flex-wrap items-center gap-4">
              <div className="flex items-center gap-2">
                <Filter className="h-4 w-4 text-muted-foreground" />
                <span className="text-sm font-medium text-muted-foreground">Status:</span>
              </div>
              <div className="flex flex-wrap gap-2">
                {statuses.map((status) => (
                  <Button
                    key={status}
                    variant={selectedStatus === status ? "default" : "outline"}
                    size="sm"
                    onClick={() => setSelectedStatus(status)}
                    className="h-8"
                  >
                    {status}
                  </Button>
                ))}
              </div>
            </div>
          </motion.div>

{/* Results Count */}
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.3, delay: 0.2 }}
            className="mb-6 text-sm text-muted-foreground"
          >
            Showing {filteredProjects?.length || 0} project{filteredProjects?.length !== 1 ? 's' : ''}
          </motion.div>

{/* Featured Projects */}
          {featuredProjects && featuredProjects.length > 0 && (
            <motion.div
              id="projects"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: 0.3 }}
              className="mb-12"
            >
              <h2 className="text-2xl font-bold text-foreground mb-6 flex items-center gap-2">
                Featured Projects
                <Badge variant="outline" className="border-primary text-primary">
                  {featuredProjects.length}
                </Badge>
              </h2>
              <div className="grid lg:grid-cols-2 gap-6">
                {featuredProjects.map((project: any, index: number) => (
                  <motion.div
                    key={project.id}
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.5, delay: index * 0.1 }}
                  >
                    <Link to={`/research/${project.id}`}>
                      <Card className="hover:shadow-2xl transition-all duration-300 border-2 border-primary/20 h-full group cursor-pointer">
                        <CardHeader>
                          <div className="flex items-start justify-between mb-2">
                            <Badge variant="secondary" className="bg-secondary/10 text-secondary border-secondary/20">
                              {project.category}
                            </Badge>
                            <Badge variant="outline" className={`${
                              project.status === 'Active' ? 'border-green-500 text-green-500' : 
                              project.status === 'Planning' ? 'border-yellow-500 text-yellow-500' : 
                              'border-gray-500 text-gray-500'
                            }`}>
                              {project.status}
                            </Badge>
                          </div>
                          <CardTitle className="text-xl mb-2 flex items-center gap-2 group-hover:text-primary transition-colors">
                            {project.title}
                            <ExternalLink className="h-4 w-4 opacity-0 group-hover:opacity-100 transition-opacity" />
                          </CardTitle>
                          <CardDescription className="text-base">
                            {project.description}
                          </CardDescription>
                        </CardHeader>
                        <CardContent>
                          <div className="space-y-3">
                            <div className="flex flex-wrap gap-2">
                              {project.tags.slice(0, 4).map((tag: string) => (
                                <Badge key={tag} variant="outline" className="text-xs">
                                  {tag}
                                </Badge>
                              ))}
                              {project.tags.length > 4 && (
                                <Badge variant="outline" className="text-xs">
                                  +{project.tags.length - 4} more
                                </Badge>
                              )}
                            </div>
                            <div className="text-sm text-muted-foreground">
                              <span className="font-medium">Team Lead:</span> {project.teamLead}
                            </div>
                          </div>
                        </CardContent>
                      </Card>
                    </Link>
                  </motion.div>
                ))}
              </div>
            </motion.div>
          )}

{/* Regular Projects */}
          {regularProjects && regularProjects.length > 0 && (
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: 0.4 }}
            >
              {featuredProjects && featuredProjects.length > 0 && (
                <h2 className="text-2xl font-bold text-foreground mb-6">All Projects</h2>
              )}
              <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                {regularProjects.map((project: any, index: number) => (
                  <motion.div
                    key={project.id}
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.5, delay: index * 0.05 }}
                  >
                    <Link to={`/research/${project.id}`}>
                      <Card className="hover:shadow-xl transition-all duration-300 hover:-translate-y-1 border-border h-full group cursor-pointer">
                        <CardHeader>
                          <div className="flex items-start justify-between mb-2">
                            <Badge variant="secondary" className="bg-secondary/10 text-secondary border-secondary/20 text-xs">
                              {project.category}
                            </Badge>
                            <Badge variant="outline" className={`text-xs ${
                              project.status === 'Active' ? 'border-green-500 text-green-500' : 
                              project.status === 'Planning' ? 'border-yellow-500 text-yellow-500' : 
                              'border-gray-500 text-gray-500'
                            }`}>
                              {project.status}
                            </Badge>
                          </div>
                          <CardTitle className="text-lg mb-2 flex items-center gap-2 group-hover:text-primary transition-colors">
                            <span className="line-clamp-2">{project.title}</span>
                            <ExternalLink className="h-4 w-4 flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity" />
                          </CardTitle>
                          <CardDescription className="text-sm line-clamp-3">
                            {project.description}
                          </CardDescription>
                        </CardHeader>
                        <CardContent>
                          <div className="flex flex-wrap gap-1.5">
                            {project.tags.slice(0, 3).map((tag: string) => (
                              <Badge key={tag} variant="outline" className="text-xs">
                                {tag}
                              </Badge>
                            ))}
                            {project.tags.length > 3 && (
                              <Badge variant="outline" className="text-xs">
                                +{project.tags.length - 3}
                              </Badge>
                            )}
                          </div>
                        </CardContent>
                      </Card>
                    </Link>
                  </motion.div>
                ))}
              </div>
            </motion.div>
          )}

{/* No Results */}
          {filteredProjects && filteredProjects.length === 0 && (
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ duration: 0.5 }}
              className="text-center py-20"
            >
              <Search className="h-16 w-16 text-muted-foreground mx-auto mb-4 opacity-50" />
              <h3 className="text-2xl font-bold text-foreground mb-2">No projects found</h3>
              <p className="text-muted-foreground mb-6">
                Try adjusting your search or filters
              </p>
              <Button
                variant="outline"
                onClick={() => {
                  setSearchQuery("");
                  setSelectedCategory("All");
                  setSelectedStatus("All");
                }}
              >
                Clear Filters
              </Button>
            </motion.div>
          )}
        </div>
      </main>
      <Footer />
    </div>
  );
};

export default ResearchPage;

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.