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

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Calendar, ArrowRight } from "lucide-react";
import { Button } from "@/components/ui/button";
import { useNews } from "@/lib/dataLoader";
import { Link } from "react-router-dom";

const News = () => {
  const { data: newsItems, isLoading, isError } = useNews();

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

return (
    <section id="activities" 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">
              News & Events
            </h2>
            <p className="text-xl text-muted-foreground max-w-3xl leading-relaxed">
              Stay updated with the latest developments, achievements, and events from CQT.
            </p>
          </div>

{/* News Grid */}
          <div className="grid md:grid-cols-2 gap-6 mb-12">
            {newsItems?.slice(0, 4).map((item: any, index: number) => (
              <Link to={`/news/${item.id}`} key={item.id}>
                <Card
                  className="hover:shadow-quantum transition-all duration-300 animate-slide-up border-border cursor-pointer group h-full"
                  style={{ animationDelay: `${index * 0.1}s` }}
                >
                  <CardHeader>
                    <div className="flex items-center justify-between mb-3">
                      <Badge variant="secondary" className="bg-secondary/10 text-secondary border-secondary/20">
                        {item.category}
                      </Badge>
                      <div className="flex items-center gap-1 text-sm text-muted-foreground">
                        <Calendar className="h-4 w-4" />
                        {new Date(item.date).toLocaleDateString('en-US', { 
                          month: 'short', 
                          day: 'numeric', 
                          year: 'numeric' 
                        })}
                      </div>
                    </div>
                    <CardTitle className="text-xl group-hover:text-primary transition-colors">
                      {item.title}
                    </CardTitle>
                    <CardDescription className="text-base 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-4 w-4 group-hover/btn:translate-x-1 transition-transform" />
                    </Button>
                  </CardContent>
                </Card>
              </Link>
            ))}
          </div>

{/* CTA */}
          <div className="text-center animate-fade-in">
            <Link to="/news">
              <Button
                size="lg"
                className="bg-primary hover:bg-primary/90"
              >
                View All News
                <ArrowRight className="ml-2 h-4 w-4" />
              </Button>
            </Link>
          </div>
        </div>
      </div>
    </section>
  );
};

export default News;

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.