import { ArrowRight, BookOpen, Search } from 'lucide-react'; import { Head, Link, router, usePage } from '@inertiajs/react'; import { BlogCard } from '@/Components/marketing/BlogCard'; import { MarketingFooter } from '@/Components/marketing/MarketingFooter'; import { MarketingNav } from '@/Components/marketing/MarketingNav'; import { NewsletterSignup } from '@/Components/marketing/NewsletterSignup'; import InertiaPagination from '@/Components/Shared/InertiaPagination'; import { Button } from '@/Components/ui/button'; import { trackEvent } from '@/lib/analytics'; import { BLOG_CATEGORY_FILTER_CLICK } from '@/lib/event-catalog'; import { cn } from '@/lib/utils'; import { type PageProps } from '@/types'; interface BlogPost { id: number; title: string; slug: string; excerpt: string; author: string; published_at: string; category: string | null; } interface PaginatedResponse { data: T[]; current_page: number; last_page: number; per_page: number; total: number; links: Array<{ url: string | null; label: string; active: boolean }>; } interface BlogIndexProps { canLogin: boolean; canRegister: boolean; posts: PaginatedResponse; categories: string[]; activeCategory: string | null; currentSearch: string | null; } const categoryLabels: Record = { 'gsc-analytics': 'GSC & Analytics', 'content-optimization': 'Content Optimization', 'keyword-strategy': 'Keyword Strategy', 'wordpress-seo': 'WordPress SEO', 'seo-measurement': 'SEO Measurement', }; type BlogIndexComponent = ((props: BlogIndexProps) => JSX.Element) & { disableGlobalUi?: boolean; }; const BlogIndex: BlogIndexComponent = ({ canLogin, canRegister, posts, categories, activeCategory, currentSearch, }) => { const appName = import.meta.env.VITE_APP_NAME || 'RankWiz'; const { app_url } = usePage().props; const buildPaginatedUrl = (page: number) => { const params = new URLSearchParams(); if (page > 1) params.set('page', String(page)); if (activeCategory) params.set('category', activeCategory); if (currentSearch) params.set('search', currentSearch); const qs = params.toString(); return `${app_url}/blog${qs ? `?${qs}` : ''}`; }; const handleCategoryFilter = (category: string | null) => { if (category) { trackEvent(BLOG_CATEGORY_FILTER_CLICK, { category }); } const params: Record = {}; if (category) params.category = category; if (currentSearch) params.search = currentSearch; router.get(route('blog.index'), params, { preserveScroll: true }); }; const handleSearch = (value: string) => { const params: Record = {}; if (value) params.search = value; if (activeCategory) params.category = activeCategory; router.get(route('blog.index'), params, { preserveState: true, replace: true }); }; return ( <> {(activeCategory || currentSearch || posts.current_page > 1) && ( )} {posts.current_page < posts.last_page && ( )} {posts.current_page > 1 && ( )} {posts.data.length > 0 && ( )}
{/* Hero Section */}

{appName} Blog
Data-Driven SEO Strategies

Learn how to analyze your traffic, optimize your content, and grow your WordPress site with actionable SEO insights.

{/* Search */}
{/* Category Filter */} {categories.length > 0 && (
)} {/* Blog Posts Grid */}
{posts.data.length > 0 ? ( <>
{posts.data.map((post) => ( ))}
{posts.last_page > 1 && (
)} ) : (
)}
{/* Newsletter Signup */} {posts.data.length > 0 && (
)} {/* CTA Section */}

Ready to Optimize Your WordPress Site?

Connect your Google Search Console and start analyzing your traffic in minutes.

{canRegister && ( )}
); }; BlogIndex.disableGlobalUi = true; export default BlogIndex;