- navigation: SiteHeader component + useHeader hook - blog: ArticleCard, ArticleList, ArticleDetail + useArticleList, useArticleBySlug hooks - marketing-pages: PageHero, PageContent + usePageBySlug, useSiteSettings hooks - App pages now thin server wrappers that prefetch + hydrate; feature components own their data fetching via useSuspenseQuery
24 lines
665 B
TypeScript
24 lines
665 B
TypeScript
import type { Article } from "../../entities/models/article";
|
|
|
|
export type ArticleCardProps = {
|
|
article: Article;
|
|
};
|
|
|
|
export function ArticleCard({ article }: ArticleCardProps) {
|
|
return (
|
|
<article className="rounded-lg border border-border bg-card p-4 transition-colors hover:bg-accent/50">
|
|
<a href={`/blog/${article.slug}`}>
|
|
<h3 className="text-lg font-semibold text-card-foreground">
|
|
{article.title}
|
|
</h3>
|
|
</a>
|
|
<time
|
|
className="text-sm text-muted-foreground"
|
|
dateTime={article.createdAt.toISOString()}
|
|
>
|
|
{article.createdAt.toLocaleDateString()}
|
|
</time>
|
|
</article>
|
|
);
|
|
}
|