dooris/app/src/pages/[lang]/index.astro
2026-05-14 20:30:23 +02:00

85 lines
2.4 KiB
Text

---
import Layout from "../../layouts/Layout.astro"
import "../../styles/global.css"
import Alert from "../../components/Alert.astro"
import DoorTemplate from "../../components/DoorTemplate.astro"
import {LogIn, Lock} from "@lucide/astro"
import {getLangFromUrl, useTranslations} from "../../i18n/utils"
export async function getStaticPaths() {
return [
{params: {lang: "en"}},
{params: {lang: "de"}},
]
}
const lang = getLangFromUrl(Astro.url)
const t = useTranslations(lang)
---
<Layout>
<Fragment slot="head">
<script src="../../assets/main.ts"/>
</Fragment>
<div class="grid place-items-center grid-cols-1 gap-4 max-w-xl mx-auto" id="list">
<Alert
classList="hidden"
id="alert-loggedout"
color="warning"
title={t("loggedOut.title")}
description={t("loggedOut.description")}
>
<div class="flex justify-end">
<a href="/auth/login" class="btn btn-sm btn-warning">
<LogIn/>
{t("login")}
</a>
</div>
</Alert>
<Alert
classList="hidden"
id="alert-unauthenticated"
color="info"
title={t("unauthenticated.title")}
description={t("unauthenticated.description")}
>
<Fragment slot="icon"> <!-- pass table header -->
<LogIn class="size-7"/>
</Fragment>
</Alert>
<Alert
classList="hidden"
id="alert-unauthorized"
color="info"
title={t("unauthorized.title")}
description={t("unauthorized.description")}
>
<Fragment slot="icon"> <!-- pass table header -->
<Lock class="size-7"/>
</Fragment>
</Alert>
<Alert
classList="hidden"
id="alert-serverError"
color="error"
title={t("serverError.title")}
description={t("serverError.description")}
/>
<Alert
classList="hidden"
id="alert-networkError"
color="error"
title={t("networkError.title")}
description={t("networkError.description")}
/>
<div class="divider w-full my-0" id="alert-divider"></div>
<div id="loading-doors" class="card w-full bg-info/5 hidden">
<div class="card-body flex-row gap-4 items-center justify-center">
<span class="text-xl">Loading Doors</span>
<span class="loading loading-spinner loading-xl"></span>
</div>
</div>
</div>
<DoorTemplate state="unknown"/>
</Layout>