67 lines
2.0 KiB
TypeScript
67 lines
2.0 KiB
TypeScript
|
/**
|
||
|
|
* AlbumNav — the "← previous album / next album →" pair at the foot of an
|
||
|
|
* album detail page (#483).
|
||
|
|
*
|
||
|
|
* Renders nothing when there is no neighbour in either direction, so a lone
|
||
|
|
* album keeps its quiet ending.
|
||
|
|
*/
|
||
|
|
|
||
|
|
import Link from 'next/link';
|
||
|
|
import { getServerDictionary } from '@/lib/i18n/server';
|
||
|
|
import type { AlbumNavPair } from '@/lib/albumNav';
|
||
|
|
|
||
|
|
function Chevron({ direction }: { direction: 'prev' | 'next' }) {
|
||
|
|
return (
|
||
|
|
<svg
|
||
|
|
aria-hidden="true"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
strokeWidth="2"
|
||
|
|
strokeLinecap="round"
|
||
|
|
strokeLinejoin="round"
|
||
|
|
>
|
||
|
|
<polyline points={direction === 'prev' ? '15 18 9 12 15 6' : '9 18 15 12 9 6'} />
|
||
|
|
</svg>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export function AlbumNav({ prev, next }: AlbumNavPair) {
|
||
|
|
const t = getServerDictionary();
|
||
|
|
if (!prev && !next) return null;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<nav className="album-nav" aria-label={t.common.albumNavAria}>
|
||
|
|
{prev ? (
|
||
|
|
<Link
|
||
|
|
href={prev.href}
|
||
|
|
className="album-nav__link album-nav__link--prev"
|
||
|
|
aria-label={t.common.prevAlbumAria(prev.name)}
|
||
|
|
>
|
||
|
|
<Chevron direction="prev" />
|
||
|
|
<span className="album-nav__text">
|
||
|
|
<span className="album-nav__kicker">{t.common.prevAlbum}</span>
|
||
|
|
<span className="album-nav__name">{prev.name}</span>
|
||
|
|
</span>
|
||
|
|
</Link>
|
||
|
|
) : (
|
||
|
|
/* Holds the next link against the right edge when there is no previous. */
|
||
|
|
<span aria-hidden="true" />
|
||
|
|
)}
|
||
|
|
{next && (
|
||
|
|
<Link
|
||
|
|
href={next.href}
|
||
|
|
className="album-nav__link album-nav__link--next"
|
||
|
|
aria-label={t.common.nextAlbumAria(next.name)}
|
||
|
|
>
|
||
|
|
<span className="album-nav__text">
|
||
|
|
<span className="album-nav__kicker">{t.common.nextAlbum}</span>
|
||
|
|
<span className="album-nav__name">{next.name}</span>
|
||
|
|
</span>
|
||
|
|
<Chevron direction="next" />
|
||
|
|
</Link>
|
||
|
|
)}
|
||
|
|
</nav>
|
||
|
|
);
|
||
|
|
}
|