import { Head, Link, router } from '@inertiajs/react'; import { useLaravelReactI18n } from 'laravel-react-i18n'; import { ArrowDownWideNarrow, ChevronLeft, ChevronRight, Search, SearchX, X, } from 'lucide-react'; import { useEffect, useRef, useState } from 'react'; import type { ReactNode } from 'react'; import BlogCard from '@/components/frontend/BlogCard'; import { Combobox } from '@/components/ui/combobox'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/components/ui/select'; import { cn } from '@/lib/utils'; import type { BlogCategoryPublic, PostPublic } from '@/types/models'; type PaginationLink = { url: string | null; label: string; active: boolean; }; type PaginatedPosts = { data: PostPublic[]; links: PaginationLink[]; current_page: number; last_page: number; prev_page_url: string | null; next_page_url: string | null; total: number; from: number | null; to: number | null; }; type BlogFilters = { search: string; sort: string; categories: string[]; }; type Props = { posts: PaginatedPosts; categories: BlogCategoryPublic[]; filters: BlogFilters; locale: string; seo: { title: string; description: string; }; }; const SORT_OPTIONS = [ { value: 'newest', labelKey: 'blog.sort_newest' }, { value: 'oldest', labelKey: 'blog.sort_oldest' }, { value: 'title_asc', labelKey: 'blog.sort_title_asc' }, { value: 'title_desc', labelKey: 'blog.sort_title_desc' }, ] as const; /** * Halaman Blog (/{locale}/blog) — grid published + toolbar profesional: * pencarian live, sort, filter kategori multi-select (dropdown), count hasil. */ export default function Blog({ posts, categories, filters, locale, seo, }: Props) { const { t } = useLaravelReactI18n(); const isEn = locale === 'en'; const [searchInput, setSearchInput] = useState(filters.search); const debounceRef = useRef(null); useEffect(() => { return () => { if (debounceRef.current) { window.clearTimeout(debounceRef.current); } }; }, []); /** Navigasi dengan filter — tanpa reload halaman penuh (Inertia partial). */ const navigate = (patch: Partial, page = 1) => { const next = { ...filters, ...patch }; const query: Record = { page: String(page) }; if (next.search) { query.search = next.search; } if (next.sort !== 'newest') { query.sort = next.sort; } if (next.categories.length > 0) { query.categories = next.categories.join(','); } router.get(`/${locale}/blog`, query, { preserveState: true, preserveScroll: true, only: ['posts', 'filters'], }); }; const handleSearchChange = (value: string) => { setSearchInput(value); if (debounceRef.current) { window.clearTimeout(debounceRef.current); } debounceRef.current = window.setTimeout(() => { navigate({ search: value.trim() }); }, 350); }; const resetFilters = () => { setSearchInput(''); navigate({ search: '', sort: 'newest', categories: [] }); }; const hasActiveFilters = filters.search !== '' || filters.sort !== 'newest' || filters.categories.length > 0; return ( <>

{t('nav.blog')}

{t('blog.title')}

{t('blog.subtitle')}

{/* Toolbar: search + sort + kategori multi-select */}
handleSearchChange(event.target.value) } placeholder={t('blog.search_placeholder')} aria-label={t('blog.search_aria')} className="h-10 w-full rounded-lg border bg-background pr-9 pl-9 text-sm shadow-sm focus:ring-2 focus:ring-ring focus:outline-none" /> {searchInput !== '' && ( )}
{categories.length > 0 && ( ({ value: category.slug, label: category.name, }))} value={filters.categories} onValueChange={(value) => navigate({ categories: Array.isArray(value) ? value : [], }) } clearOptionLabel={t('blog.categories_all')} placeholder={t('blog.categories')} searchPlaceholder={t('blog.categories_search')} emptyText={t('blog.categories_empty')} className="w-auto rounded-lg font-medium" /> )} {hasActiveFilters && ( )}
{/* Jumlah hasil */}

{t('blog.results', { count: posts.total })}

{posts.data.length > 0 ? ( <>
{posts.data.map((post) => ( ))}
{posts.last_page > 1 && ( )} ) : (

{t('blog.results_empty')}

)}
); } function PaginationArrow({ href, disabled, ariaLabel, children, }: { href: string | null; disabled: boolean; ariaLabel: string; children: ReactNode; }) { if (disabled || !href) { return ( {children} ); } return ( {children} ); }