80 lines
2.0 KiB
Plaintext
80 lines
2.0 KiB
Plaintext
---
|
|
import AppEmptyLayout from "components/AppLayout/AppEmptyLayout.astro";
|
|
import Credits from "components/Credits.astro";
|
|
import DownloadButton from "components/DownloadButton.astro";
|
|
import RichText from "components/RichText/RichText.astro";
|
|
import TagGroups from "components/TagGroups.astro";
|
|
import { getI18n } from "src/i18n/i18n";
|
|
import { payload } from "src/shared/payload/payload-sdk";
|
|
import { fetchOr404 } from "src/utils/responses";
|
|
|
|
const { id } = Astro.params;
|
|
const image = await fetchOr404(() => payload.getImageByID(id!));
|
|
if (image instanceof Response) {
|
|
return image;
|
|
}
|
|
|
|
const { getLocalizedMatch } = await getI18n(Astro.locals.currentLocale);
|
|
const { url, width, height, filename, translations, tagGroups, credits } = image;
|
|
|
|
const { title, description } =
|
|
translations.length > 0
|
|
? getLocalizedMatch(translations)
|
|
: { title: filename, description: undefined };
|
|
---
|
|
|
|
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
|
|
|
<AppEmptyLayout>
|
|
<div id="container">
|
|
<img src={url} width={width} height={height} />
|
|
|
|
<div>
|
|
<h1>{title}</h1>
|
|
{description && <RichText content={description} />}
|
|
<div>
|
|
{tagGroups.length > 0 && <TagGroups {tagGroups} />}
|
|
{credits.length > 0 && <Credits credits={credits} />}
|
|
</div>
|
|
<DownloadButton href={url} filename={filename} />
|
|
</div>
|
|
</div>
|
|
</AppEmptyLayout>
|
|
|
|
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
|
|
|
<style>
|
|
#container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6em;
|
|
align-items: center;
|
|
|
|
img {
|
|
max-height: 60vh;
|
|
max-width: 100%;
|
|
width: auto;
|
|
object-fit: contain;
|
|
}
|
|
|
|
h1 {
|
|
max-width: 35em;
|
|
}
|
|
|
|
& > div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2em;
|
|
align-items: start;
|
|
|
|
& > div {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
gap: 2em 6em;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
</style>
|