32 lines
1.4 KiB
TypeScript
32 lines
1.4 KiB
TypeScript
import Link from "next/link";
|
|
import type { Guide } from "@/lib/guides";
|
|
import { getGuide } from "@/lib/guides";
|
|
|
|
export default function RelatedGuideArticles({ guide }: { guide: Guide }) {
|
|
const relatedGuides = guide.relatedGuides
|
|
.map((slug) => getGuide(slug))
|
|
.filter((related): related is Guide => Boolean(related));
|
|
|
|
if (relatedGuides.length === 0) return null;
|
|
|
|
return (
|
|
<aside className="mt-12 rounded-3xl border border-line bg-surface p-6 shadow-soft">
|
|
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-[#0d7a57]">Weiterlesen</p>
|
|
<h2 className="mt-3 font-display text-2xl font-semibold text-ink">Das könnte dich auch interessieren</h2>
|
|
<div className="mt-5 grid gap-4 sm:grid-cols-2">
|
|
{relatedGuides.map((related) => (
|
|
<Link
|
|
key={related.slug}
|
|
href={`/ratgeber/${related.slug}`}
|
|
className="rounded-2xl border border-line p-4 transition-colors hover:border-[#0d7a57]/40 hover:bg-[#e6f7f0]/40"
|
|
>
|
|
<p className="text-xs font-semibold uppercase tracking-[0.14em] text-[#0d7a57]">{related.readingTime}</p>
|
|
<h3 className="mt-2 font-display text-xl font-semibold leading-tight text-ink">{related.title}</h3>
|
|
<p className="mt-2 text-sm leading-relaxed text-ink-soft">{related.excerpt}</p>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|