feat(web app): add language-selection page

inkwell-studio · Oct 7, 2023 · 2e2def2 · 2e2def2
1 parent d3a436d
commit 2e2def2
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 1 deletion.
diff --git a/fresh.gen.ts b/fresh.gen.ts
@@ -9,6 +9,7 @@ import * as $3 from './routes/_app.tsx';
 import * as $4 from './routes/_middleware.ts';
 import * as $5 from './routes/api/[language]/paragraph/[paragraph_number_range].ts';
 import * as $6 from './routes/index.tsx';
+import * as $7 from './routes/select-language.tsx';
 import * as $$0 from './routes/(_islands)/changelog-trigger.tsx';
 import * as $$1 from './routes/(_islands)/changelog.tsx';
 import * as $$2 from './routes/(_islands)/citations.tsx';
@@ -28,6 +29,7 @@ const manifest = {
         './routes/_middleware.ts': $4,
         './routes/api/[language]/paragraph/[paragraph_number_range].ts': $5,
         './routes/index.tsx': $6,
+        './routes/select-language.tsx': $7,
     },
     islands: {
         './routes/(_islands)/changelog-trigger.tsx': $$0,

diff --git a/routes/index.tsx b/routes/index.tsx
@@ -188,7 +188,7 @@ export default function Home(): JSX.Element {
                     </Paragraph>
                     <Paragraph>
                         <div class='mt-3 mx-4 flex'>
-                            <ButtonLink newTab={false} href='/en' text='Enter'></ButtonLink>
+                            <ButtonLink newTab={false} href='/select-language' text='Enter'></ButtonLink>
                         </div>
                     </Paragraph>
                 </div>

diff --git a/routes/select-language.tsx b/routes/select-language.tsx
@@ -0,0 +1,29 @@
+import { JSX } from 'preact';
+
+import { Language } from '../catechism/source/types/types.ts';
+import { getNativeLanguageText, getSupportedLanguages } from '../catechism/source/utils/language.ts';
+
+export default function SelectLanguage(): JSX.Element {
+    return (
+        <div class='min-h-screen bg-white flex flex-col items-center'>
+            <h1 class='mt-[15vh] font-serif text-3xl text-center'>Select your language:</h1>
+            <div class='flex flex-col gap-8 items-center mt-16'>
+                {getLanguages().map((languageData) => (
+                    <a
+                        href={`/${languageData.language}`}
+                        class='w-48 bg-tan-50 text-lg font-bold text-center py-8 shadow-lg hover:shadow-xl'
+                    >
+                        {languageData.text}
+                    </a>
+                ))}
+            </div>
+            <a href='/' class='mt-16 mb-8 text-lg hover:underline'>Return to the Introduction</a>
+        </div>
+    );
+}
+
+function getLanguages(): Array<{ language: Language; text: string }> {
+    return getSupportedLanguages()
+        .map(([_text, language]) => ({ language, text: getNativeLanguageText(language) }))
+        .sort((a, b) => a.text.localeCompare(b.text));
+}