diff --git a/public/assets/ark-library/flags/en.svg b/public/assets/ark-library/flags/en.svg
new file mode 100644
index 0000000..dafb35e
--- /dev/null
+++ b/public/assets/ark-library/flags/en.svg
@@ -0,0 +1,12 @@
+
diff --git a/public/assets/ark-library/flags/id.svg b/public/assets/ark-library/flags/id.svg
new file mode 100644
index 0000000..bcacfb9
--- /dev/null
+++ b/public/assets/ark-library/flags/id.svg
@@ -0,0 +1,11 @@
+
diff --git a/public/assets/ark-library/flags/ja.svg b/public/assets/ark-library/flags/ja.svg
new file mode 100644
index 0000000..5aa8386
--- /dev/null
+++ b/public/assets/ark-library/flags/ja.svg
@@ -0,0 +1,11 @@
+
diff --git a/public/assets/ark-library/flags/ko.svg b/public/assets/ark-library/flags/ko.svg
new file mode 100644
index 0000000..309abe8
--- /dev/null
+++ b/public/assets/ark-library/flags/ko.svg
@@ -0,0 +1,23 @@
+
diff --git a/public/assets/ark-library/flags/ms.svg b/public/assets/ark-library/flags/ms.svg
new file mode 100644
index 0000000..d30e666
--- /dev/null
+++ b/public/assets/ark-library/flags/ms.svg
@@ -0,0 +1,25 @@
+
diff --git a/public/assets/ark-library/flags/vi.svg b/public/assets/ark-library/flags/vi.svg
new file mode 100644
index 0000000..35c8640
--- /dev/null
+++ b/public/assets/ark-library/flags/vi.svg
@@ -0,0 +1,11 @@
+
diff --git a/public/assets/ark-library/flags/zh-CN.svg b/public/assets/ark-library/flags/zh-CN.svg
new file mode 100644
index 0000000..fc039d6
--- /dev/null
+++ b/public/assets/ark-library/flags/zh-CN.svg
@@ -0,0 +1,15 @@
+
diff --git a/src/layouts/PublicLayout.tsx b/src/layouts/PublicLayout.tsx
index 9ea3783..ccd90a6 100644
--- a/src/layouts/PublicLayout.tsx
+++ b/src/layouts/PublicLayout.tsx
@@ -1,11 +1,4 @@
-import {
- Check,
- ChevronDown,
- Globe,
- Menu,
- Search as SearchIcon,
- X,
-} from "lucide-react";
+import { ChevronDown, Menu, Search as SearchIcon, X } from "lucide-react";
import { useEffect, useRef, useState } from "react";
import { Link, Outlet, useLocation, useNavigate } from "react-router-dom";
import { ArkLogoMark } from "../components/ArkLogoMark";
@@ -65,9 +58,27 @@ type LanguageDropdownProps = {
className?: string;
};
-function languageButtonLabel(lang: Lang): string {
- if (lang === "zh-CN") return "δΈ";
- return lang.toUpperCase();
+function flagSrc(code: Lang): string {
+ return `/assets/ark-library/flags/${code}.svg`;
+}
+
+function FlagIcon({
+ code,
+ className = "",
+}: {
+ code: Lang;
+ className?: string;
+}) {
+ return (
+ })
+ );
}
function LanguageDropdown({
@@ -110,7 +121,7 @@ function LanguageDropdown({
aria-haspopup="listbox"
aria-expanded={open}
>
-
+
{selected?.label ?? lang}
@@ -147,11 +158,7 @@ function LanguageDropdown({
: "text-neutral-200 hover:bg-white/10 hover:text-white"
}`}
>
-
- {active ? (
-
- ) : null}
-
+
{option.label}
);
@@ -206,12 +213,12 @@ function MobileLanguageButton({
onOpen?.();
setOpen((value) => !value);
}}
- className="flex h-10 w-10 items-center justify-center rounded-full border border-[#58585d] bg-transparent text-[15px] font-normal leading-[15px] text-[#e4e4e6] outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-[#08070c]"
+ className="flex h-10 w-10 items-center justify-center overflow-hidden rounded-full bg-[#191921] outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-[#08070c]"
aria-label={ariaLabel}
aria-haspopup="listbox"
aria-expanded={open}
>
- {languageButtonLabel(lang)}
+
{open ? (
@@ -238,11 +245,7 @@ function MobileLanguageButton({
: "text-neutral-200 hover:bg-white/10 hover:text-white"
}`}
>
-
- {active ? (
-
- ) : null}
-
+
{option.label}
);