"use client"; import { Badge } from "@/components/ui/badge"; import { Card, CardHeader, CardContent, CardFooter, } from "@/components/ui/card"; import Image from "next/image"; import { cn } from "@/lib/utils"; export interface ArticleCardProps { headline: string; excerpt: string; cover?: string; tag?: string; readingTime?: number; // in seconds writer?: string; publishedAt?: Date; clampLines?: number; } // Human-friendly read time: seconds -> "X min read" export function formatReadTime(seconds: number): string { if (!seconds || seconds < 60) return "Less than 1 min read"; const minutes = Math.ceil(seconds / 60); return `${minutes} min read`; } // Date -> "Aug 15, 2025" (localized but concise) export function formatPostDate(date: Date): string { if (!date) return ""; return date.toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric", }); } export const ArticleCard: React.FC = ({ cover, tag, readingTime, headline, excerpt, writer, publishedAt, clampLines, }) => { const hasMeta = tag || readingTime; const hasFooter = writer || publishedAt; return ( {cover && (

)} {hasMeta && (

{tag && ( {tag} )} {tag && readingTime && •} {readingTime && {formatReadTime(readingTime)}}

)}

{headline}

0, })} style={{ WebkitLineClamp: clampLines, }} > {excerpt}

{hasFooter && ( {writer && (

{writer}

)} {publishedAt && (

Published

{formatPostDate(publishedAt)}

)} )} ); };

Featured

Newest

Popular

Shaders

Heros

Features

AI Chat Components

Calls to Action

Buttons

Testimonials

Pricing Sections

Text Components

Explore

Build

Blog Post Card

Created by

Installation

How to use

Dependencies