mmintel/klz-cables.com
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

feat: complete wcag accessibility and contrast improvements
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 12s
Details
Build & Deploy / 🧪 QA (push) Successful in 4m40s
Details
Build & Deploy / 🏗️ Build (push) Failing after 31s
Details
Build & Deploy / 🚀 Deploy (push) Has been skipped
Details
Build & Deploy / 🧪 Smoke Test (push) Has been skipped
Details
Build & Deploy / ⚡ Lighthouse (push) Has been skipped
Details
Build & Deploy / 🔔 Notify (push) Successful in 2s
Details

Browse Source
This commit is contained in:
Marc Mintel
2026-02-21 20:43:18 +01:00
parent 678c803408
commit 1153a79eb6
15 changed files with 228 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
components/blog/PostNavigation.tsx
View File

@@ -10,7 +10,13 @@ interface PostNavigationProps {
locale: string;
}
export default function PostNavigation({ prev, next, isPrevRandom, isNextRandom, locale }: PostNavigationProps) {
export default function PostNavigation({
prev,
next,
isPrevRandom,
isNextRandom,
locale,
}: PostNavigationProps) {
if (!prev && !next) return null;
return (
@@ -36,10 +42,14 @@ export default function PostNavigation({ prev, next, isPrevRandom, isNextRandom,
{/* 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 opacity-70">
<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')}
? 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}
@@ -47,9 +57,14 @@ export default function PostNavigation({ prev, next, isPrevRandom, isNextRandom,
</div>
{/* Arrow Icon */}
<div className="absolute left-4 top-1/2 -translate-y-1/2 text-white/30 group-hover:text-white group-hover:-translate-x-2 transition-all duration-300">
<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" />
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M15 19l-7-7 7-7"
/>
</svg>
</div>
</Link>
@@ -78,10 +93,14 @@ export default function PostNavigation({ prev, next, isPrevRandom, isNextRandom,
{/* 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 opacity-70">
<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')}
? 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}