import React, { useState, useMemo } from 'react'; import FrontLayout from '../Layouts/FrontLayout'; import { Head, Link } from '@inertiajs/react'; import { Calendar, Clock, Send, ArrowRight, Search, Tag, } from 'lucide-react'; import { cn } from '@/lib/utils'; import { News } from '@/types/Frontend/Index'; import { newsShow } from '@/actions/App/Http/Controllers/FrontController'; import PageHero from '@/components/frontend/PageHero'; import parse from 'html-react-parser'; interface NewsEventProps { newsEvents: News[]; } const NewsEvents = ({ newsEvents }: NewsEventProps) => { const [activeCategory, setActiveCategory] = useState('All'); const limitText = (html: any, limit: number) => { if (html.length <= limit) return html; return html.substring(0, limit) + "..."; }; // ✅ Unique categories + All tab const categories = useMemo(() => { const unique = Array.from( new Set(newsEvents.map(item => item.category)) ); return ['All', ...unique]; }, [newsEvents]); // ✅ Filtered items const filteredNews = useMemo(() => { if (activeCategory === 'All') return newsEvents; return newsEvents.filter(item => item.category === activeCategory); }, [activeCategory, newsEvents]); return (

{/* ================= FILTER & SEARCH BAR ================= */}

{/* Categories */}

{categories.map((cat) => ( ))}

{/* Search (UI only) */}

{/* ================= ARTICLES GRID ================= */}

{filteredNews.map((item) => (

{item.category}

{new Date(item.created_at).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })} {new Date(item.created_at).toLocaleTimeString('en-US', { hour: 'numeric', minute: 'numeric' })}

{limitText(item.title, 20)}

{parse(limitText(item.description, 30))}

Read Full Article

))}

{filteredNews.length === 0 && (

No articles found.

)}

{/* ================= NEWSLETTER ================= */}

NEVER MISS AN UPDATE

); }; export default NewsEvents;