feat : adding dialog to choose language

components/public/export-language.tsx

@@ -6,6 +6,11 @@ import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 
 export type ExportLanguage = "th" | "en";
 
+const LANGUAGE_OPTIONS = {
+  th: { label: "ไทย" },
+  en: { label: "English" },
+} satisfies Record<ExportLanguage, { label: string }>;
+
 const STORAGE_KEY = "buzz-sheet:export-language";
 const LANGUAGE_EVENT = "buzz-sheet:export-language-change";
 let memoryLanguage: ExportLanguage = "th";
@@ -21,7 +26,7 @@ function storedLanguage(): ExportLanguage {
 }
 
 export function useExportLanguage() {
-  const language = useSyncExternalStore(
+  const language = useSyncExternalStore<ExportLanguage>(
     (onStoreChange) => {
       window.addEventListener(LANGUAGE_EVENT, onStoreChange);
       window.addEventListener("storage", onStoreChange);
@@ -69,17 +74,85 @@ export function ExportLanguageToggle({
       <ToggleGroupItem
         value="th"
       >
-        ไทย
+        <ExportLanguageOption language="th" />
       </ToggleGroupItem>
       <ToggleGroupItem
         value="en"
       >
-        English
+        <ExportLanguageOption language="en" />
       </ToggleGroupItem>
     </ToggleGroup>
   );
 }
 
+export function ExportLanguageOption({
+  language,
+}: {
+  language: ExportLanguage;
+}) {
+  const option = LANGUAGE_OPTIONS[language];
+
+  return (
+    <>
+      <LanguageFlag language={language} />
+      {option.label}
+    </>
+  );
+}
+
+function LanguageFlag({ language }: { language: ExportLanguage }) {
+  if (language === "th") {
+    return (
+      <svg
+        data-icon="inline-start"
+        data-language-flag="th"
+        aria-hidden="true"
+        viewBox="0 0 9 6"
+        width="24"
+        height="16"
+      >
+        <rect width="9" height="6" fill="#a51931" />
+        <rect y="1" width="9" height="4" fill="#f4f5f8" />
+        <rect y="2" width="9" height="2" fill="#2d2a4a" />
+      </svg>
+    );
+  }
+
+  return (
+    <svg
+      data-icon="inline-start"
+      data-language-flag="en"
+      aria-hidden="true"
+      viewBox="0 0 19 10"
+      width="24"
+      height="16"
+    >
+      <rect width="19" height="10" fill="#fff" />
+      {Array.from({ length: 7 }, (_, index) => (
+        <rect
+          key={index}
+          y={index * 20 / 13}
+          width="19"
+          height={10 / 13}
+          fill="#b22234"
+        />
+      ))}
+      <rect width="7.6" height={70 / 13} fill="#3c3b6e" />
+      {Array.from({ length: 9 }, (_, row) =>
+        Array.from({ length: row % 2 === 0 ? 6 : 5 }, (_, column) => (
+          <circle
+            key={`${row}-${column}`}
+            cx={0.65 + column * 1.25 + (row % 2 === 0 ? 0 : 0.625)}
+            cy={0.35 + row * 0.58}
+            r="0.12"
+            fill="#fff"
+          />
+        )),
+      )}
+    </svg>
+  );
+}
+
 export function ExportText({ th, en }: { th: string; en: string }) {
   return (
     <>