2023-11-12 22:43:42 +01:00
|
|
|
---
|
|
|
|
|
|
|
|
import wg from "../images/WarGears.png"
|
|
|
|
import mwg from "../images/MiniWarGears.png"
|
|
|
|
import as from "../images/AirShips.png"
|
|
|
|
import ws from "../images/WarShips.png"
|
|
|
|
import {t} from "astro-i18n";
|
|
|
|
import {getCollection} from "astro:content";
|
|
|
|
import PageLayout from "../layouts/PageLayout.astro";
|
2023-11-18 16:52:54 +01:00
|
|
|
import {Image} from "astro:assets";
|
2023-11-12 22:43:42 +01:00
|
|
|
|
|
|
|
const imageMap = {
|
|
|
|
"wg": wg,
|
|
|
|
"mwg": mwg,
|
|
|
|
"as": as,
|
|
|
|
"ws": ws
|
|
|
|
}
|
|
|
|
|
|
|
|
const modes = await getCollection("modes", entry => entry.data.main)
|
|
|
|
---
|
|
|
|
|
2023-11-18 16:52:54 +01:00
|
|
|
<PageLayout title={t("page")}>
|
2023-11-12 22:43:42 +01:00
|
|
|
{modes.map(value => (
|
|
|
|
<div class="dark:bg-neutral-800 rounded-md p-4 border border-neutral-400 shadow-md my-4 flex flex-col
|
|
|
|
md:flex-row">
|
|
|
|
<Image height="300" width="300" src={imageMap[value.data.translationKey]} alt={t(value.data.translationKey + ".title")} class="dark:invert"></Image>
|
|
|
|
<div class="ml-4">
|
|
|
|
<h1 class="text-2xl font-bold">{t(value.data.translationKey + ".title")}</h1>
|
|
|
|
<div>{t(value.data.translationKey + ".description")}</div>
|
|
|
|
<div class="mt-2 flex flex-col">
|
|
|
|
<a href="/" class="text-yellow-300 hover:underline w-fit">{t("rules")}</a>
|
|
|
|
<a href="/" class="text-yellow-300 hover:underline w-fit">{t("council")}</a>
|
|
|
|
{value.data.ranked ? <a href="/" class="text-yellow-300 hover:underline w-fit">{t("ranking")}</a> : null}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>))}
|
|
|
|
</PageLayout>
|