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"; import { SITE } from "@data/constants";
// Define types for translations // Define types for translations
type TranslationKeys = 'en' | 'fr'; type TranslationKeys = "en" | "fr";
type Translations = { type Translations = {
[key in TranslationKeys]: { [key in TranslationKeys]: {
pageTitle: string; pageTitle: string;
subTitle: string; subTitle: string;
content: string; content: string;
btnTitle: string; btnTitle: string;
} };
}; };
// Define variables for page content // Define variables for page content
@ -21,21 +21,25 @@ const translations: Translations = {
en: { en: {
pageTitle: `Page Not Found | ${SITE.title}`, pageTitle: `Page Not Found | ${SITE.title}`,
subTitle: "Oops, this isn't the tool you were looking for!", 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", btnTitle: "Go Back",
}, },
fr: { fr: {
pageTitle: `Page Non Trouvée | ${SITE.title}`, pageTitle: `Page Non Trouvée | ${SITE.title}`,
subTitle: "Oops, ce n'est pas l'outil que vous recherchiez!", 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", btnTitle: "Retournez",
} },
}; };
// Determine language from the URL // Determine language from the URL
const urlPath = Astro.url.pathname; const urlPath = Astro.url.pathname;
const langCodeMatch = urlPath.match(/^\/(en|fr)\//); 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]; 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"> <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-xl px-4 py-8 lg:px-6 lg:py-16">
<div class="mx-auto max-w-screen-sm text-center"> <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 404
</h1> </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} {subTitle}
</p> </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} {content}
</p> </p>
<!-- Display a button that navigates user back to the previous page --> <!-- Display a button that navigates user back to the previous page -->
@ -61,8 +73,10 @@ const { pageTitle, subTitle, content, btnTitle } = translations[lang];
</MainLayout> </MainLayout>
<!-- JavaScript code to handle going back to the previous page --> <!-- JavaScript code to handle going back to the previous page -->
<script is:inline> <script>
document.getElementById("go-back")?.addEventListener("click", () => { const goBackButton = document.getElementById("go-back") as HTMLButtonElement;
goBackButton.addEventListener("click", () => {
history.back(); history.back();
}); });
</script> </script>