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>
This commit is contained in:
2026-01-25 02:35:47 +01:00
co-authored by Claude Sonnet 4.5
parent 7bf3aa20ce
commit e749dce0a6
+7 -1
View File
@@ -1,6 +1,6 @@
import { setRequestLocale } from 'next-intl/server'; import { setRequestLocale } from 'next-intl/server';
import { getTranslations } 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 Link from 'next/link';
import Image from 'next/image'; import Image from 'next/image';
import type { Metadata } from 'next'; import type { Metadata } from 'next';
@@ -392,6 +392,12 @@ function BlogPostCard({ post, locale }: { post: BlogPost; locale: string }) {
<Calendar className="h-4 w-4" /> <Calendar className="h-4 w-4" />
<span>{getFormattedDate(post.date, locale)}</span> <span>{getFormattedDate(post.date, locale)}</span>
</div> </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 && ( {post.tags && post.tags.length > 0 && (
<div className="flex items-center gap-2 text-sm"> <div className="flex items-center gap-2 text-sm">
<Tag className="h-4 w-4" /> <Tag className="h-4 w-4" />