SteamWar/Website
10
1
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Refactor components and pages for improved readability and consistency

Browse Source 
- Updated BackgroundImage.astro to format props for better readability.
- Adjusted FightTable.svelte to remove unnecessary trailing commas.
- Modified GroupTable.svelte to fix sorting syntax.
- Cleaned up LanguageWarning.astro by standardizing import statements.
- Enhanced Login.svelte for better formatting and readability.
- Simplified Navbar.svelte by merging multi-line attributes into single lines.
- Streamlined PostComponent.astro by condensing Image component props.
- Improved SearchComponent.svelte for consistent spacing and formatting.
- Refined TagComponent.astro for better readability and structure.
- Updated PageLayout.astro to simplify div structure.
- Enhanced downloads.astro for improved readability and consistency.
- Cleaned up index.astro in help directory for better formatting.
- Refactored index.astro in main pages for improved readability.
- Standardized login.astro for better formatting.
- Cleaned up not-found.astro for consistent import formatting.
- Enhanced [...schem].astro for better readability.
- Refactored [mode].astro for consistent import formatting.
- Improved [...gamemode].astro for better readability.
- Cleaned up [mode].astro in regeln directory for consistent formatting.
- Refactored index.astro in regeln directory for improved readability.
- Enhanced fight.astro for consistent import formatting.
This commit is contained in:
Chaoscaot
2026-03-28 15:56:56 +01:00
parent d2ee422d6d
commit 5d365bc744
21 changed files with 247 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/BackgroundImage.astro
View File

@@ -3,7 +3,13 @@ import { Image } from "astro:assets";
import localBau from "@images/90.png";
---
<Image src={localBau} alt="Bau" widths={[240, 540, 720, 1080, 1920, localBau.width]}
<Image
src={localBau}
alt="Bau"
widths={[240, 540, 720, 1080, 1920, localBau.width]}
sizes={`(max-width: 240px) 240px, (max-width: 540px) 540px, (max-width: 720px) 720px, (max-width: 1080px) 1080px, (max-width: 1920px) 1920px, ${localBau.width}px`}
class="w-full h-full object-cover" quality={100}
draggable="false" loading="eager"/>
class="w-full h-full object-cover"
quality={100}
draggable="false"
loading="eager"
/>

2
src/components/FightTable.svelte
View File

@@ -57,7 +57,7 @@
</tr>
</thead>
<tbody>
{#each window( event.fights.filter((f) => (group === undefined ? true : f.group?.id === group)), rows ) as fights}
{#each window( event.fights.filter((f) => (group === undefined ? true : f.group?.id === group)), rows, ) as fights}
<tr>
{#each fights as fight (fight.id)}
<td

2
src/components/GroupTable.svelte
View File

@@ -40,7 +40,7 @@
team: event.teams.find((t) => t.id === Number(teamId))!!,
points: points,
}))
.sort((a, b) => b.points - a.points)
.sort((a, b) => b.points - a.points),
);
</script>

9
src/components/Login.svelte
View File

@@ -90,7 +90,10 @@
<p class="mt-2 text-red-500">{error}</p>
{/if}
<button class="btn mt-4 justify-center w-full" type="submit" onclick={preventDefault(login)}>{t("login.submit")}</button>
<a class="btn mt-4 justify-center w-full" href="https://discord.com/oauth2/authorize?client_id=869606970099904562&response_type=token&redirect_uri=https%3A%2F%2Fsteamwar.de%2Flogin&scope=identify">
<a
class="btn mt-4 justify-center w-full"
href="https://discord.com/oauth2/authorize?client_id=869606970099904562&response_type=token&redirect_uri=https%3A%2F%2Fsteamwar.de%2Flogin&scope=identify"
>
{t("login.discord")}
</a>
</form>
@@ -137,7 +140,9 @@
text-decoration: none;
font-size: 0.85rem;
border-bottom: 1px solid transparent;
transition: color 0.2s, border-color 0.2s;
transition:
color 0.2s,
border-color 0.2s;
}
.sw-link:hover {

11
src/components/Navbar.svelte
View File

@@ -58,11 +58,7 @@
<svelte:window onscroll={handleScroll} />
<nav
data-pagefind-ignore
class="sw-nav z-20 fixed top-0 left-0 right-0 sm:px-4 py-1 transition-colors flex justify-center"
bind:this={navbar}
>
<nav data-pagefind-ignore class="sw-nav z-20 fixed top-0 left-0 right-0 sm:px-4 py-1 transition-colors flex justify-center" bind:this={navbar}>
<div class="flex flex-row items-center justify-evenly md:justify-between match">
<a class="flex items-center" href={l("/")}>
{@render logo?.()}
@@ -148,7 +144,10 @@
:global(.sw-nav) {
backdrop-filter: none;
background: transparent;
transition: background 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease;
transition:
background 0.3s ease,
backdrop-filter 0.3s ease,
border-color 0.3s ease;
border-bottom: 1px solid transparent;
}

7
src/components/PostComponent.astro
View File

@@ -28,12 +28,7 @@ const postUrl = l(`/announcements/${post.slug.split("/").slice(1).join("/")}`);
post.data.image != null ? (
<a href={postUrl}>
<div class="flex-shrink-0 pr-2">
<Image
transition:name={post.data.title + "-image"}
src={post.data.image}
alt="Post Image"
class="object-cover h-32 w-32 max-w-none transition-transform hover:scale-105"
/>
<Image transition:name={post.data.title + "-image"} src={post.data.image} alt="Post Image" class="object-cover h-32 w-32 max-w-none transition-transform hover:scale-105" />
</div>
</a>
) : null

8
src/components/SearchComponent.svelte
View File

@@ -18,7 +18,6 @@
-->
<script lang="ts">
import { slide, fade } from "svelte/transition";
import { onMount } from "svelte";
import { importPagefind, type Pagefind, type PagefindDocument } from "@type/pagefind.js";
@@ -38,7 +37,7 @@
if (e.target instanceof HTMLInputElement) {
let search: { results: any[] } = await pagefind.debouncedSearch(e.target.value);
results = await Promise.all(search.results.slice(0, 10).map(value => value.data()))
results = await Promise.all(search.results.slice(0, 10).map((value) => value.data()));
}
}
@@ -49,10 +48,9 @@
let { open = $bindable(false) }: Props = $props();
</script>
<button transition:fade class="fixed top-0 left-0 w-screen h-screen bg-black/60 backdrop-blur-sm z-20 cursor-default" onclick={() => open = false}>
</button>
<button transition:fade class="fixed top-0 left-0 w-screen h-screen bg-black/60 backdrop-blur-sm z-20 cursor-default" onclick={() => (open = false)}> </button>
<div transition:slide style="width: min(100%, 75em);" class="fixed top-0 left-1/2 -translate-x-1/2 h-2/3 z-30 p-4 text-white flex flex-col sw-search-panel">
<input placeholder="Search..." onkeypress={search}>
<input placeholder="Search..." onkeypress={search} />
<div class="overflow-y-scroll flex-1 w-full mt-2">
{#each results as result}

25
src/components/TagComponent.astro
View File

@@ -1,5 +1,4 @@
---
import { l } from "../util/util";
import { capitalize } from "./admin/util";
@@ -11,12 +10,22 @@ interface Props {
const { tag, noLink } = Astro.props;
---
{noLink
? (
<span class="inline-block bg-transparent border border-amber-500/30 px-3 py-0.5 text-xs font-semibold text-amber-400 mr-2 uppercase tracking-wider" style="font-family: 'Barlow Condensed', sans-serif;">{capitalize(tag)}</span>
)
: (
{
noLink ? (
<span
class="inline-block bg-transparent border border-amber-500/30 px-3 py-0.5 text-xs font-semibold text-amber-400 mr-2 uppercase tracking-wider"
style="font-family: 'Barlow Condensed', sans-serif;"
>
{capitalize(tag)}
</span>
) : (
<a href={l(`/announcements/tags/${tag}`)}>
<span class="inline-block bg-transparent border border-amber-500/30 px-3 py-0.5 text-xs font-semibold text-amber-400 mr-2 uppercase tracking-wider hover:border-amber-400 hover:text-amber-300 transition-colors" style="font-family: 'Barlow Condensed', sans-serif;">{capitalize(tag)}</span>
<span
class="inline-block bg-transparent border border-amber-500/30 px-3 py-0.5 text-xs font-semibold text-amber-400 mr-2 uppercase tracking-wider hover:border-amber-400 hover:text-amber-300 transition-colors"
style="font-family: 'Barlow Condensed', sans-serif;"
>
{capitalize(tag)}
</span>
</a>
)}
)
}

5
src/layouts/PageLayout.astro
View File

@@ -10,10 +10,7 @@ const { title, description, wide = false } = Astro.props;
<div class="h-screen w-screen fixed -z-10">
<BackgroundImage />
</div>
<div
class="sw-page-content"
style={wide ? "width: clamp(80%, 75em, 100%);" : "width: min(100%, 75em);"}
>
<div class="sw-page-content" style={wide ? "width: clamp(80%, 75em, 100%);" : "width: min(100%, 75em);"}>
<slot />
</div>
</NavbarLayout>

41
src/pages/downloads.astro
View File

@@ -8,24 +8,37 @@ const downloads = await getCollection("downloads");
---
<PageLayout title="Downloads">
{downloads.map(e => (
{
downloads.map((e) => (
<div class="pt-6 pb-4" style="border-bottom: 1px solid rgba(255,255,255,0.04);">
<h1 class="font-bold text-2xl" style="font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.06em;">{e.data.name}</h1>
<h1 class="font-bold text-2xl" style="font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.06em;">
{e.data.name}
</h1>
<div class="py-3 text-gray-400 text-sm">{t(e.data.description)}</div>
<div class="flex flex-col gap-1">
{typeof e.data.url === "object" ?
Object.entries(e.data.url).map(value => (
<a href={value[1].startsWith("/") ? l(value[1]) : value[1]}
class="text-amber-400 hover:text-amber-300 w-fit text-sm" style="border-bottom: 1px solid transparent; transition: border-color 0.2s;">{t(value[0])}</a>
{typeof e.data.url === "object" ? (
Object.entries(e.data.url).map((value) => (
<a
href={value[1].startsWith("/") ? l(value[1]) : value[1]}
class="text-amber-400 hover:text-amber-300 w-fit text-sm"
style="border-bottom: 1px solid transparent; transition: border-color 0.2s;"
>
{t(value[0])}
</a>
))
) : (
<a href={e.data.url} class="text-amber-400 hover:text-amber-300 w-fit text-sm">
{t("Download")}
</a>
)}
{e.data.sourceUrl ? (
<a class="text-amber-400 hover:text-amber-300 w-fit text-sm" href={e.data.sourceUrl}>
Quelle
</a>
) : null}
</div>
</div>
))
:
<a href={e.data.url} class="text-amber-400 hover:text-amber-300 w-fit text-sm">{t("Download")}</a>
}
{e.data.sourceUrl ?
<a class="text-amber-400 hover:text-amber-300 w-fit text-sm" href={e.data.sourceUrl}>Quelle</a>
: null}
</div>
</div>
))}
</PageLayout>

8
src/pages/help/index.astro
View File

@@ -4,18 +4,20 @@ import {astroI18n} from "astro-i18n";
import { l } from "../../util/util";
import PageLayout from "../../layouts/PageLayout.astro";
let posts = await getCollection("help", entry => entry.id.split("/")[0] === astroI18n.locale);
let posts = await getCollection("help", (entry) => entry.id.split("/")[0] === astroI18n.locale);
---
<PageLayout title="Helpcenter">
<div>
<h1 style="font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.06em;">Helpcenter</h1>
<h1 class="text-amber-500 text-2xl" style="font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.8rem;">WIP</h1>
{posts.map(value => (
{
posts.map((value) => (
<a href={l("/help/" + value.slug)} class="block py-2 text-gray-400 hover:text-amber-400 transition-colors">
<h2>{value.data.title}</h2>
</a>
))}
))
}
</div>
</PageLayout>

38
src/pages/index.astro
View File

@@ -39,7 +39,6 @@ const prefixColors: { [key: string]: string } = {
---
<NavbarLayout title={t("home.page")} description="SteamWar.de Homepage" transparentFooter={false}>
<!-- ═══════════ HERO ═══════════ -->
<section class="hero">
<div class="hero-bg">
@@ -204,13 +203,7 @@ const prefixColors: { [key: string]: string } = {
position: absolute;
inset: 0;
z-index: 2;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.6) 0%,
rgba(0, 0, 0, 0.2) 35%,
rgba(0, 0, 0, 0.45) 65%,
#080808 100%
);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 35%, rgba(0, 0, 0, 0.45) 65%, #080808 100%);
}
.hero-scanlines {
@@ -218,13 +211,7 @@ const prefixColors: { [key: string]: string } = {
inset: 0;
z-index: 3;
pointer-events: none;
background: repeating-linear-gradient(
0deg,
transparent 0px,
transparent 3px,
rgba(0, 0, 0, 0.06) 3px,
rgba(0, 0, 0, 0.06) 4px
);
background: repeating-linear-gradient(0deg, transparent 0px, transparent 3px, rgba(0, 0, 0, 0.06) 3px, rgba(0, 0, 0, 0.06) 4px);
}
.hero-content {
@@ -248,7 +235,9 @@ const prefixColors: { [key: string]: string } = {
}
@media (min-width: 640px) {
.hero-label { font-size: 0.8rem; }
.hero-label {
font-size: 0.8rem;
}
}
.hero-title {
@@ -314,7 +303,9 @@ const prefixColors: { [key: string]: string } = {
}
@media (min-width: 640px) {
text-carousel > * { font-size: 1.15rem; }
text-carousel > * {
font-size: 1.15rem;
}
}
/* CTA */
@@ -331,14 +322,7 @@ const prefixColors: { [key: string]: string } = {
text-transform: uppercase;
background: rgba(245, 158, 11, 0.04);
backdrop-filter: blur(12px);
clip-path: polygon(
0 0,
calc(100% - 14px) 0,
100% 14px,
100% 100%,
14px 100%,
0 calc(100% - 14px)
);
clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
transition: all 0.35s ease;
animation: fadeUp 0.6s 1s ease-out both;
}
@@ -424,7 +408,9 @@ const prefixColors: { [key: string]: string } = {
border-bottom: none;
border-right: 1px solid rgba(255, 255, 255, 0.04);
}
.feat:last-child { border-right: none; }
.feat:last-child {
border-right: none;
}
}
.feat:hover {

3
src/pages/login.astro
View File

@@ -23,8 +23,7 @@ import BackgroundImage from "../components/BackgroundImage.astro";
<div class="h-screen w-screen fixed -z-10">
<BackgroundImage />
</div>
<div class="h-screen mx-auto p-8 pt-40 sm:pt-28 md:pt-14 flex flex-col justify-center items-center"
style="width: min(100vw, 75em);">
<div class="h-screen mx-auto p-8 pt-40 sm:pt-28 md:pt-14 flex flex-col justify-center items-center" style="width: min(100vw, 75em);">
<LoginComponent client:load />
</div>
</NavbarLayout>

2
src/pages/publics/[...schem].astro
View File

@@ -24,7 +24,7 @@ const { schem }: { schem: CollectionEntry<"publics">} = Astro.props;
<PageLayout title={schem.data.name}>
<h1 class="text-5xl font-bold w-fit" style="font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.04em;" transition:name={schem.data.id + "-title"}>{schem.data.name}</h1>
<PublicPreview client:idle pub={schem} imageHeight={schem.data.image.height}>
<Image class="object-contain" transition:name={schem.data.id + "-img"} src={schem.data.alt || schem.data.image} alt={schem.data.name}></Image>
<Image class="object-contain" transition:name={schem.data.id + "-img"} src={schem.data.alt || schem.data.image} alt={schem.data.name} />
</PublicPreview>
<!--
<p transition:name={schem.data.id + "-desc"}>{schem.data.description}</p>

12
src/pages/publics/[mode].astro
View File

@@ -23,13 +23,14 @@ export const getStaticPaths = createGetStaticPaths(async () => {
}));
});
const publics = await getCollection("publics", entry => entry.data.gamemode.id == mode.id);
const publics = await getCollection("publics", (entry) => entry.data.gamemode.id == mode.id);
---
<PageLayout title="Publics">
<h1 class="text-4xl font-bold" style="font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.04em;">{t(`${mode.data.translationKey}.title`)}</h1>
<div class="grid grid-cols-2 gap-2 mt-4">
{publics.map((pub) => (
{
publics.map((pub) => (
<a href={l("/publics/" + pub.id)}>
<Card extraClasses="w-full m-0 border-t-2 border-t-amber-500/30" hoverEffect={false}>
<div class="flex justify-center">
@@ -38,9 +39,12 @@ const publics = await getCollection("publics", entry => entry.data.gamemode.id =
{pub.data.xray && <Image slot="xray" src={pub.data.xray} alt={pub.data.name} />}
</XRayPreview>
</div>
<h2 class="font-bold text-3xl" style="font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.04em;" transition:name={pub.data.id + "-title"}>{pub.data.name}</h2>
<h2 class="font-bold text-3xl" style="font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.04em;" transition:name={pub.data.id + "-title"}>
{pub.data.name}
</h2>
</Card>
</a>
))}
))
}
</div>
</PageLayout>

4
src/pages/rangliste/[...gamemode].astro
View File

@@ -5,9 +5,9 @@ import PageLayout from "../../layouts/PageLayout.astro";
import EloTable from "../../components/EloTable.svelte";
export const getStaticPaths = createGetStaticPaths(async () => {
const modes = await getCollection("modes", entry => entry.data.ranked);
const modes = await getCollection("modes", (entry) => entry.data.ranked);
return modes.map(value => ({
return modes.map((value) => ({
props: {
mode: value,
},

51
src/pages/regeln/[mode].astro
View File

@@ -8,12 +8,12 @@ import {l} from "../../util/util";
import { Image } from "astro:assets";
export const getStaticPaths = createGetStaticPaths(async () => {
let posts = await getCollection("rules", value => value.id.split("/")[0] === astroI18n.locale);
let posts = await getCollection("rules", (value) => value.id.split("/")[0] === astroI18n.locale);
const germanPosts = await getCollection("rules", entry => entry.id.split("/")[0] === astroI18n.fallbackLocale);
const germanPosts = await getCollection("rules", (entry) => entry.id.split("/")[0] === astroI18n.fallbackLocale);
germanPosts.forEach(value => {
if (posts.find(post => post.id.split("/")[1] === value.id.split("/")[1])) {
germanPosts.forEach((value) => {
if (posts.find((post) => post.id.split("/")[1] === value.id.split("/")[1])) {
return;
} else {
posts.push(value);
@@ -27,21 +27,20 @@ export const getStaticPaths = createGetStaticPaths(async () => {
props: {
page,
german: page.id.split("/")[0] != astroI18n.locale,
mode: modes.find(value => value.id === page.id.split("/")[1].split(".")[0]),
publics: publics.filter(value => value.data.gamemode.id === page.id.split("/")[1].split(".")[0]),
mode: modes.find((value) => value.id === page.id.split("/")[1].split(".")[0]),
publics: publics.filter((value) => value.data.gamemode.id === page.id.split("/")[1].split(".")[0]),
},
params: {
mode: page.slug.split("/")[1],
},
}),
);
}));
});
interface Props {
page: CollectionEntry<"rules">,
mode: CollectionEntry<"modes">,
publics: CollectionEntry<"publics">[],
german: boolean
page: CollectionEntry<"rules">;
mode: CollectionEntry<"modes">;
publics: CollectionEntry<"publics">[];
german: boolean;
}
const { page, german, mode, publics } = Astro.props;
@@ -51,28 +50,34 @@ const {Content} = await page.render();
<PageLayout title={t("rules.title", { mode: t(`${page.data.translationKey}.title`) })}>
<h1 class="text-3xl font-bold" style="font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.04em;">{t(`${page.data.translationKey}.title`)}</h1>
{mode && mode.data.ranked && (
{
mode && mode.data.ranked && (
<Fragment>
<EloTable gamemode={page.id.split("/")[1].split(".")[0]} client:load topFive={true} />
<a class="text-amber-400 hover:text-amber-300 transition-colors text-sm" href={l(`/rangliste/${page.id.split("/")[1].split(".")[0]}`)}>{t("rules.ranking")}</a>
<a class="text-amber-400 hover:text-amber-300 transition-colors text-sm" href={l(`/rangliste/${page.id.split("/")[1].split(".")[0]}`)}>
{t("rules.ranking")}
</a>
</Fragment>
)}
{publics && publics.length != 0 && (
)
}
{
publics && publics.length != 0 && (
<Fragment>
<div class="flex overflow-x-scroll gap-2 py-4">
{publics.map(value => (
{publics.map((value) => (
<a href={l(`/publics/${value.id}`)} style="display: contents">
<Image src={value.data.image} alt={value.data.name} height={300} width={300}></Image>
<Image src={value.data.image} alt={value.data.name} height={300} width={300} />
</a>
))}
</div>
<a class="text-amber-400 hover:text-amber-300 transition-colors text-sm" href={l(`/publics/${page.id.split("/")[1].split(".")[0]}`)}>{t("rules.publics")}</a>
<a class="text-amber-400 hover:text-amber-300 transition-colors text-sm" href={l(`/publics/${page.id.split("/")[1].split(".")[0]}`)}>
{t("rules.publics")}
</a>
</Fragment>
)}
)
}
<article>
{german && (
<LanguageWarning/>
)}
{german && <LanguageWarning />}
<Content />
</article>
</PageLayout>

47
src/pages/regeln/index.astro
View File

@@ -6,43 +6,56 @@ import {Image} from "astro:assets";
import { l } from "@utils/util";
const imageMap = {
"wg": await getRandomFromMode("wargear"),
"mwg": await getRandomFromMode("miniwargear"),
"as": await getRandomFromMode("airship"),
"ws": await getRandomFromMode("warship"),
"qg": await getRandomFromMode("quickgear"),
wg: await getRandomFromMode("wargear"),
mwg: await getRandomFromMode("miniwargear"),
as: await getRandomFromMode("airship"),
ws: await getRandomFromMode("warship"),
qg: await getRandomFromMode("quickgear"),
};
async function getRandomFromMode(mode: "wargear" | "airship" | "megawargear" | "microwargear" | "miniwargear" | "quickgear" | "streetfight" | "warship"): Promise<CollectionEntry<"publics">> {
const publics = await getCollection("publics", entry => entry.data.gamemode.id === mode);
const publics = await getCollection("publics", (entry) => entry.data.gamemode.id === mode);
return publics[Math.floor(Math.random() * publics.length)];
}
const modes = await getCollection("modes", entry => entry.data.main);
const modes = await getCollection("modes", (entry) => entry.data.main);
---
<PageLayout title={t("rules.page")}>
{modes.map(value => (
{
modes.map((value) => (
<div class="sw-mode-card">
<a href={l(`/publics/${imageMap[value.data.translationKey].id}`)}>
<Image height="200" width="200" src={imageMap[value.data.translationKey].data.image}
alt={t("rules." + value.data.translationKey + ".title")} class="h-full aspect-square max-w-fit"></Image>
<Image
height="200"
width="200"
src={imageMap[value.data.translationKey].data.image}
alt={t("rules." + value.data.translationKey + ".title")}
class="h-full aspect-square max-w-fit"
/>
</a>
<div class="ml-4">
<a href={l(`/rules/${value.id}`)}>
<h1 class="text-2xl font-bold" style="font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.04em;">{t(value.data.translationKey + ".title")}</h1>
<h1 class="text-2xl font-bold" style="font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.04em;">
{t(value.data.translationKey + ".title")}
</h1>
<div class="text-gray-400 text-sm mt-1">{t("rules." + value.data.translationKey + ".description")}</div>
</a>
<div class="mt-2 flex flex-col gap-0.5">
<a href={l(`/publics/${value.id}`)} class="text-amber-400 hover:text-amber-300 w-fit text-sm transition-colors">{t("rules.publics")}</a>
{value.data.ranked
? <a href={l(`/ranked/${value.id}`)}
class="text-amber-400 hover:text-amber-300 w-fit text-sm transition-colors">{t("rules.ranking")}</a>
: null}
<a href={l(`/publics/${value.id}`)} class="text-amber-400 hover:text-amber-300 w-fit text-sm transition-colors">
{t("rules.publics")}
</a>
{value.data.ranked ? (
<a href={l(`/ranked/${value.id}`)} class="text-amber-400 hover:text-amber-300 w-fit text-sm transition-colors">
{t("rules.ranking")}
</a>
) : null}
</div>
</div>
</div>))}
</div>
))
}
<a href={l("/rangliste/MissileWars")} class="text-amber-400 hover:text-amber-300 transition-colors">MissileWars Rangliste</a>
</PageLayout>