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

Name	Size	Permission	Action
ui	[ DIR ]	drwxr-xr-x
About.tsx	2.85 KB	-rw-r--r--
AdminLayout.tsx	4.85 KB	-rw-r--r--
Contact.tsx	10.4 KB	-rw-r--r--
DataTable.tsx	4.98 KB	-rw-r--r--
Footer.tsx	12.02 KB	-rw-r--r--
Hero.tsx	11.92 KB	-rw-r--r--
NavLink.tsx	751 B	-rw-r--r--
Navigation.tsx	24.92 KB	-rw-r--r--
News.tsx	3.48 KB	-rw-r--r--
ParticleNetwork.tsx	4.09 KB	-rw-r--r--
ProtectedRoute.tsx	813 B	-rw-r--r--
QuantumCircuit.tsx	3.47 KB	-rw-r--r--
RebuildWebsiteButton.tsx	4.28 KB	-rw-r--r--
Research.tsx	3.68 KB	-rw-r--r--
StatsCard.tsx	4.87 KB	-rw-r--r--
Team.tsx	6.63 KB	-rw-r--r--

Code Editor : Research.tsx

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { ExternalLink } from "lucide-react";
import { useResearch } from "@/lib/dataLoader";
import { Link } from "react-router-dom";

const Research = () => {
  const { data: projects, isLoading, isError } = useResearch();

if (isLoading) return <div className="py-24 text-center">Loading projects...</div>;
  if (isError) return <div className="py-24 text-center">Failed to load research data</div>;

return (
    <section id="research" className="py-24 bg-background">
      <div className="container mx-auto px-4">
        <div className="max-w-6xl mx-auto">
          {/* Header */}
          <div className="mb-16 animate-fade-in">
            <h2 className="text-4xl md:text-5xl font-bold text-foreground mb-6">
              Research Projects
            </h2>
            <p className="text-xl text-muted-foreground max-w-3xl leading-relaxed">
              Our research spans fundamental quantum physics to practical quantum technologies, 
              with focus on computation, communication, and sensing applications.
            </p>
          </div>

{/* Projects Grid */}
          <div className="grid md:grid-cols-2 gap-6">
            {projects?.map((project: any, index: number) => (
              <Link to={`/research/${project.id}`} key={project.id}>
                <Card
                  className="hover:shadow-quantum transition-all duration-300 animate-slide-up border-border h-full group cursor-pointer"
                  style={{ animationDelay: `${index * 0.1}s` }}
                >
                  <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="flex flex-wrap gap-2">
                      {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} more
                        </Badge>
                      )}
                    </div>
                  </CardContent>
                </Card>
              </Link>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export default Research;

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.