Anders Ytterström
bff9b2fdd7
albums.json and the covers are now handled as symbolic links. Some minor changes are done in the tsx files as well to mimic some adjustments in the data.
44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
import React from "react";
|
||
import { Album } from "../interfaces";
|
||
|
||
export default (props: Props) => {
|
||
const handleKeyPress = (e: KeyboardEvent, callback: Function) => {
|
||
const SPACE_KEY = 32;
|
||
const ENTER_KEY = 13;
|
||
if (e.charCode === SPACE_KEY || e.charCode === ENTER_KEY) {
|
||
e.preventDefault();
|
||
callback();
|
||
}
|
||
};
|
||
|
||
const { album, handleOnClick } = props;
|
||
const { id, artist, title, songs, year, img, purchased_on } = album;
|
||
const imagePath = `./covers/${img}`;
|
||
const song = songs.join(", ");
|
||
return (
|
||
<article
|
||
className="album"
|
||
tabIndex={0}
|
||
role="button"
|
||
onClick={() => handleOnClick(album)}
|
||
>
|
||
<figure className="album__cover">
|
||
<img
|
||
src={imagePath}
|
||
alt="cover"
|
||
className="album__cover__media"
|
||
/>
|
||
</figure>
|
||
<span>
|
||
#{("00" + id).substr(-2, 2)}: {artist} - {song}, från "{title}" ({year})<br />
|
||
<small>✔️ {purchased_on}</small>
|
||
</span>
|
||
</article>
|
||
);
|
||
};
|
||
|
||
type Props = {
|
||
key: number;
|
||
album: Album;
|
||
handleOnClick(album: Album): void;
|
||
};
|