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

import { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import Navigation from '../components/Navigation';
import Footer from '../components/Footer';
import { FileText, ExternalLink, Download, Search, Filter, Users, Calendar, Award } from 'lucide-react';
import { Input } from '../components/ui/input';
import { Button } from '../components/ui/button';

interface Publication {
  id: string;
  title: string;
  authors: string[];
  journal?: string;
  conference?: string;
  year: number;
  volume?: string;
  pages: string;
  doi: string;
  abstract: string;
  category: string;
  type: string;
  citations: number;
  pdf: string;
  featured: boolean;
}

const PublicationsPage = () => {
  const [publications, setPublications] = useState<Publication[]>([]);
  const [filteredPubs, setFilteredPubs] = useState<Publication[]>([]);
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedCategory, setSelectedCategory] = useState('All');
  const [selectedYear, setSelectedYear] = useState('All');
  const [isLoading, setIsLoading] = useState(true);

useEffect(() => {
    fetch('/data/publications.json')
      .then(res => res.json())
      .then(data => {
        setPublications(data);
        setFilteredPubs(data);
        setIsLoading(false);
      })
      .catch(err => {
        console.error('Error loading publications:', err);
        setIsLoading(false);
      });
  }, []);

useEffect(() => {
    let filtered = publications;

// Search filter
    if (searchQuery) {
      filtered = filtered.filter(pub =>
        pub.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
        pub.authors.some(author => author.toLowerCase().includes(searchQuery.toLowerCase())) ||
        pub.abstract.toLowerCase().includes(searchQuery.toLowerCase())
      );
    }

// Category filter
    if (selectedCategory !== 'All') {
      filtered = filtered.filter(pub => pub.category === selectedCategory);
    }

// Year filter
    if (selectedYear !== 'All') {
      filtered = filtered.filter(pub => pub.year.toString() === selectedYear);
    }

setFilteredPubs(filtered);
  }, [searchQuery, selectedCategory, selectedYear, publications]);

const categories = ['All', ...Array.from(new Set(publications.map(p => p.category)))];
  const years = ['All', ...Array.from(new Set(publications.map(p => p.year.toString()))).sort((a, b) => Number(b) - Number(a))];
  const featuredPubs = publications.filter(p => p.featured);
  const totalCitations = publications.reduce((sum, pub) => sum + pub.citations, 0);

return (
    <div className="min-h-screen bg-background">
      <Navigation />

{/* Hero Section */}
      <section className="relative pt-32 pb-20 overflow-hidden bg-gradient-to-b from-primary/5 to-background">
        <div className="absolute inset-0 bg-gradient-to-br from-primary/10 via-accent/10 to-secondary/10" />
        <div className="absolute inset-0">
          <div className="absolute top-20 left-10 w-72 h-72 bg-primary/20 rounded-full blur-3xl animate-float" />
          <div className="absolute bottom-10 right-10 w-96 h-96 bg-accent/20 rounded-full blur-3xl animate-float-delayed" />
        </div>

<div className="container mx-auto px-4 relative z-10">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            className="text-center max-w-4xl mx-auto"
          >
            <div className="inline-flex items-center gap-2 px-4 py-2 bg-primary/10 text-primary rounded-full text-sm font-semibold mb-6">
              <FileText className="w-4 h-4" />
              Publications & Research Output
            </div>
            <h1 className="text-5xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-primary via-accent to-secondary bg-clip-text text-transparent">
              Our Publications
            </h1>
            <p className="text-xl text-muted-foreground mb-8 max-w-3xl mx-auto">
              Cutting-edge research published in top-tier journals and conferences, advancing the field of quantum technology.
            </p>

{/* Stats */}
            <div className="grid grid-cols-2 md:grid-cols-4 gap-6 max-w-3xl mx-auto">
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.2 }}
                className="bg-card/80 backdrop-blur-sm rounded-xl p-4 border border-border"
              >
                <div className="text-3xl font-bold text-primary">{publications.length}</div>
                <div className="text-sm text-muted-foreground">Total Publications</div>
              </motion.div>
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.3 }}
                className="bg-card/80 backdrop-blur-sm rounded-xl p-4 border border-border"
              >
                <div className="text-3xl font-bold text-accent">{totalCitations}</div>
                <div className="text-sm text-muted-foreground">Total Citations</div>
              </motion.div>
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.4 }}
                className="bg-card/80 backdrop-blur-sm rounded-xl p-4 border border-border"
              >
                <div className="text-3xl font-bold text-secondary">{featuredPubs.length}</div>
                <div className="text-sm text-muted-foreground">Featured Papers</div>
              </motion.div>
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.5 }}
                className="bg-card/80 backdrop-blur-sm rounded-xl p-4 border border-border"
              >
                <div className="text-3xl font-bold text-primary">{categories.length - 1}</div>
                <div className="text-sm text-muted-foreground">Research Areas</div>
              </motion.div>
            </div>
          </motion.div>
        </div>
      </section>

{/* Filters Section */}
      <section className="py-12 bg-muted/30 backdrop-blur-sm border-y border-border">
        <div className="container mx-auto px-4">
          <div className="max-w-6xl mx-auto">
            <div className="flex flex-col md:flex-row gap-4">
              {/* Search */}
              <div className="flex-1">
                <div className="relative">
                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground" />
                  <Input
                    type="text"
                    placeholder="Search publications, authors, keywords..."
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                    className="pl-10"
                  />
                </div>
              </div>

{/* Category Filter */}
              <div className="w-full md:w-48">
                <select
                  value={selectedCategory}
                  onChange={(e) => setSelectedCategory(e.target.value)}
                  className="w-full px-4 py-2 rounded-md border border-border bg-card text-foreground focus:ring-2 focus:ring-primary focus:border-transparent"
                >
                  {categories.map(cat => (
                    <option key={cat} value={cat}>{cat}</option>
                  ))}
                </select>
              </div>

{/* Year Filter */}
              <div className="w-full md:w-32">
                <select
                  value={selectedYear}
                  onChange={(e) => setSelectedYear(e.target.value)}
                  className="w-full px-4 py-2 rounded-md border border-border bg-card text-foreground focus:ring-2 focus:ring-primary focus:border-transparent"
                >
                  {years.map(year => (
                    <option key={year} value={year}>{year}</option>
                  ))}
                </select>
              </div>
            </div>

{/* Active Filters */}
            {(searchQuery || selectedCategory !== 'All' || selectedYear !== 'All') && (
              <div className="mt-4 flex flex-wrap gap-2">
                {searchQuery && (
                  <span className="px-3 py-1 bg-primary/10 text-primary rounded-full text-sm flex items-center gap-2">
                    Search: "{searchQuery}"
                    <button onClick={() => setSearchQuery('')} className="hover:text-primary/80">×</button>
                  </span>
                )}
                {selectedCategory !== 'All' && (
                  <span className="px-3 py-1 bg-accent/10 text-accent rounded-full text-sm flex items-center gap-2">
                    {selectedCategory}
                    <button onClick={() => setSelectedCategory('All')} className="hover:text-accent/80">×</button>
                  </span>
                )}
                {selectedYear !== 'All' && (
                  <span className="px-3 py-1 bg-secondary/10 text-secondary rounded-full text-sm flex items-center gap-2">
                    {selectedYear}
                    <button onClick={() => setSelectedYear('All')} className="hover:text-secondary/80">×</button>
                  </span>
                )}
                <button
                  onClick={() => {
                    setSearchQuery('');
                    setSelectedCategory('All');
                    setSelectedYear('All');
                  }}
                  className="px-3 py-1 text-muted-foreground hover:text-foreground text-sm underline"
                >
                  Clear all
                </button>
              </div>
            )}

<div className="mt-4 text-sm text-muted-foreground">
              Showing {filteredPubs.length} of {publications.length} publications
            </div>
          </div>
        </div>
      </section>

{/* Publications List */}
      <section className="py-16">
        <div className="container mx-auto px-4">
          <div className="max-w-6xl mx-auto">
            {isLoading ? (
              <div className="text-center py-12">
                <div className="animate-spin w-12 h-12 border-4 border-primary border-t-transparent rounded-full mx-auto mb-4" />
                <p className="text-muted-foreground">Loading publications...</p>
              </div>
            ) : filteredPubs.length === 0 ? (
              <div className="text-center py-12">
                <FileText className="w-16 h-16 text-muted-foreground mx-auto mb-4" />
                <p className="text-xl text-foreground">No publications found</p>
                <p className="text-muted-foreground mt-2">Try adjusting your filters or search query</p>
              </div>
            ) : (
              <div className="space-y-6">
                {filteredPubs.map((pub, index) => (
                  <motion.article
                    key={pub.id}
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: index * 0.1 }}
                    className="bg-card rounded-xl shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden border border-border group"
                  >
                    <div className="p-6">
                      <div className="flex flex-wrap items-start justify-between gap-4 mb-4">
                        <div className="flex-1">
                          <div className="flex items-center gap-2 mb-2">
                            {pub.featured && (
                              <span className="px-2 py-1 bg-yellow-500/10 text-yellow-600 dark:text-yellow-400 text-xs font-semibold rounded-full flex items-center gap-1">
                                <Award className="w-3 h-3" />
                                Featured
                              </span>
                            )}
                            <span className="px-2 py-1 bg-primary/10 text-primary text-xs font-semibold rounded-full">
                              {pub.category}
                            </span>
                            <span className="px-2 py-1 bg-muted text-muted-foreground text-xs rounded-full">
                              {pub.type}
                            </span>
                          </div>
                          <h3 className="text-xl font-bold text-foreground mb-2 group-hover:text-primary transition-colors">
                            {pub.title}
                          </h3>
                          <div className="flex items-center gap-2 text-sm text-muted-foreground mb-3">
                            <Users className="w-4 h-4" />
                            <span>{pub.authors.join(', ')}</span>
                          </div>
                          <div className="flex items-center gap-4 text-sm text-muted-foreground mb-3">
                            <div className="flex items-center gap-1">
                              <Calendar className="w-4 h-4" />
                              {pub.year}
                            </div>
                            {pub.journal && <span className="italic">{pub.journal}</span>}
                            {pub.conference && <span className="italic">{pub.conference}</span>}
                            {pub.volume && <span>Vol. {pub.volume}</span>}
                            <span>pp. {pub.pages}</span>
                          </div>
                          <p className="text-foreground leading-relaxed mb-4">
                            {pub.abstract}
                          </p>
                          <div className="text-sm text-muted-foreground">
                            <span className="font-semibold">{pub.citations}</span> citations • DOI: {pub.doi}
                          </div>
                        </div>
                      </div>

<div className="flex flex-wrap gap-3 pt-4 border-t border-border">
                        <Button
                          variant="outline"
                          size="sm"
                          className="border-primary text-primary hover:bg-primary/10"
                          asChild
                        >
                          <a href={`https://doi.org/${pub.doi}`} target="_blank" rel="noopener noreferrer">
                            <ExternalLink className="w-4 h-4 mr-2" />
                            View on Publisher
                          </a>
                        </Button>
                        <Button
                          variant="outline"
                          size="sm"
                          className="border-accent text-accent hover:bg-accent/10"
                          asChild
                        >
                          <a href={pub.pdf} download>
                            <Download className="w-4 h-4 mr-2" />
                            Download PDF
                          </a>
                        </Button>
                      </div>
                    </div>
                  </motion.article>
                ))}
              </div>
            )}
          </div>
        </div>
      </section>

<Footer />
    </div>
  );
};

export default PublicationsPage;

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.