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

import { useState } from "react";
import { Link } from "react-router-dom";
import Navigation from "@/components/Navigation";
import Footer from "@/components/Footer";
import { useNews } 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, Calendar, ArrowRight } from "lucide-react";
import { motion } from "framer-motion";

const NewsPage = () => {
  const { data: newsItems, isLoading, isError } = useNews();
  const [searchQuery, setSearchQuery] = useState("");
  const [selectedCategory, setSelectedCategory] = useState("All");

// Get unique categories
  const categories = ["All", ...Array.from(new Set(newsItems?.map((n: any) => n.category) || []))];

// Filter and sort news
  const filteredNews = newsItems
    ?.filter((item: any) => {
      const matchesSearch = item.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
                           item.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
                           item.tags?.some((tag: string) => tag.toLowerCase().includes(searchQuery.toLowerCase()));
      const matchesCategory = selectedCategory === "All" || item.category === selectedCategory;
      return matchesSearch && matchesCategory;
    })
    .sort((a: any, b: any) => new Date(b.date).getTime() - new Date(a.date).getTime());

// Separate featured and regular news
  const featuredNews = filteredNews?.filter((n: any) => n.featured);
  const regularNews = filteredNews?.filter((n: any) => !n.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 news...</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 news</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">
              News & Events
            </h1>
            <p className="text-xl text-muted-foreground max-w-3xl leading-relaxed">
              Stay updated with the latest developments, achievements, and events from CQT.
            </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 news by title, description, or tags..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="pl-10 h-12 text-base"
              />
            </div>

{/* Category Filter */}
            <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>
          </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 {filteredNews?.length || 0} article{filteredNews?.length !== 1 ? 's' : ''}
          </motion.div>

{/* Featured News */}
          {featuredNews && featuredNews.length > 0 && (
            <motion.div
              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 News
                <Badge variant="outline" className="border-primary text-primary">
                  {featuredNews.length}
                </Badge>
              </h2>
              <div className="grid lg:grid-cols-2 gap-6">
                {featuredNews.map((item: any, index: number) => (
                  <motion.div
                    key={item.id}
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.5, delay: index * 0.1 }}
                  >
                    <Link to={`/news/${item.id}`}>
                      <Card className="hover:shadow-2xl transition-all duration-300 border-2 border-secondary/20 h-full group cursor-pointer">
                        <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">
                            {item.description}
                          </CardDescription>
                        </CardHeader>
                        <CardContent>
                          <div className="space-y-3">
                            {item.author && (
                              <p className="text-sm text-muted-foreground">
                                By {item.author}
                              </p>
                            )}
                            <Button variant="link" className="p-0 h-auto text-secondary group/btn">
                              Read full article
                              <ArrowRight className="ml-1 h-4 w-4 group-hover/btn:translate-x-1 transition-transform" />
                            </Button>
                          </div>
                        </CardContent>
                      </Card>
                    </Link>
                  </motion.div>
                ))}
              </div>
            </motion.div>
          )}

{/* Regular News */}
          {regularNews && regularNews.length > 0 && (
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: 0.4 }}
            >
              {featuredNews && featuredNews.length > 0 && (
                <h2 className="text-2xl font-bold text-foreground mb-6">All News</h2>
              )}
              <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                {regularNews.map((item: any, index: number) => (
                  <motion.div
                    key={item.id}
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.5, delay: index * 0.05 }}
                  >
                    <Link to={`/news/${item.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-center justify-between mb-3">
                            <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-3">
                            {item.description}
                          </CardDescription>
                        </CardHeader>
                        <CardContent>
                          <Button variant="link" className="p-0 h-auto text-secondary group/btn text-sm">
                            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>
          )}

{/* No Results */}
          {filteredNews && filteredNews.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 news found</h3>
              <p className="text-muted-foreground mb-6">
                Try adjusting your search or filters
              </p>
              <Button
                variant="outline"
                onClick={() => {
                  setSearchQuery("");
                  setSelectedCategory("All");
                }}
              >
                Clear Filters
              </Button>
            </motion.div>
          )}
        </div>
      </main>
      <Footer />
    </div>
  );
};

export default NewsPage;

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.