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:
@@ -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" />
|
||||
|
||||
Reference in New Issue
Block a user