jalil/achat-maison-albi-fr
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add type assertion for go-back button

Browse source
This commit is contained in:
Emil Gulamov 2024-10-17 03:01:30 +04:00
parent 0ec4086f1e
commit 887cc6dca1
1 changed files with 25 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/pages/404.astro
View file

@ -5,14 +5,14 @@ import Btn404 from "@components/ui/buttons/Btn404.astro";
import { SITE } from "@data/constants";
// Define types for translations
type TranslationKeys = 'en' | 'fr';
type TranslationKeys = "en" | "fr";
type Translations = {
[key in TranslationKeys]: {
pageTitle: string;
subTitle: string;
content: string;
btnTitle: string;
}
};
};
// Define variables for page content
@ -21,21 +21,25 @@ const translations: Translations = {
en: {
pageTitle: `Page Not Found | ${SITE.title}`,
subTitle: "Oops, this isn't the tool you were looking for!",
content: "Don't let this hiccup slow you down. Let's get you back to building your masterpiece.",
content:
"Don't let this hiccup slow you down. Let's get you back to building your masterpiece.",
btnTitle: "Go Back",
},
fr: {
pageTitle: `Page Non Trouvée | ${SITE.title}`,
subTitle: "Oops, ce n'est pas l'outil que vous recherchiez!",
content: "Ne laissez pas ce contretemps vous ralentir. Revenons à la construction de votre chef-d'œuvre.",
content:
"Ne laissez pas ce contretemps vous ralentir. Revenons à la construction de votre chef-d'œuvre.",
btnTitle: "Retournez",
}
},
};
// Determine language from the URL
const urlPath = Astro.url.pathname;
const langCodeMatch = urlPath.match(/^\/(en|fr)\//);
const lang: TranslationKeys = langCodeMatch ? langCodeMatch[1] as TranslationKeys : defaultLang;
const lang: TranslationKeys = langCodeMatch
? (langCodeMatch[1] as TranslationKeys)
: defaultLang;
const { pageTitle, subTitle, content, btnTitle } = translations[lang];
---
@ -44,13 +48,21 @@ const { pageTitle, subTitle, content, btnTitle } = translations[lang];
<section class="grid h-svh place-content-center">
<div class="mx-auto max-w-screen-xl px-4 py-8 lg:px-6 lg:py-16">
<div class="mx-auto max-w-screen-sm text-center">
<h1 class="text-dark mb-4 text-7xl font-extrabold text-yellow-500 dark:text-yellow-400 lg:text-9xl">
<h1
class="text-dark mb-4 text-7xl font-extrabold text-yellow-500 dark:text-yellow-400 lg:text-9xl"
>
404
</h1>
<p id="subtitle" class="mb-4 text-balance text-3xl font-bold tracking-tight text-neutral-700 dark:text-neutral-300 md:text-4xl">
<p
id="subtitle"
class="mb-4 text-balance text-3xl font-bold tracking-tight text-neutral-700 dark:text-neutral-300 md:text-4xl"
>
{subTitle}
</p>
<p id="content" class="mb-4 text-pretty text-lg text-neutral-600 dark:text-neutral-400">
<p
id="content"
class="mb-4 text-pretty text-lg text-neutral-600 dark:text-neutral-400"
>
{content}
</p>
<!-- Display a button that navigates user back to the previous page -->
@ -61,8 +73,10 @@ const { pageTitle, subTitle, content, btnTitle } = translations[lang];
</MainLayout>
<!-- JavaScript code to handle going back to the previous page -->
<script is:inline>
document.getElementById("go-back")?.addEventListener("click", () => {
<script>
const goBackButton = document.getElementById("go-back") as HTMLButtonElement;
goBackButton.addEventListener("click", () => {
history.back();
});
</script>