import AltivateLayout from '@/Layouts/AltivateLayout'; import { Head, Link } from '@inertiajs/react'; import { ArrowUpRight, Calendar, User, Folder, ChevronLeft, ChevronRight } from 'lucide-react'; interface Post { id: number; title: string; slug: string; excerpt: string | null; published_at: string; category?: { name: string, slug: string }; author?: { name: string }; media?: { url: string }; } interface Category { id: number; name: string; slug: string; } interface PaginationLink { url: string | null; label: string; active: boolean; } interface Props { posts: { data: Post[]; links: PaginationLink[]; current_page: number; last_page: number; }; categories: Category[]; } export default function Index({ posts, categories }: Props) { const postList = posts.data || []; return (
{/* Header */}

Altivate Insights

Strategies for the modern system.

All Articles {categories.map((cat) => ( {cat.name} ))}
{/* Blog Grid */}
{postList.length > 0 ? ( <>
{postList.map((post) => (
{post.media?.url ? ( {post.title} ) : (
)}
{post.category?.name || 'Insight'} {new Date(post.published_at).toLocaleDateString()}

{post.title}

{post.excerpt}

Read full story
))}
{/* Public Pagination */} {posts.last_page > 1 && (
{posts.links.map((link, i) => { const isPrev = i === 0; const isNext = i === posts.links.length - 1; if (isPrev) { return ( ); } if (isNext) { return ( ); } const isCurrent = link.active; const pageNum = parseInt(link.label); const isNear = Math.abs(pageNum - posts.current_page) <= 1; const isEdge = pageNum === 1 || pageNum === posts.last_page; if (isCurrent || isNear || isEdge) { return ( ); } if (pageNum === posts.current_page - 2 || pageNum === posts.current_page + 2) { return ...; } return null; })}
)} ) : (

No articles found in this category. Check back soon.

)}
); }