48 lines
1.5 KiB
TypeScript
48 lines
1.5 KiB
TypeScript
import * as React from 'react';
|
|
import Link from 'next/link';
|
|
|
|
interface Post {
|
|
title: string;
|
|
description: string;
|
|
date: string;
|
|
slug: string;
|
|
tags?: string[];
|
|
}
|
|
|
|
interface MediumCardProps {
|
|
post: Post;
|
|
}
|
|
|
|
export const MediumCard: React.FC<MediumCardProps> = ({ post }) => {
|
|
const { title, description, date, slug } = post;
|
|
|
|
const formattedDate = new Date(date).toLocaleDateString('en-US', {
|
|
month: 'short',
|
|
day: 'numeric',
|
|
year: 'numeric',
|
|
});
|
|
|
|
return (
|
|
<Link href={`/blog/${slug}`} className="group block">
|
|
<article className="space-y-4 py-8 px-8 border border-slate-200 rounded-3xl group-hover:border-slate-400 transition-all duration-500 bg-white">
|
|
<time className="text-[10px] font-bold uppercase tracking-[0.2em] text-slate-400 group-hover:text-slate-900 transition-colors">
|
|
{formattedDate}
|
|
</time>
|
|
|
|
<h3 className="text-3xl md:text-4xl font-bold text-slate-900 tracking-tight group-hover:text-slate-900 transition-colors">
|
|
{title}
|
|
</h3>
|
|
|
|
<p className="text-xl text-slate-500 font-serif italic leading-snug line-clamp-2">
|
|
{description}
|
|
</p>
|
|
|
|
<div className="pt-4 flex items-center gap-4 text-slate-900 font-bold text-xs uppercase tracking-widest group/link">
|
|
Lesen
|
|
<div className="w-10 h-px bg-slate-200 group-hover:bg-slate-400 group-hover:w-16 transition-all duration-500"></div>
|
|
</div>
|
|
</article>
|
|
</Link>
|
|
);
|
|
};
|