From c4332d97c7f180cc387761d9760df51298873b06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=85rth=E1=80=9Dur?= <curious.dev@icloud.com>
Date: Mon, 2 Oct 2023 23:58:17 +0400
Subject: [PATCH] fix: use dictionary

---
 .gitignore                             |  3 +++
 app/dictionaries.ts                    |  8 +++++++
 components/hello-world/hello-world.tsx | 32 +++++++++++++++-----------
 3 files changed, 30 insertions(+), 13 deletions(-)
 create mode 100644 app/dictionaries.ts

diff --git a/.gitignore b/.gitignore
index 8f322f0..7b88226 100644
--- a/.gitignore
+++ b/.gitignore
@@ -33,3 +33,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# StoryBook
+/storybook-static
diff --git a/app/dictionaries.ts b/app/dictionaries.ts
new file mode 100644
index 0000000..8a0829d
--- /dev/null
+++ b/app/dictionaries.ts
@@ -0,0 +1,8 @@
+import 'server-only';
+
+const dictionaries = {
+  en: () => import('../dictionaries/en.json').then((module) => module.default),
+  es: () => import('../dictionaries/es.json').then((module) => module.default),
+};
+
+export const getDictionary = async (locale: string) => dictionaries[locale]();
diff --git a/components/hello-world/hello-world.tsx b/components/hello-world/hello-world.tsx
index 879ec2a..662dff8 100644
--- a/components/hello-world/hello-world.tsx
+++ b/components/hello-world/hello-world.tsx
@@ -2,17 +2,23 @@ import Image from 'next/image';
 
 import Earth from '@/public/earth.svg';
 import { Title } from './hello-world.css';
+import { getDictionary } from '../../app/dictionaries';
 
-export const HelloWorld = ({ name = 'World' }) => (
-  <>
-    <h1 className={Title}>Hello {name}!</h1>
-    <Image
-      src={Earth}
-      alt="Earth image"
-      className="dark:invert"
-      width={100}
-      height={100}
-      priority
-    />
-  </>
-);
+export const HelloWorld = async ({ name = 'World' }) => {
+  const dict = await getDictionary('en');
+  return (
+    <>
+      <h1 className={Title}>
+        {dict.hello} {name}!
+      </h1>
+      <Image
+        src={Earth}
+        alt="Earth image"
+        className="dark:invert"
+        width={100}
+        height={100}
+        priority
+      />
+    </>
+  );
+};