From 3825c4ec2f35047018f61630ce4348f94d204f78 Mon Sep 17 00:00:00 2001 From: TerryM Date: Thu, 28 May 2026 10:27:47 +0800 Subject: [PATCH] feat: replace language selector text/globe with country flag icons --- public/assets/ark-library/flags/en.svg | 12 ++++++ public/assets/ark-library/flags/id.svg | 11 +++++ public/assets/ark-library/flags/ja.svg | 11 +++++ public/assets/ark-library/flags/ko.svg | 23 ++++++++++ public/assets/ark-library/flags/ms.svg | 25 +++++++++++ public/assets/ark-library/flags/vi.svg | 11 +++++ public/assets/ark-library/flags/zh-CN.svg | 15 +++++++ src/layouts/PublicLayout.tsx | 51 ++++++++++++----------- 8 files changed, 135 insertions(+), 24 deletions(-) create mode 100644 public/assets/ark-library/flags/en.svg create mode 100644 public/assets/ark-library/flags/id.svg create mode 100644 public/assets/ark-library/flags/ja.svg create mode 100644 public/assets/ark-library/flags/ko.svg create mode 100644 public/assets/ark-library/flags/ms.svg create mode 100644 public/assets/ark-library/flags/vi.svg create mode 100644 public/assets/ark-library/flags/zh-CN.svg 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} );