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

import { useParams, Link } from "react-router-dom";
import { useNewsItem, useNews } from "@/lib/dataLoader";
import Navigation from "@/components/Navigation";
import Footer from "@/components/Footer";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { ArrowLeft, Calendar, User, Tag, ExternalLink, ArrowRight } from "lucide-react";
import { motion } from "framer-motion";

const NewsDetailPage = () => {
  const { id } = useParams();
  const { data: newsItem, isLoading, isError } = useNewsItem(id);
  const { data: allNews } = useNews();

// Get related news
  const relatedNews = allNews?.filter((item: any) => 
    newsItem?.relatedNews?.includes(item.id) || 
    (item.category === newsItem?.category && item.id !== newsItem?.id)
  ).slice(0, 3);

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 news article...</div>
        </main>
        <Footer />
      </div>
    );
  }

if (isError || !newsItem) {
    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">
            <h2 className="text-2xl font-bold mb-4">Article Not Found</h2>
            <Link to="/news">
              <Button variant="outline">
                <ArrowLeft className="mr-2 h-4 w-4" />
                Back to News
              </Button>
            </Link>
          </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-4xl mx-auto">
          {/* Back Button */}
          <motion.div
            initial={{ opacity: 0, x: -20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.3 }}
            className="mb-6"
          >
            <Link to="/news">
              <Button variant="ghost" size="sm">
                <ArrowLeft className="mr-2 h-4 w-4" />
                Back to News
              </Button>
            </Link>
          </motion.div>

{/* Article Header */}
          <motion.article
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            className="mb-8"
          >
            {/* Category & Featured Badge */}
            <div className="flex flex-wrap gap-2 mb-4">
              <Badge variant="secondary" className="bg-secondary/10 text-secondary border-secondary/20">
                {newsItem.category}
              </Badge>
              {newsItem.featured && (
                <Badge variant="outline" className="border-primary text-primary">
                  Featured
                </Badge>
              )}
            </div>

{/* Title */}
            <h1 className="text-4xl md:text-5xl font-bold text-foreground mb-6 leading-tight">
              {newsItem.title}
            </h1>

{/* Meta Information */}
            <div className="flex flex-wrap items-center gap-6 text-sm text-muted-foreground mb-6 pb-6 border-b border-border">
              <div className="flex items-center gap-2">
                <Calendar className="h-4 w-4" />
                <span>{new Date(newsItem.date).toLocaleDateString('en-US', { 
                  month: 'long', 
                  day: 'numeric', 
                  year: 'numeric' 
                })}</span>
              </div>
              {newsItem.author && (
                <div className="flex items-center gap-2">
                  <User className="h-4 w-4" />
                  <span>{newsItem.author}</span>
                </div>
              )}
            </div>

{/* Excerpt */}
            {newsItem.excerpt && (
              <p className="text-xl text-muted-foreground leading-relaxed mb-8 font-medium">
                {newsItem.excerpt}
              </p>
            )}
          </motion.article>

{/* Hero Image */}
          {newsItem.image && (
            <motion.div
              initial={{ opacity: 0, scale: 0.95 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ duration: 0.5, delay: 0.2 }}
              className="mb-12 rounded-xl overflow-hidden shadow-2xl"
            >
              <img
                src={newsItem.image}
                alt={newsItem.title}
                className="w-full h-96 object-cover"
              />
            </motion.div>
          )}

{/* Article Content */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.3 }}
            className="mb-12"
          >
            <div className="prose prose-lg max-w-none text-foreground">
              {newsItem.content?.split('\n').map((paragraph: string, idx: number) => (
                <p key={idx} className="mb-6 leading-relaxed text-lg">
                  {paragraph}
                </p>
              ))}
            </div>
          </motion.div>

{/* External Links */}
          {newsItem.externalLinks && newsItem.externalLinks.length > 0 && (
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: 0.4 }}
              className="mb-12"
            >
              <Card className="border-border bg-primary/5">
                <CardHeader>
                  <CardTitle className="text-lg flex items-center gap-2">
                    <ExternalLink className="h-5 w-5" />
                    Additional Resources
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <ul className="space-y-2">
                    {newsItem.externalLinks.map((link: any, idx: number) => (
                      <li key={idx}>
                        <a
                          href={link.url}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="inline-flex items-center gap-2 text-primary hover:underline"
                        >
                          <ExternalLink className="h-4 w-4" />
                          {link.title}
                        </a>
                      </li>
                    ))}
                  </ul>
                </CardContent>
              </Card>
            </motion.div>
          )}

{/* Tags */}
          {newsItem.tags && newsItem.tags.length > 0 && (
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ duration: 0.5, delay: 0.5 }}
              className="mb-12"
            >
              <div className="flex items-center gap-3 flex-wrap">
                <Tag className="h-4 w-4 text-muted-foreground" />
                {newsItem.tags.map((tag: string) => (
                  <Badge key={tag} variant="outline" className="text-sm">
                    {tag}
                  </Badge>
                ))}
              </div>
            </motion.div>
          )}

{/* Related News */}
          {relatedNews && relatedNews.length > 0 && (
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: 0.6 }}
              className="mb-12"
            >
              <h2 className="text-2xl font-bold text-foreground mb-6">Related News</h2>
              <div className="grid md:grid-cols-3 gap-6">
                {relatedNews.map((item: any, idx: number) => (
                  <motion.div
                    key={item.id}
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: idx * 0.1 }}
                  >
                    <Link to={`/news/${item.id}`}>
                      <Card className="h-full border-border hover:shadow-xl transition-all duration-300 hover:-translate-y-1 group cursor-pointer">
                        <CardHeader>
                          <div className="flex items-center justify-between mb-2">
                            <Badge variant="secondary" className="bg-secondary/10 text-secondary border-secondary/20 text-xs">
                              {item.category}
                            </Badge>
                            <div className="flex items-center gap-1 text-xs text-muted-foreground">
                              <Calendar className="h-3 w-3" />
                              {new Date(item.date).toLocaleDateString('en-US', { 
                                month: 'short', 
                                day: 'numeric'
                              })}
                            </div>
                          </div>
                          <CardTitle className="text-base group-hover:text-primary transition-colors line-clamp-2">
                            {item.title}
                          </CardTitle>
                          <CardDescription className="text-sm line-clamp-2">
                            {item.description}
                          </CardDescription>
                        </CardHeader>
                        <CardContent>
                          <Button variant="link" className="p-0 h-auto text-secondary group/btn">
                            Read more
                            <ArrowRight className="ml-1 h-3 w-3 group-hover/btn:translate-x-1 transition-transform" />
                          </Button>
                        </CardContent>
                      </Card>
                    </Link>
                  </motion.div>
                ))}
              </div>
            </motion.div>
          )}

{/* Back to News Button */}
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.5, delay: 0.7 }}
            className="text-center"
          >
            <Link to="/news">
              <Button size="lg" variant="outline">
                <ArrowLeft className="mr-2 h-4 w-4" />
                View All News
              </Button>
            </Link>
          </motion.div>
        </div>
      </main>
      <Footer />
    </div>
  );
};

export default NewsDetailPage;

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.