feat: localize language

packages/website/src/pages/[...locale]/index.astro

@@ -7,9 +7,9 @@ import {
 import { Box, Flex, Heading } from '@radix-ui/themes';
 import type { GetStaticPaths } from 'astro';
 import { AesonPlug } from '../../components/AesonPlug';
+import { HomeLocaleSwitcher } from '../../components/Home/HomeLocaleSwitcher';
 import HomeHero from '../../components/HomeHero.astro';
 import { HomePageHotTanks } from '../../components/HomePageHotTanks';
-import { LocaleSwitcher } from '../../components/LocaleSwitcher';
 import { Plugs } from '../../components/Plugs';
 import ToolCard from '../../components/ToolCard.astro';
 import {
@@ -44,7 +44,7 @@ export const getStaticPaths = (() => {
 <BaseLayout>
   <HomeHero />
 
-  <LocaleSwitcher {locale} client:load />
+  <HomeLocaleSwitcher {locale} client:load />
 
   <Plugs client:idle />
 

packages/website/src/pages/[...locale]/settings/_index.tsx

@@ -1,34 +1,45 @@
-import { Flex, Heading, Switch, Text } from '@radix-ui/themes';
+import { DEFAULT_LOCALE } from '@blitzkit/core';
+import { Flex, Switch, Text } from '@radix-ui/themes';
+import { LocaleSwitcher } from '../../../components/LocaleSwitcher';
 import { PageWrapper } from '../../../components/PageWrapper';
+import {
+  LocaleProvider,
+  useLocale,
+  type LocaleAcceptorProps,
+} from '../../../hooks/useLocale';
 import { App } from '../../../stores/app';
 
-export function Page() {
+export function Page({ locale = DEFAULT_LOCALE }: LocaleAcceptorProps) {
   return (
-    <App.Provider>
-      <Content />
-    </App.Provider>
+    <LocaleProvider locale={locale}>
+      <App.Provider>
+        <Content locale={locale} />
+      </App.Provider>
+    </LocaleProvider>
   );
 }
 
-function Content() {
+function Content({ locale }: LocaleAcceptorProps) {
   const developerMode = App.useDeferred((state) => state.developerMode, false);
   const appStore = App.useStore();
+  const { strings } = useLocale();
 
   return (
     <PageWrapper justify="center" align="center">
-      <Flex direction="column" gap="4">
-        <Flex gap="3" direction="column">
-          <Heading size="5">Advanced</Heading>
+      <Flex gap="3" direction="column" width="100%" maxWidth="20rem">
+        <Flex align="center" gap="2" justify="between">
+          <Text>{strings.website.settings.dev_mode}</Text>
+          <Switch
+            checked={developerMode}
+            onCheckedChange={(checked) =>
+              appStore.setState({ developerMode: checked })
+            }
+          />
+        </Flex>
 
-          <Flex align="center" gap="2">
-            <Text>Developer mode</Text>
-            <Switch
-              checked={developerMode}
-              onCheckedChange={(checked) =>
-                appStore.setState({ developerMode: checked })
-              }
-            />
-          </Flex>
+        <Flex align="center" gap="2" justify="between">
+          <Text>{strings.website.settings.language}</Text>
+          <LocaleSwitcher locale={locale} />
         </Flex>
       </Flex>
     </PageWrapper>

packages/website/src/pages/[...locale]/settings/index.astro

@@ -1,8 +1,12 @@
 ---
 import BaseLayout from '../../../layouts/BaseLayout.astro';
 import { Page } from './_index';
+
+export { getStaticPaths } from '../index.astro';
+
+const { locale } = Astro.params;
 ---
 
 <BaseLayout>
-  <Page client:load />
+  <Page {locale} client:load />
 </BaseLayout>