123 lines
4.4 KiB
TypeScript
123 lines
4.4 KiB
TypeScript
import React from 'react';
|
|
import Link from 'next/link';
|
|
import { PostMdx } from '@/lib/blog';
|
|
|
|
interface PostNavigationProps {
|
|
prev: PostMdx | null;
|
|
next: PostMdx | null;
|
|
isPrevRandom?: boolean;
|
|
isNextRandom?: boolean;
|
|
locale: string;
|
|
}
|
|
|
|
export default function PostNavigation({
|
|
prev,
|
|
next,
|
|
isPrevRandom,
|
|
isNextRandom,
|
|
locale,
|
|
}: PostNavigationProps) {
|
|
if (!prev && !next) return null;
|
|
|
|
return (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 w-full mt-16">
|
|
{/* Previous Post (Older) */}
|
|
{prev ? (
|
|
<Link
|
|
href={`/${locale}/blog/${prev.slug}`}
|
|
className="group relative h-64 md:h-80 overflow-hidden block"
|
|
>
|
|
{/* Background Image */}
|
|
{prev.frontmatter.featuredImage ? (
|
|
<div
|
|
className="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-110"
|
|
style={{ backgroundImage: `url(${prev.frontmatter.featuredImage}?ar=16:9)` }}
|
|
/>
|
|
) : (
|
|
<div className="absolute inset-0 bg-neutral-100" />
|
|
)}
|
|
|
|
{/* Overlay */}
|
|
<div className="absolute inset-0 bg-black/60 group-hover:bg-black/50 transition-colors duration-300" />
|
|
|
|
{/* Content */}
|
|
<div className="absolute inset-0 flex flex-col justify-center p-8 md:p-12 text-white z-10">
|
|
<span className="text-sm font-bold uppercase tracking-wider mb-2 text-white/90">
|
|
{isPrevRandom
|
|
? locale === 'de'
|
|
? 'Weiterer Artikel'
|
|
: 'More Article'
|
|
: locale === 'de'
|
|
? 'Vorheriger Beitrag'
|
|
: 'Previous Post'}
|
|
</span>
|
|
<h3 className="text-xl md:text-2xl font-bold leading-tight group-hover:underline decoration-2 underline-offset-4">
|
|
{prev.frontmatter.title}
|
|
</h3>
|
|
</div>
|
|
|
|
{/* Arrow Icon */}
|
|
<div className="absolute left-4 top-1/2 -translate-y-1/2 text-white/70 group-hover:text-white group-hover:-translate-x-2 transition-all duration-300">
|
|
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M15 19l-7-7 7-7"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</Link>
|
|
) : (
|
|
<div className="hidden md:block bg-neutral-50" />
|
|
)}
|
|
|
|
{/* Next Post (Newer) */}
|
|
{next ? (
|
|
<Link
|
|
href={`/${locale}/blog/${next.slug}`}
|
|
className="group relative h-64 md:h-80 overflow-hidden block"
|
|
>
|
|
{/* Background Image */}
|
|
{next.frontmatter.featuredImage ? (
|
|
<div
|
|
className="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-110"
|
|
style={{ backgroundImage: `url(${next.frontmatter.featuredImage}?ar=16:9)` }}
|
|
/>
|
|
) : (
|
|
<div className="absolute inset-0 bg-neutral-100" />
|
|
)}
|
|
|
|
{/* Overlay */}
|
|
<div className="absolute inset-0 bg-black/60 group-hover:bg-black/50 transition-colors duration-300" />
|
|
|
|
{/* Content */}
|
|
<div className="absolute inset-0 flex flex-col justify-center items-end text-right p-8 md:p-12 text-white z-10">
|
|
<span className="text-sm font-bold uppercase tracking-wider mb-2 text-white/90">
|
|
{isNextRandom
|
|
? locale === 'de'
|
|
? 'Weiterer Artikel'
|
|
: 'More Article'
|
|
: locale === 'de'
|
|
? 'Nächster Beitrag'
|
|
: 'Next Post'}
|
|
</span>
|
|
<h3 className="text-xl md:text-2xl font-bold leading-tight group-hover:underline decoration-2 underline-offset-4">
|
|
{next.frontmatter.title}
|
|
</h3>
|
|
</div>
|
|
|
|
{/* Arrow Icon */}
|
|
<div className="absolute right-4 top-1/2 -translate-y-1/2 text-white/30 group-hover:text-white group-hover:translate-x-2 transition-all duration-300">
|
|
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</div>
|
|
</Link>
|
|
) : (
|
|
<div className="hidden md:block bg-neutral-50" />
|
|
)}
|
|
</div>
|
|
);
|
|
}
|