59 lines
1.7 KiB
TypeScript
59 lines
1.7 KiB
TypeScript
import styles from "styles/Library/LibraryItemComponent.module.css";
|
|
import { LibraryItem } from "queries/library";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import { BasicDate, getAssetURL } from "queries/helpers";
|
|
|
|
export type LibraryItemComponentProps = {
|
|
item: LibraryItem;
|
|
};
|
|
|
|
export default function LibraryItemComponent(
|
|
props: LibraryItemComponentProps
|
|
): JSX.Element {
|
|
function prettyTitleSubtitle(title: string, subtitle: string): string {
|
|
let result = title;
|
|
if (subtitle !== null) result += " - " + subtitle;
|
|
return result;
|
|
}
|
|
|
|
function prettyDate(date: BasicDate): string {
|
|
return (
|
|
date.year +
|
|
"/" +
|
|
date.month.toString().padStart(2, "0") +
|
|
"/" +
|
|
date.day.toString().padStart(2, "0")
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Link href={"/library/" + props.item.attributes.slug} passHref>
|
|
<div className={styles.libraryItem}>
|
|
<h2>
|
|
{prettyTitleSubtitle(
|
|
props.item.attributes.title,
|
|
props.item.attributes.subtitle
|
|
)}
|
|
</h2>
|
|
<p>{prettyDate(props.item.attributes.release_date)}</p>
|
|
|
|
{props.item.attributes.thumbnail.data ? (
|
|
<Image
|
|
src={getAssetURL(
|
|
props.item.attributes.thumbnail.data.attributes.url
|
|
)}
|
|
alt={
|
|
props.item.attributes.thumbnail.data.attributes.alternativeText
|
|
}
|
|
width={props.item.attributes.thumbnail.data.attributes.width}
|
|
height={props.item.attributes.thumbnail.data.attributes.height}
|
|
/>
|
|
) : (
|
|
""
|
|
)}
|
|
</div>
|
|
</Link>
|
|
);
|
|
}
|