Marc Mintel
f3224f600d
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 7s
Build & Deploy / 🏗️ Build (push) Failing after 16s
Build & Deploy / 🧪 QA (push) Failing after 1m48s
Build & Deploy / 🚀 Deploy (push) Has been skipped
Build & Deploy / 🩺 Health Check (push) Has been skipped
Build & Deploy / 🔔 Notify (push) Successful in 2s
88 lines
3.7 KiB
TypeScript
88 lines
3.7 KiB
TypeScript
import * as React from "react";
|
|
import Link from "next/link";
|
|
import { Card } from "./Layout";
|
|
import { ArrowRight } from "lucide-react";
|
|
import { BlogThumbnailSVG } from "./blog/BlogThumbnailSVG";
|
|
|
|
interface Post {
|
|
title: string;
|
|
description: string;
|
|
date: string;
|
|
slug: string;
|
|
tags?: string[];
|
|
thumbnail?: string;
|
|
}
|
|
|
|
interface MediumCardProps {
|
|
post: Post;
|
|
}
|
|
|
|
export const MediumCard: React.FC<MediumCardProps> = ({ post }) => {
|
|
const { title, description, date, slug, tags } = post;
|
|
|
|
const formattedDate = new Date(date).toLocaleDateString("de-DE", {
|
|
month: "long",
|
|
year: "numeric",
|
|
});
|
|
|
|
return (
|
|
<Link href={`/blog/${slug}`} className="group block w-full h-full outline-none">
|
|
<article className="relative overflow-hidden transition-all duration-500 border border-slate-200/50 hover:border-slate-300/80 bg-white/60 hover:bg-white/80 backdrop-blur-xl rounded-[2rem] shadow-sm hover:shadow-[0_8px_30px_rgb(0,0,0,0.06)] flex flex-col md:flex-row h-full">
|
|
{/* Premium Large Thumbnail Section */}
|
|
<div className="w-full md:w-[42%] aspect-[16/9] md:aspect-auto md:min-h-[280px] overflow-hidden relative bg-slate-50 border-b md:border-b-0 md:border-r border-slate-100/50 shrink-0">
|
|
{post.thumbnail ? (
|
|
<img
|
|
src={post.thumbnail}
|
|
alt={title}
|
|
className="w-full h-full object-cover grayscale-[0.2] group-hover:grayscale-0 group-hover:scale-105 transition-all duration-700 ease-out"
|
|
/>
|
|
) : (
|
|
<BlogThumbnailSVG
|
|
slug={slug}
|
|
variant="square"
|
|
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 ease-out"
|
|
/>
|
|
)}
|
|
{/* Subtle inset shadow over the image */}
|
|
<div className="absolute inset-0 ring-1 ring-inset ring-slate-900/5 rounded-t-[2rem] md:rounded-l-[2rem] md:rounded-tr-none pointer-events-none" />
|
|
</div>
|
|
|
|
{/* Content Section */}
|
|
<div className="flex-1 flex flex-col p-6 md:p-8 lg:p-10">
|
|
<div className="flex items-center justify-between mb-5">
|
|
<time className="text-[10px] md:text-xs font-bold uppercase tracking-[0.2em] text-slate-400">
|
|
{formattedDate}
|
|
</time>
|
|
<div className="flex flex-wrap gap-2 justify-end">
|
|
{tags?.slice(0, 3).map((tag) => (
|
|
<span
|
|
key={tag}
|
|
className="px-2.5 py-1 bg-slate-100/50 rounded-md text-[9px] md:text-[10px] font-mono text-slate-500 uppercase tracking-wider"
|
|
>
|
|
#{tag}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-4 flex-1">
|
|
<h3 className="text-2xl md:text-3xl lg:text-4xl font-bold text-slate-900 tracking-tight leading-[1.1] group-hover:text-black transition-colors">
|
|
{title}
|
|
</h3>
|
|
<p className="text-base md:text-lg text-slate-500 font-serif italic leading-relaxed line-clamp-3">
|
|
{description}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="pt-6 mt-6 flex items-center justify-between text-[11px] font-bold uppercase tracking-[0.2em] text-slate-400 group-hover:text-slate-900 transition-all border-t border-slate-100/50">
|
|
<span>Read Article</span>
|
|
<div className="flex items-center justify-center w-8 h-8 rounded-full bg-slate-100 group-hover:bg-slate-900 group-hover:text-white transition-colors duration-300">
|
|
<ArrowRight className="w-4 h-4 translate-x-0 group-hover:translate-x-0.5 transition-transform" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</Link>
|
|
);
|
|
};
|