From e749dce0a6121359361c72b6119084825a901db0 Mon Sep 17 00:00:00 2001
From: Damjan Savic <info@damjan-savic.com>
Date: Sun, 25 Jan 2026 02:35:47 +0100
Subject: [PATCH] auto-claude: subtask-1-2 - Display reading time on blog
 listing page (BlogPostCard)

Added Clock icon import and reading time display to BlogPostCard component.
The reading time now appears between the date and tags with the format "X min read".

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/app/[locale]/blog/page.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/app/[locale]/blog/page.tsx b/src/app/[locale]/blog/page.tsx
index 1b33fbc..7c7200f 100644
--- a/src/app/[locale]/blog/page.tsx
+++ b/src/app/[locale]/blog/page.tsx
@@ -1,6 +1,6 @@
 import { setRequestLocale } from 'next-intl/server';
 import { getTranslations } from 'next-intl/server';
-import { ArrowRight, Calendar, Tag, ExternalLink, ChevronLeft, ChevronRight } from 'lucide-react';
+import { ArrowRight, Calendar, Tag, ExternalLink, ChevronLeft, ChevronRight, Clock } from 'lucide-react';
 import Link from 'next/link';
 import Image from 'next/image';
 import type { Metadata } from 'next';
@@ -392,6 +392,12 @@ function BlogPostCard({ post, locale }: { post: BlogPost; locale: string }) {
               <Calendar className="h-4 w-4" />
               <span>{getFormattedDate(post.date, locale)}</span>
             </div>
+            {post.readingTime && (
+              <div className="flex items-center gap-2 text-sm">
+                <Clock className="h-4 w-4" />
+                <span>{post.readingTime} min read</span>
+              </div>
+            )}
             {post.tags && post.tags.length > 0 && (
               <div className="flex items-center gap-2 text-sm">
                 <Tag className="h-4 w-4" />