auto-claude: subtask-1-3 - Add filtering logic and integrate components into blog page

- Created BlogList client component with search and category filtering
- Integrated SearchBar and CategoryFilter components
- Implemented case-insensitive search by title/excerpt/tags
- Added category filtering with AND logic for combined filters
- Updated pagination to work with filtered results
- Added search placeholder translations for de/en/sr
- Moved blog card and pagination logic to client component

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

src/app/[locale]/blog/page.tsx

@@ -1,16 +1,12 @@
 import { setRequestLocale } from 'next-intl/server';
 import { getTranslations } from 'next-intl/server';
-import { ArrowRight, Calendar, Tag, ExternalLink, ChevronLeft, ChevronRight } from 'lucide-react';
+import { ArrowRight } from 'lucide-react';
-import Link from 'next/link';
-import Image from 'next/image';
 import type { Metadata } from 'next';
 import { getAllBlogPosts, BlogPost } from '@/lib/blog';
-
+import { BlogList } from '@/components/blog/BlogList';
-const POSTS_PER_PAGE = 12;
 
 type Props = {
   params: Promise<{ locale: string }>;
-  searchParams: Promise<{ page?: string }>;
 };
 
 // Legacy blog posts with translations (these have manual translations)
@@ -307,277 +303,9 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
   };
 }
 
-function getFormattedDate(date: string, locale: string) {
-  const languageMap: Record<string, string> = {
-    de: 'de-DE',
-    en: 'en-US',
-    sr: 'sr-RS',
-  };
 
-  return new Date(date).toLocaleDateString(languageMap[locale] || 'de-DE', {
+export default async function BlogPage({ params }: Props) {
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric',
-  });
-}
-
-function getImagePath(coverImage: string) {
-  if (coverImage.startsWith('http')) {
-    return coverImage;
-  }
-  return coverImage.replace('/blog/', '/images/posts/');
-}
-
-// Placeholder image for posts without cover images
-const PLACEHOLDER_IMAGE = 'data:image/svg+xml,' + encodeURIComponent(`
-  <svg width="1792" height="1024" xmlns="http://www.w3.org/2000/svg">
-    <rect width="100%" height="100%" fill="#181C14"/>
-    <rect x="40%" y="35%" width="20%" height="30%" rx="8" fill="#697565" opacity="0.3"/>
-    <circle cx="50%" cy="45%" r="8%" fill="#697565" opacity="0.2"/>
-    <rect x="30%" y="65%" width="40%" height="4%" rx="2" fill="#465B50" opacity="0.3"/>
-    <rect x="35%" y="72%" width="30%" height="3%" rx="2" fill="#465B50" opacity="0.2"/>
-  </svg>
-`);
-
-// Known existing images (from public/images/posts/)
-const EXISTING_IMAGES = new Set([
-  '/images/posts/erp-integration-breuninger/cover.jpg',
-  '/images/posts/fullstack-development-timetracking/cover.jpg',
-  '/images/posts/rfid-automation/cover.jpg',
-  '/images/posts/automated-ad-creatives/cover.jpg',
-]);
-
-// Blog image component with fallback
-function BlogImage({ src, alt, fallback }: { src: string; alt: string; fallback: string }) {
-  const imageSrc = EXISTING_IMAGES.has(src) ? src : fallback;
-
-  return (
-    <Image
-      src={imageSrc}
-      alt={alt}
-      fill
-      sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
-      className="object-cover transition-transform duration-700 group-hover:scale-110"
-      unoptimized={imageSrc.startsWith('data:')}
-    />
-  );
-}
-
-function BlogPostCard({ post, locale }: { post: BlogPost; locale: string }) {
-  return (
-    <Link
-      href={`/${locale}/blog/${post.slug}`}
-      className="group relative block bg-zinc-900/50 backdrop-blur-sm
-               rounded-xl shadow-lg hover:shadow-2xl
-               ring-1 ring-zinc-800 hover:ring-zinc-700
-               transition-all duration-500 focus:outline-none focus:ring-2
-               focus:ring-zinc-600 focus:ring-offset-2 focus:ring-offset-zinc-950
-               transform hover:-translate-y-1"
-    >
-      <div className="relative overflow-hidden rounded-xl">
-        {/* Image Container */}
-        <div className="aspect-[16/9] w-full relative overflow-hidden bg-zinc-900">
-          <BlogImage
-            src={getImagePath(post.coverImage)}
-            alt={post.title}
-            fallback={PLACEHOLDER_IMAGE}
-          />
-          <div className="absolute inset-x-0 -bottom-20 top-0 bg-gradient-to-t from-zinc-900 via-zinc-900/70 to-transparent opacity-95" />
-        </div>
-
-        {/* Content */}
-        <div className="relative -mt-2 p-6 bg-zinc-900 z-10">
-          <div className="flex items-center gap-4 mb-4 text-zinc-500">
-            <div className="flex items-center gap-2 text-sm">
-              <Calendar className="h-4 w-4" />
-              <span>{getFormattedDate(post.date, locale)}</span>
-            </div>
-            {post.tags && post.tags.length > 0 && (
-              <div className="flex items-center gap-2 text-sm">
-                <Tag className="h-4 w-4" />
-                <span>{post.tags.length} Tags</span>
-              </div>
-            )}
-          </div>
-
-          <h3 className="text-xl font-semibold text-white mb-3
-                       group-hover:text-zinc-100 transition-colors duration-300">
-            {post.title}
-          </h3>
-          <p className="text-zinc-400 text-sm line-clamp-2 mb-4
-                      group-hover:text-zinc-300 transition-colors duration-300">
-            {post.excerpt}
-          </p>
-
-          {/* Tags */}
-          <div className="flex flex-wrap gap-2">
-            {post.tags?.slice(0, 3).map((tag, index) => (
-              <span
-                key={index}
-                className="px-3 py-1 bg-zinc-800/50
-                         text-sm text-zinc-400 rounded-full
-                         ring-1 ring-zinc-700/50 group-hover:ring-zinc-600/50
-                         group-hover:bg-zinc-800/70 group-hover:text-zinc-300
-                         transition-all duration-300"
-              >
-                {tag}
-              </span>
-            ))}
-            {post.tags && post.tags.length > 3 && (
-              <span className="text-sm text-zinc-600">
-                +{post.tags.length - 3} more
-              </span>
-            )}
-          </div>
-
-          {/* Link Icon */}
-          <div className="absolute top-6 right-6 p-2.5 rounded-full
-                        bg-zinc-800/60 backdrop-blur-sm ring-1 ring-zinc-700/50
-                        opacity-0 group-hover:opacity-100
-                        transform translate-y-2 group-hover:translate-y-0
-                        transition-all duration-300">
-            <ExternalLink className="h-4 w-4 text-zinc-400" />
-          </div>
-        </div>
-      </div>
-    </Link>
-  );
-}
-
-// Pagination component
-function Pagination({
-  currentPage,
-  totalPages,
-  locale,
-  t,
-}: {
-  currentPage: number;
-  totalPages: number;
-  locale: string;
-  t: (key: string) => string;
-}) {
-  const getPageNumbers = () => {
-    const pages: (number | 'ellipsis')[] = [];
-
-    if (totalPages <= 7) {
-      // Show all pages if 7 or fewer
-      for (let i = 1; i <= totalPages; i++) {
-        pages.push(i);
-      }
-    } else {
-      // Always show first page
-      pages.push(1);
-
-      if (currentPage > 3) {
-        pages.push('ellipsis');
-      }
-
-      // Show pages around current
-      const start = Math.max(2, currentPage - 1);
-      const end = Math.min(totalPages - 1, currentPage + 1);
-
-      for (let i = start; i <= end; i++) {
-        pages.push(i);
-      }
-
-      if (currentPage < totalPages - 2) {
-        pages.push('ellipsis');
-      }
-
-      // Always show last page
-      pages.push(totalPages);
-    }
-
-    return pages;
-  };
-
-  if (totalPages <= 1) return null;
-
-  return (
-    <nav className="flex items-center justify-center gap-2 mt-12 sm:mt-16" aria-label="Pagination">
-      {/* Previous button */}
-      {currentPage > 1 ? (
-        <Link
-          href={`/${locale}/blog${currentPage > 2 ? `?page=${currentPage - 1}` : ''}`}
-          className="flex items-center gap-1 px-3 py-2 text-sm text-zinc-400 hover:text-white
-                     bg-zinc-800/50 hover:bg-zinc-800 rounded-lg ring-1 ring-zinc-700/50
-                     hover:ring-zinc-600 transition-all duration-200"
-          aria-label={t('ui.pagination.previous')}
-        >
-          <ChevronLeft className="h-4 w-4" />
-          <span className="hidden sm:inline">{t('ui.pagination.previous')}</span>
-        </Link>
-      ) : (
-        <span
-          className="flex items-center gap-1 px-3 py-2 text-sm text-zinc-600
-                     bg-zinc-800/30 rounded-lg ring-1 ring-zinc-800/50 cursor-not-allowed"
-          aria-disabled="true"
-        >
-          <ChevronLeft className="h-4 w-4" />
-          <span className="hidden sm:inline">{t('ui.pagination.previous')}</span>
-        </span>
-      )}
-
-      {/* Page numbers */}
-      <div className="flex items-center gap-1">
-        {getPageNumbers().map((page, index) => {
-          if (page === 'ellipsis') {
-            return (
-              <span key={`ellipsis-${index}`} className="px-2 text-zinc-600">
-                ...
-              </span>
-            );
-          }
-
-          const isCurrentPage = page === currentPage;
-
-          return (
-            <Link
-              key={page}
-              href={`/${locale}/blog${page > 1 ? `?page=${page}` : ''}`}
-              className={`min-w-[40px] h-10 flex items-center justify-center text-sm rounded-lg
-                         ring-1 transition-all duration-200
-                         ${isCurrentPage
-                           ? 'bg-[#697565] text-white ring-[#697565] font-medium'
-                           : 'text-zinc-400 hover:text-white bg-zinc-800/50 hover:bg-zinc-800 ring-zinc-700/50 hover:ring-zinc-600'
-                         }`}
-              aria-current={isCurrentPage ? 'page' : undefined}
-            >
-              {page}
-            </Link>
-          );
-        })}
-      </div>
-
-      {/* Next button */}
-      {currentPage < totalPages ? (
-        <Link
-          href={`/${locale}/blog?page=${currentPage + 1}`}
-          className="flex items-center gap-1 px-3 py-2 text-sm text-zinc-400 hover:text-white
-                     bg-zinc-800/50 hover:bg-zinc-800 rounded-lg ring-1 ring-zinc-700/50
-                     hover:ring-zinc-600 transition-all duration-200"
-          aria-label={t('ui.pagination.next')}
-        >
-          <span className="hidden sm:inline">{t('ui.pagination.next')}</span>
-          <ChevronRight className="h-4 w-4" />
-        </Link>
-      ) : (
-        <span
-          className="flex items-center gap-1 px-3 py-2 text-sm text-zinc-600
-                     bg-zinc-800/30 rounded-lg ring-1 ring-zinc-800/50 cursor-not-allowed"
-          aria-disabled="true"
-        >
-          <span className="hidden sm:inline">{t('ui.pagination.next')}</span>
-          <ChevronRight className="h-4 w-4" />
-        </span>
-      )}
-    </nav>
-  );
-}
-
-export default async function BlogPage({ params, searchParams }: Props) {
   const { locale } = await params;
-  const { page } = await searchParams;
   setRequestLocale(locale);
 
   const t = await getTranslations('blog');
@@ -595,15 +323,6 @@ export default async function BlogPage({ params, searchParams }: Props) {
     ...legacyPosts,
   ].sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
 
-  // Pagination
-  const currentPage = Math.max(1, parseInt(page || '1', 10) || 1);
-  const totalPages = Math.ceil(allPosts.length / POSTS_PER_PAGE);
-  const validPage = Math.min(currentPage, totalPages || 1);
-
-  const startIndex = (validPage - 1) * POSTS_PER_PAGE;
-  const endIndex = startIndex + POSTS_PER_PAGE;
-  const posts = allPosts.slice(startIndex, endIndex);
-
   return (
     <main className="min-h-screen">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-20 lg:py-24">
@@ -619,37 +338,21 @@ export default async function BlogPage({ params, searchParams }: Props) {
           <p className="text-lg sm:text-xl text-zinc-400 max-w-2xl">
             {t('meta.header.subtitle')}
           </p>
-          {/* Post count */}
-          <p className="text-sm text-zinc-500 mt-4">
-            {t('ui.pagination.showing', {
-              start: startIndex + 1,
-              end: Math.min(endIndex, allPosts.length),
-              total: allPosts.length,
-            })}
-          </p>
         </div>
 
-        {/* Blog Posts Grid */}
+        {/* Blog List with Search and Filters */}
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
+        <BlogList
-          {posts.map((post) => (
+          posts={allPosts}
-            <BlogPostCard key={post.slug} post={post} locale={locale} />
-          ))}
-        </div>
-
-        {/* Pagination */}
-        <Pagination
-          currentPage={validPage}
-          totalPages={totalPages}
           locale={locale}
-          t={(key) => t(key)}
+          translations={{
+            searchPlaceholder: t('ui.search.placeholder'),
+            showingText: (start: number, end: number, total: number) =>
+              t('ui.pagination.showing', { start, end, total }),
+            noPostsText: t('ui.errors.posts'),
+            paginationPrevious: t('ui.pagination.previous'),
+            paginationNext: t('ui.pagination.next'),
+          }}
         />
-
-        {/* Empty State */}
-        {posts.length === 0 && (
-          <div className="text-center py-12">
-            <p className="text-zinc-400">{t('ui.errors.posts')}</p>
-          </div>
-        )}
       </div>
     </main>
   );

src/components/blog/BlogList.tsx

@@ -0,0 +1,403 @@
+'use client';
+
+import { useState, useMemo } from 'react';
+import { Calendar, Tag, ExternalLink, ChevronLeft, ChevronRight } from 'lucide-react';
+import Link from 'next/link';
+import Image from 'next/image';
+import { BlogPost } from '@/lib/blog';
+import { SearchBar } from './SearchBar';
+import { CategoryFilter } from './CategoryFilter';
+
+const POSTS_PER_PAGE = 12;
+
+// Placeholder image for posts without cover images
+const PLACEHOLDER_IMAGE = 'data:image/svg+xml,' + encodeURIComponent(`
+  <svg width="1792" height="1024" xmlns="http://www.w3.org/2000/svg">
+    <rect width="100%" height="100%" fill="#181C14"/>
+    <rect x="40%" y="35%" width="20%" height="30%" rx="8" fill="#697565" opacity="0.3"/>
+    <circle cx="50%" cy="45%" r="8%" fill="#697565" opacity="0.2"/>
+    <rect x="30%" y="65%" width="40%" height="4%" rx="2" fill="#465B50" opacity="0.3"/>
+    <rect x="35%" y="72%" width="30%" height="3%" rx="2" fill="#465B50" opacity="0.2"/>
+  </svg>
+`);
+
+// Known existing images (from public/images/posts/)
+const EXISTING_IMAGES = new Set([
+  '/images/posts/erp-integration-breuninger/cover.jpg',
+  '/images/posts/fullstack-development-timetracking/cover.jpg',
+  '/images/posts/rfid-automation/cover.jpg',
+  '/images/posts/automated-ad-creatives/cover.jpg',
+]);
+
+function getFormattedDate(date: string, locale: string) {
+  const languageMap: Record<string, string> = {
+    de: 'de-DE',
+    en: 'en-US',
+    sr: 'sr-RS',
+  };
+
+  return new Date(date).toLocaleDateString(languageMap[locale] || 'de-DE', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  });
+}
+
+function getImagePath(coverImage: string) {
+  if (coverImage.startsWith('http')) {
+    return coverImage;
+  }
+  return coverImage.replace('/blog/', '/images/posts/');
+}
+
+// Blog image component with fallback
+function BlogImage({ src, alt, fallback }: { src: string; alt: string; fallback: string }) {
+  const imageSrc = EXISTING_IMAGES.has(src) ? src : fallback;
+
+  return (
+    <Image
+      src={imageSrc}
+      alt={alt}
+      fill
+      sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
+      className="object-cover transition-transform duration-700 group-hover:scale-110"
+      unoptimized={imageSrc.startsWith('data:')}
+    />
+  );
+}
+
+function BlogPostCard({ post, locale }: { post: BlogPost; locale: string }) {
+  return (
+    <Link
+      href={`/${locale}/blog/${post.slug}`}
+      className="group relative block bg-zinc-900/50 backdrop-blur-sm
+               rounded-xl shadow-lg hover:shadow-2xl
+               ring-1 ring-zinc-800 hover:ring-zinc-700
+               transition-all duration-500 focus:outline-none focus:ring-2
+               focus:ring-zinc-600 focus:ring-offset-2 focus:ring-offset-zinc-950
+               transform hover:-translate-y-1"
+    >
+      <div className="relative overflow-hidden rounded-xl">
+        {/* Image Container */}
+        <div className="aspect-[16/9] w-full relative overflow-hidden bg-zinc-900">
+          <BlogImage
+            src={getImagePath(post.coverImage)}
+            alt={post.title}
+            fallback={PLACEHOLDER_IMAGE}
+          />
+          <div className="absolute inset-x-0 -bottom-20 top-0 bg-gradient-to-t from-zinc-900 via-zinc-900/70 to-transparent opacity-95" />
+        </div>
+
+        {/* Content */}
+        <div className="relative -mt-2 p-6 bg-zinc-900 z-10">
+          <div className="flex items-center gap-4 mb-4 text-zinc-500">
+            <div className="flex items-center gap-2 text-sm">
+              <Calendar className="h-4 w-4" />
+              <span>{getFormattedDate(post.date, locale)}</span>
+            </div>
+            {post.tags && post.tags.length > 0 && (
+              <div className="flex items-center gap-2 text-sm">
+                <Tag className="h-4 w-4" />
+                <span>{post.tags.length} Tags</span>
+              </div>
+            )}
+          </div>
+
+          <h3 className="text-xl font-semibold text-white mb-3
+                       group-hover:text-zinc-100 transition-colors duration-300">
+            {post.title}
+          </h3>
+          <p className="text-zinc-400 text-sm line-clamp-2 mb-4
+                      group-hover:text-zinc-300 transition-colors duration-300">
+            {post.excerpt}
+          </p>
+
+          {/* Tags */}
+          <div className="flex flex-wrap gap-2">
+            {post.tags?.slice(0, 3).map((tag, index) => (
+              <span
+                key={index}
+                className="px-3 py-1 bg-zinc-800/50
+                         text-sm text-zinc-400 rounded-full
+                         ring-1 ring-zinc-700/50 group-hover:ring-zinc-600/50
+                         group-hover:bg-zinc-800/70 group-hover:text-zinc-300
+                         transition-all duration-300"
+              >
+                {tag}
+              </span>
+            ))}
+            {post.tags && post.tags.length > 3 && (
+              <span className="text-sm text-zinc-600">
+                +{post.tags.length - 3} more
+              </span>
+            )}
+          </div>
+
+          {/* Link Icon */}
+          <div className="absolute top-6 right-6 p-2.5 rounded-full
+                        bg-zinc-800/60 backdrop-blur-sm ring-1 ring-zinc-700/50
+                        opacity-0 group-hover:opacity-100
+                        transform translate-y-2 group-hover:translate-y-0
+                        transition-all duration-300">
+            <ExternalLink className="h-4 w-4 text-zinc-400" />
+          </div>
+        </div>
+      </div>
+    </Link>
+  );
+}
+
+// Pagination component
+function Pagination({
+  currentPage,
+  totalPages,
+  onPageChange,
+  t,
+}: {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+  t: (key: string) => string;
+}) {
+  const getPageNumbers = () => {
+    const pages: (number | 'ellipsis')[] = [];
+
+    if (totalPages <= 7) {
+      // Show all pages if 7 or fewer
+      for (let i = 1; i <= totalPages; i++) {
+        pages.push(i);
+      }
+    } else {
+      // Always show first page
+      pages.push(1);
+
+      if (currentPage > 3) {
+        pages.push('ellipsis');
+      }
+
+      // Show pages around current
+      const start = Math.max(2, currentPage - 1);
+      const end = Math.min(totalPages - 1, currentPage + 1);
+
+      for (let i = start; i <= end; i++) {
+        pages.push(i);
+      }
+
+      if (currentPage < totalPages - 2) {
+        pages.push('ellipsis');
+      }
+
+      // Always show last page
+      pages.push(totalPages);
+    }
+
+    return pages;
+  };
+
+  if (totalPages <= 1) return null;
+
+  return (
+    <nav className="flex items-center justify-center gap-2 mt-12 sm:mt-16" aria-label="Pagination">
+      {/* Previous button */}
+      {currentPage > 1 ? (
+        <button
+          onClick={() => onPageChange(currentPage - 1)}
+          className="flex items-center gap-1 px-3 py-2 text-sm text-zinc-400 hover:text-white
+                     bg-zinc-800/50 hover:bg-zinc-800 rounded-lg ring-1 ring-zinc-700/50
+                     hover:ring-zinc-600 transition-all duration-200"
+          aria-label={t('ui.pagination.previous')}
+        >
+          <ChevronLeft className="h-4 w-4" />
+          <span className="hidden sm:inline">{t('ui.pagination.previous')}</span>
+        </button>
+      ) : (
+        <span
+          className="flex items-center gap-1 px-3 py-2 text-sm text-zinc-600
+                     bg-zinc-800/30 rounded-lg ring-1 ring-zinc-800/50 cursor-not-allowed"
+          aria-disabled="true"
+        >
+          <ChevronLeft className="h-4 w-4" />
+          <span className="hidden sm:inline">{t('ui.pagination.previous')}</span>
+        </span>
+      )}
+
+      {/* Page numbers */}
+      <div className="flex items-center gap-1">
+        {getPageNumbers().map((page, index) => {
+          if (page === 'ellipsis') {
+            return (
+              <span key={`ellipsis-${index}`} className="px-2 text-zinc-600">
+                ...
+              </span>
+            );
+          }
+
+          const isCurrentPage = page === currentPage;
+
+          return (
+            <button
+              key={page}
+              onClick={() => onPageChange(page)}
+              className={`min-w-[40px] h-10 flex items-center justify-center text-sm rounded-lg
+                         ring-1 transition-all duration-200
+                         ${isCurrentPage
+                           ? 'bg-[#697565] text-white ring-[#697565] font-medium'
+                           : 'text-zinc-400 hover:text-white bg-zinc-800/50 hover:bg-zinc-800 ring-zinc-700/50 hover:ring-zinc-600'
+                         }`}
+              aria-current={isCurrentPage ? 'page' : undefined}
+            >
+              {page}
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Next button */}
+      {currentPage < totalPages ? (
+        <button
+          onClick={() => onPageChange(currentPage + 1)}
+          className="flex items-center gap-1 px-3 py-2 text-sm text-zinc-400 hover:text-white
+                     bg-zinc-800/50 hover:bg-zinc-800 rounded-lg ring-1 ring-zinc-700/50
+                     hover:ring-zinc-600 transition-all duration-200"
+          aria-label={t('ui.pagination.next')}
+        >
+          <span className="hidden sm:inline">{t('ui.pagination.next')}</span>
+          <ChevronRight className="h-4 w-4" />
+        </button>
+      ) : (
+        <span
+          className="flex items-center gap-1 px-3 py-2 text-sm text-zinc-600
+                     bg-zinc-800/30 rounded-lg ring-1 ring-zinc-800/50 cursor-not-allowed"
+          aria-disabled="true"
+        >
+          <span className="hidden sm:inline">{t('ui.pagination.next')}</span>
+          <ChevronRight className="h-4 w-4" />
+        </span>
+      )}
+    </nav>
+  );
+}
+
+interface BlogListProps {
+  posts: BlogPost[];
+  locale: string;
+  translations: {
+    searchPlaceholder: string;
+    showingText: (start: number, end: number, total: number) => string;
+    noPostsText: string;
+    paginationPrevious: string;
+    paginationNext: string;
+  };
+}
+
+export function BlogList({ posts, locale, translations }: BlogListProps) {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
+  const [currentPage, setCurrentPage] = useState(1);
+
+  // Extract unique categories from all posts
+  const allCategories = useMemo(() => {
+    const categories = new Set(posts.map(post => post.category).filter(Boolean));
+    return Array.from(categories).sort();
+  }, [posts]);
+
+  // Filter posts based on search query and category
+  const filteredPosts = useMemo(() => {
+    let filtered = posts;
+
+    // Apply search filter (case-insensitive search in title, excerpt, and tags)
+    if (searchQuery.trim()) {
+      const query = searchQuery.toLowerCase();
+      filtered = filtered.filter(post => {
+        const titleMatch = post.title.toLowerCase().includes(query);
+        const excerptMatch = post.excerpt.toLowerCase().includes(query);
+        const tagsMatch = post.tags?.some(tag => tag.toLowerCase().includes(query)) || false;
+        return titleMatch || excerptMatch || tagsMatch;
+      });
+    }
+
+    // Apply category filter
+    if (selectedCategory) {
+      filtered = filtered.filter(post => post.category === selectedCategory);
+    }
+
+    return filtered;
+  }, [posts, searchQuery, selectedCategory]);
+
+  // Reset to first page when filters change
+  useMemo(() => {
+    setCurrentPage(1);
+  }, [searchQuery, selectedCategory]);
+
+  // Paginate filtered posts
+  const totalPages = Math.ceil(filteredPosts.length / POSTS_PER_PAGE);
+  const validPage = Math.min(Math.max(1, currentPage), totalPages || 1);
+
+  const startIndex = (validPage - 1) * POSTS_PER_PAGE;
+  const endIndex = startIndex + POSTS_PER_PAGE;
+  const paginatedPosts = filteredPosts.slice(startIndex, endIndex);
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+    // Scroll to top of the page
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  return (
+    <div>
+      {/* Search and Filter Section */}
+      <div className="mb-8 sm:mb-12 space-y-6">
+        {/* Search Bar */}
+        <SearchBar
+          value={searchQuery}
+          onChange={setSearchQuery}
+          placeholder={translations.searchPlaceholder}
+        />
+
+        {/* Category Filter */}
+        <CategoryFilter
+          categories={allCategories}
+          selectedCategory={selectedCategory}
+          onCategoryChange={setSelectedCategory}
+        />
+      </div>
+
+      {/* Results count */}
+      <p className="text-sm text-zinc-500 mb-6">
+        {translations.showingText(
+          startIndex + 1,
+          Math.min(endIndex, filteredPosts.length),
+          filteredPosts.length
+        )}
+      </p>
+
+      {/* Blog Posts Grid */}
+      {paginatedPosts.length > 0 ? (
+        <>
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
+            {paginatedPosts.map((post) => (
+              <BlogPostCard key={post.slug} post={post} locale={locale} />
+            ))}
+          </div>
+
+          {/* Pagination */}
+          <Pagination
+            currentPage={validPage}
+            totalPages={totalPages}
+            onPageChange={handlePageChange}
+            t={(key) => {
+              if (key === 'ui.pagination.previous') return translations.paginationPrevious;
+              if (key === 'ui.pagination.next') return translations.paginationNext;
+              return '';
+            }}
+          />
+        </>
+      ) : (
+        /* Empty State */
+        <div className="text-center py-12">
+          <p className="text-zinc-400">{translations.noPostsText}</p>
+        </div>
+      )}
+    </div>
+  );
+}

src/messages/de.json

@@ -463,12 +463,15 @@
     },
     "ui": {
       "readMore": "Weiterlesen",
+      "search": {
+        "placeholder": "Beiträge durchsuchen..."
+      },
       "loading": {
         "posts": "Blogbeiträge werden geladen...",
         "post": "Blogbeitrag wird geladen..."
       },
       "errors": {
-        "posts": "Fehler beim Laden der Blogbeiträge",
+        "posts": "Keine Beiträge gefunden",
         "post": "Der gesuchte Blogbeitrag existiert nicht oder wurde verschoben."
       },
       "backToBlog": "Zurück zum Blog",

src/messages/en.json

@@ -478,12 +478,15 @@
     },
     "ui": {
       "readMore": "Read More",
+      "search": {
+        "placeholder": "Search posts..."
+      },
       "loading": {
         "posts": "Loading blog posts...",
         "post": "Loading blog post..."
       },
       "errors": {
-        "posts": "Error loading blog posts",
+        "posts": "No posts found",
         "post": "The requested blog post does not exist or has been moved."
       },
       "backToBlog": "Back to Blog",

src/messages/sr.json

@@ -485,12 +485,15 @@
     },
     "ui": {
       "readMore": "Procitaj vise",
+      "search": {
+        "placeholder": "Pretrazi postove..."
+      },
       "loading": {
         "posts": "Ucitavanje blog postova...",
         "post": "Ucitavanje blog posta..."
       },
       "errors": {
-        "posts": "Greska pri ucitavanju blog postova",
+        "posts": "Nema pronađenih postova",
         "post": "Trazeni blog post ne postoji ili je premesten."
       },
       "backToBlog": "Nazad na Blog",