diff --git a/next-i18next.config.js b/next-i18next.config.js
index 7bee98e..6098450 100644
--- a/next-i18next.config.js
+++ b/next-i18next.config.js
@@ -1,6 +1,16 @@
-module.exports = {
-  i18n: {
-    defaultLocale: 'zh',
-    locales: ['zh', 'en', 'zh-Hant'],
-  },
-}
+// settings.js
+
+const i18nSettings = {
+  defaultLocale: 'zh',
+  locales: ['zh', 'en', 'zh-Hant'],
+};
+
+module.exports = i18nSettings;
+
+
+
+// someOtherFile.js
+
+const i18nSettings = require('./settings');
+
+// usage of i18nSettings in the code
diff --git a/src/components/EmojiField.tsx b/src/components/EmojiField.tsx
index ff6acb8..7cb5dad 100644
--- a/src/components/EmojiField.tsx
+++ b/src/components/EmojiField.tsx
@@ -1,6 +1,9 @@
-import { Popover } from '@headlessui/react'
-import EmojiPicker from 'emoji-picker-react'
+import { Popover } from '@headlessui/react' // Importing Popover component from Headless UI
+import EmojiPicker from 'emoji-picker-react' // Importing EmojiPicker component from emoji-picker-react
 
+// EmojiField component receives two props: value and onChange
+// value: string - the current emoji value
+// onChange: (v: string) => void - a callback function to update the emoji value
 export const EmojiField = ({
   value,
   onChange,
@@ -9,9 +12,12 @@ export const EmojiField = ({
   onChange: (v: string) => void
 }) => (
   <>
+    {/* Render a Popover component from Headless UI */}
     <Popover className="relative">
+      {/* Render Popover.Button as the trigger for the Popover component */}
       <Popover.Button>
         <span className="inline-flex rounded-lg bg-indigo-50 p-3 ring-4 ring-white">
+          {/* Display the current emoji value inside a div */}
           <div
             className="flex h-6 w-6 items-center justify-center"
             aria-hidden="true"
@@ -21,9 +27,12 @@ export const EmojiField = ({
         </span>
       </Popover.Button>
 
+      {/* Render Popover.Panel to contain the EmojiPicker component */}
       <Popover.Panel className="absolute z-10">
+        {/* Render EmojiPicker component and attach an onEmojiClick event handler */}
         <EmojiPicker onEmojiClick={({ emoji }) => onChange(emoji)} />
       </Popover.Panel>
     </Popover>
   </>
 )
+