56 lines
1.6 KiB
JavaScript
56 lines
1.6 KiB
JavaScript
import React, { useRef, useCallback } from 'react';
|
|
import { getRegionAccent } from './MiniMap';
|
|
import './AlbumCard.css';
|
|
|
|
/* ─────────────────────────────────────────────
|
|
AlbumCard — cover image + gradient + meta
|
|
───────────────────────────────────────────── */
|
|
export default function AlbumCard({ album, onClick }) {
|
|
const cardRef = useRef(null);
|
|
const accent = getRegionAccent(album.region || '');
|
|
|
|
const handleClick = useCallback(() => {
|
|
if (!onClick) return;
|
|
const rect = cardRef.current?.getBoundingClientRect();
|
|
onClick(album, rect);
|
|
}, [album, onClick]);
|
|
|
|
const handleKeyDown = useCallback(
|
|
(e) => {
|
|
if (e.key === 'Enter') handleClick();
|
|
},
|
|
[handleClick],
|
|
);
|
|
|
|
return (
|
|
<div
|
|
ref={cardRef}
|
|
className="album-card"
|
|
style={{ '--card-accent': accent }}
|
|
role="button"
|
|
tabIndex={0}
|
|
onClick={handleClick}
|
|
onKeyDown={handleKeyDown}
|
|
>
|
|
{/* cover */}
|
|
<img
|
|
className="album-card__cover"
|
|
src={album.coverThumb}
|
|
alt={album.name}
|
|
loading="lazy"
|
|
draggable={false}
|
|
/>
|
|
|
|
{/* gradient overlay */}
|
|
<div className="album-card__gradient" />
|
|
|
|
{/* meta */}
|
|
<div className="album-card__meta">
|
|
<span className="album-card__region-badge">{album.regionName}</span>
|
|
<h3 className="album-card__name">{album.name}</h3>
|
|
<span className="album-card__count">{album.photoCount} frames</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|