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