terry/Arkie-Library-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: replace language selector text/globe with country flag icons

Browse Source
This commit is contained in:
TerryM
2026-05-28 10:27:47 +08:00
parent f7d62bff6e
commit 3825c4ec2f
8 changed files with 135 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
public/assets/ark-library/flags/en.svg Normal file
View File

@@ -0,0 +1,12 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_4220_10205)">
<path d="M11.9998 23.9995C18.6268 23.9995 23.9995 18.6264 23.9995 11.9998C23.9995 5.37318 18.6273 0 11.9998 0C5.37224 0 0 5.37364 0 11.9998C0 18.6259 5.37271 23.9995 11.9998 23.9995Z" fill="#F0F0F0"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M22.2259 5.73314H11.4599V2.59961H19.4594C20.5579 3.47415 21.4943 4.53476 22.2259 5.73314ZM23.9992 11.9988H11.4665V8.86621H23.5862C23.8612 9.88767 24.0001 10.941 23.9992 11.9988ZM11.9994 23.9986C14.7123 24.0048 17.3462 23.0855 19.466 21.3924H4.53332C6.65275 23.0857 9.2866 24.0051 11.9994 23.9986ZM22.2391 18.2659H1.75978C1.16246 17.2918 0.708889 16.2365 0.413086 15.1328H23.5858C23.29 16.2365 22.8365 17.2918 22.2391 18.2659Z" fill="#D80027"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.57099 1.86747H5.5602V1.87497L5.57099 1.86747ZM5.57099 1.86747H6.65612L5.6338 2.60105L6.02051 3.80103L5.00053 3.06745L3.98711 3.80103L4.32038 2.76558C3.42466 3.51526 2.64316 4.39167 2.00059 5.36709H2.35402L1.70715 5.83583L1.41372 6.35145L1.72028 7.30487L1.14045 6.883L0.740611 7.81392L1.07389 8.85921H2.33949L1.33357 9.60029L1.72028 10.8003L0.700299 10.0667L0.100311 10.5064C0.0333572 11.0014 -0.000155581 11.5003 5.42967e-07 11.9998H11.9998V1.01072e-05C9.72265 -0.00295146 7.49213 0.644982 5.57099 1.86747ZM6.01816 10.7942L6.02707 10.8012H6.02051L6.01816 10.7942ZM5.63333 9.60076L6.01816 10.7942L5.00006 10.0676L3.98008 10.8012L4.36679 9.60123L3.34681 8.86765H4.61241L4.99912 7.66767L5.38583 8.86765H6.65143L5.63333 9.60076ZM5.64036 6.1077L6.02707 7.30768L5.00709 6.5741L3.98711 7.30768L4.37382 6.1077L3.35384 5.37412H4.61944L5.00615 4.17415L5.39286 5.37412H6.65846L5.64036 6.1077ZM9.31341 10.0676L10.3334 10.8012L9.94668 9.60123L10.9685 8.86765H9.70294L9.31623 7.66767L8.92951 8.86765H7.66391L8.68389 9.60123L8.29718 10.8012L9.31341 10.0676ZM9.94668 6.1077L10.3334 7.30768L9.31341 6.5741L8.29343 7.30768L8.68014 6.1077L7.66016 5.37412H8.92576L9.31248 4.17415L9.69919 5.37412H10.9648L9.94668 6.1077ZM10.3334 3.81415L9.94668 2.61418L10.9685 1.8806H9.70294L9.31623 0.680622L8.92951 1.8806H7.66391L8.68389 2.61418L8.29718 3.81415L9.31716 3.08057L10.3334 3.81415Z" fill="#0052B4"/>
</g>
<defs>
<clipPath id="clip0_4220_10205">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

11
public/assets/ark-library/flags/id.svg Normal file
View File

@@ -0,0 +1,11 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_4220_10204)">
<path d="M0 12C0 5.37281 5.37281 0 12 0C18.6272 0 24 5.37281 24 12" fill="#D81F2A"/>
<path d="M24 12C24 18.6272 18.6272 24 12 24C5.37281 24 0 18.6272 0 12H24Z" fill="#F1F0F0"/>
</g>
<defs>
<clipPath id="clip0_4220_10204">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 428 B

11
public/assets/ark-library/flags/ja.svg Normal file
View File

@@ -0,0 +1,11 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_4220_10208)">
<path d="M12 24C18.6272 24 24 18.6267 24 12C24 5.37328 18.6272 0 12 0C5.37281 0 0 5.37328 0 12C0 18.6267 5.37281 24 12 24Z" fill="#F0F0F0"/>
<path d="M11.9975 17.2193C13.03 17.2199 14.0395 16.9142 14.8983 16.341C15.757 15.7677 16.4265 14.9527 16.8221 13.999C17.2176 13.0452 17.3214 11.9956 17.1203 10.9828C16.9193 9.97007 16.4224 9.03969 15.6925 8.30936C14.9627 7.57903 14.0326 7.08156 13.02 6.87986C12.0073 6.67817 10.9576 6.78131 10.0036 7.17624C9.04964 7.57118 8.23419 8.24016 7.66043 9.09859C7.08666 9.95701 6.78037 10.9663 6.78027 11.9988C6.78027 13.3828 7.32984 14.7102 8.30815 15.6891C9.28647 16.668 10.6135 17.2184 11.9975 17.2193Z" fill="#D80027"/>
</g>
<defs>
<clipPath id="clip0_4220_10208">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 909 B

23
public/assets/ark-library/flags/ko.svg Normal file
View File

@@ -0,0 +1,23 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_4220_10206)">
<path d="M24 12C24 13.5759 23.6896 15.1363 23.0866 16.5922C22.4835 18.0481 21.5996 19.371 20.4853 20.4853C19.371 21.5996 18.0481 22.4835 16.5922 23.0866C15.1363 23.6896 13.5759 24 12 24C10.4241 24 8.86371 23.6896 7.4078 23.0866C5.95189 22.4835 4.62902 21.5996 3.51472 20.4853C2.40042 19.371 1.5165 18.0481 0.913447 16.5922C0.310391 15.1363 -3.32088e-08 13.5759 0 12C-3.32088e-08 10.4241 0.310391 8.86371 0.913447 7.4078C1.5165 5.95189 2.40042 4.62902 3.51472 3.51472C4.62902 2.40042 5.95189 1.5165 7.4078 0.913446C8.86371 0.310389 10.4241 0 12 0C13.5759 0 15.1363 0.310389 16.5922 0.913446C18.0481 1.5165 19.371 2.40042 20.4853 3.51472C21.5996 4.62902 22.4835 5.95189 23.0866 7.4078C23.6896 8.86371 24 10.4241 24 12Z" fill="white"/>
<path d="M3.64258 8.92969L5.94777 5.47398L3.64258 8.92969ZM4.50651 9.50599L6.8117 6.05027L4.50651 9.50599ZM5.37043 10.0823L7.67563 6.62657L5.37043 10.0823Z" fill="black"/>
<path d="M16.3135 17.3828L18.6187 13.9271L16.3135 17.3828ZM17.1774 17.9591L19.4826 14.5034L17.1774 17.9591ZM18.0413 18.5354L20.3465 15.0797L18.0413 18.5354Z" fill="black"/>
<path d="M16.8906 15.2715L19.7704 17.1925L16.8906 15.2715Z" fill="black"/>
<path d="M16.8906 15.2715L19.7704 17.1925" stroke="white" stroke-width="7.38492"/>
<path d="M15.451 14.3109C16.7241 12.4024 16.209 9.82314 14.3005 8.55002C12.3919 7.2769 9.81269 7.792 8.53957 9.70054C7.26644 11.6091 7.78155 14.1883 9.69009 15.4614C11.5986 16.7346 14.1779 16.2195 15.451 14.3109Z" fill="#E74C3C"/>
<path d="M8.53957 9.70054C8.23388 10.1588 8.12275 10.7197 8.23064 11.2599C8.33852 11.8001 8.65657 12.2753 9.11483 12.581C9.57308 12.8867 10.134 12.9978 10.6742 12.8899C11.2144 12.782 11.6896 12.464 11.9953 12.0057C12.301 11.5475 12.7762 11.2294 13.3164 11.1215C13.8566 11.0137 14.4175 11.1248 14.8757 11.4305C15.334 11.7362 15.652 12.2114 15.7599 12.7516C15.8678 13.2917 15.7567 13.8527 15.451 14.3109C14.8396 15.2274 13.8892 15.8635 12.8088 16.0793C11.7284 16.2951 10.6066 16.0728 9.69009 15.4614C8.77358 14.8501 8.13747 13.8996 7.9217 12.8193C7.70594 11.7389 7.92819 10.617 8.53957 9.70054Z" fill="#356BA0"/>
<path d="M5.94824 18.5352L3.64305 15.0794L5.94824 18.5352ZM6.81217 17.9589L4.50698 14.5031L6.81217 17.9589ZM7.6761 17.3826L5.37091 13.9268L7.6761 17.3826Z" fill="black"/>
<path d="M18.6191 10.082L16.3139 6.62632L18.6191 10.082ZM19.4831 9.50573L17.1779 6.05002L19.4831 9.50573ZM20.347 8.92944L18.0418 5.47372L20.347 8.92944Z" fill="black"/>
<path d="M7.38365 6.43193L7.9685 6.82207L5.66331 10.2778L5.07846 9.88765L7.38365 6.43193ZM6.5197 5.85562L7.10459 6.24578L4.7994 9.7015L4.21451 9.31134L6.5197 5.85562ZM5.65579 5.27934L6.24064 5.66947L3.93545 9.12519L3.3506 8.73505L5.65579 5.27934Z" fill="#222222"/>
<path d="M20.0546 14.8843L20.6394 15.2744L18.3343 18.7301L17.7494 18.34L20.0546 14.8843ZM19.1906 14.308L19.7755 14.6981L17.4703 18.1538L16.8855 17.7637L19.1906 14.308ZM18.3267 13.7317L18.9116 14.1218L16.6064 17.5775L16.0215 17.1874L18.3267 13.7317Z" fill="#222222"/>
<path d="M5.07844 14.1219L5.66329 13.7317L7.96849 17.1874L7.38364 17.5776L5.07844 14.1219ZM4.2145 14.6982L4.79938 14.308L7.10458 17.7637L6.51969 18.1539L4.2145 14.6982ZM3.35059 15.2745L3.93544 14.8843L6.24063 18.34L5.65578 18.7302L3.35059 15.2745Z" fill="#222222"/>
<path d="M17.7494 5.66943L18.3342 5.2793L20.6394 8.73501L20.0546 9.12515L17.7494 5.66943ZM16.8854 6.24574L17.4703 5.85558L19.7755 9.3113L19.1906 9.70146L16.8854 6.24574ZM16.0215 6.82203L16.6064 6.43189L18.9116 9.88761L18.3267 10.2777L16.0215 6.82203Z" fill="#222222"/>
<path d="M18.666 7.34743L19.53 6.77112L19.722 7.05909L18.8581 7.6354L18.666 7.34743ZM16.7942 8.59608L17.8021 7.92372L17.9942 8.21169L16.9863 8.88405L16.7942 8.59608ZM5.13115 16.3761L5.99506 15.7998L6.18715 16.0878L5.32324 16.6641L5.13115 16.3761Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_4220_10206">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

25
public/assets/ark-library/flags/ms.svg Normal file
View File

@@ -0,0 +1,25 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_4220_10209)">
<mask id="mask0_4220_10209" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="-1" width="24" height="25">
<path d="M12 23.9785C18.6274 23.9785 24 18.6059 24 11.9785C24 5.3511 18.6274 -0.0214844 12 -0.0214844C5.37258 -0.0214844 0 5.3511 0 11.9785C0 18.6059 5.37258 23.9785 12 23.9785Z" fill="white"/>
</mask>
<g mask="url(#mask0_4220_10209)">
<path d="M0 0H24V24.048H0V0Z" fill="#CB2026"/>
<path d="M0 22.332H24V24.0497H0V22.332Z" fill="white"/>
<path d="M0 18.8965H24V20.6142H0V18.8965Z" fill="white"/>
<path d="M0 15.4609H24V17.1786H0V15.4609Z" fill="white"/>
<path d="M0 12.0254H24V13.7431H0V12.0254Z" fill="white"/>
<path d="M0 8.58984H24V10.3076H0V8.58984Z" fill="white"/>
<path d="M0 5.1543H24V6.872H0V5.1543Z" fill="white"/>
<path d="M0 1.71875H24V3.43648H0V1.71875Z" fill="white"/>
<path d="M0 -0.0214844H15.1638V13.742H0V-0.0214844Z" fill="#21205F"/>
<path d="M7.13106 4.41406C5.14942 4.41406 3.54102 6.01709 3.54102 7.99217C3.54102 9.96725 5.14942 11.5703 7.13106 11.5703C7.84698 11.5703 8.51401 11.3608 9.07426 11.0004C8.74801 11.1129 8.39787 11.1746 8.03338 11.1746C6.27625 11.1746 4.85014 9.75315 4.85014 8.00185C4.85014 6.25047 6.27625 4.82914 8.03338 4.82914C8.4217 4.82914 8.79368 4.8985 9.13786 5.02553C8.56486 4.63961 7.87417 4.41406 7.13106 4.41406Z" fill="#FFCD05"/>
<path d="M13.085 9.85617L11.5728 9.06714L12.0198 10.682L11.0084 9.33121L10.6929 10.9753L10.3825 9.33021L9.36676 10.6779L9.81901 9.06453L8.3043 9.84899L9.42949 8.58669L7.71582 8.65249L9.2912 7.99139L7.71793 7.32549L9.43144 7.39643L8.31018 6.13079L9.82237 6.91981L9.3753 5.30502L10.3868 6.65577L10.7023 5.01172L11.0126 6.65675L12.0284 5.30903L11.5761 6.92243L13.0908 6.13797L11.9656 7.40027L13.6793 7.33446L12.104 7.99559L13.6772 8.66147L11.9637 8.59053L13.085 9.85617Z" fill="#FFCD05"/>
</g>
</g>
<defs>
<clipPath id="clip0_4220_10209">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

11
public/assets/ark-library/flags/vi.svg Normal file
View File

@@ -0,0 +1,11 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_4220_10207)">
<path d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="#D80027"/>
<path d="M11.9995 6.7832L13.2946 10.7689H17.4855L14.095 13.2322L15.39 17.218L11.9995 14.7547L8.60908 17.218L9.90414 13.2322L6.51367 10.7689H10.7045L11.9995 6.7832Z" fill="#FFDA44"/>
</g>
<defs>
<clipPath id="clip0_4220_10207">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 574 B

15
public/assets/ark-library/flags/zh-CN.svg Normal file
View File

@@ -0,0 +1,15 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_4220_10210)">
<path d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="#EE1C25"/>
<path d="M20.0091 13.8945L18.8307 13.8753L18.4475 12.7617L18.0651 13.8753L16.8867 13.8953L17.8283 14.6025L17.4835 15.7281L18.4483 15.0521L19.4131 15.7281L19.0675 14.6025L20.0091 13.8945Z" fill="#FFFF00"/>
<path d="M15.6869 8.58218L15.7061 7.40378L16.8197 7.02058L15.7061 6.63738L15.6861 5.45898L14.9789 6.40058L13.8525 6.05658L14.5293 7.02138L13.8525 7.98618L14.9789 7.63978L15.6869 8.58218Z" fill="#FFFF00"/>
<path d="M15.6869 18.5412L15.7061 17.3628L16.8197 16.9796L15.7061 16.5964L15.6861 15.418L14.9789 16.3596L13.8525 16.0156L14.5293 16.9804L13.8525 17.9452L14.9789 17.5988L15.6869 18.5412Z" fill="#FFFF00"/>
<path d="M18.9224 10.0288L19.4392 8.97037L18.3808 9.48717L17.5336 8.66797L17.6992 9.83357L16.6592 10.3864L17.82 10.5904L18.024 11.7512L18.5752 10.7104L19.7416 10.8752L18.9224 10.0288Z" fill="#FFFF00"/>
<path d="M12.4088 10.572L9.23201 10.5192L8.19921 7.51758L7.16721 10.52L3.99121 10.5736L6.52961 12.4816L5.60001 15.5176L8.20081 13.6944L10.8024 15.516L9.87121 12.4808L12.4088 10.572Z" fill="#FFFF00"/>
</g>
<defs>
<clipPath id="clip0_4220_10210">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

51
src/layouts/PublicLayout.tsx
View File

@@ -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 (
<img
src={flagSrc(code)}
alt=""
aria-hidden
draggable={false}
decoding="async"
className={`shrink-0 rounded-full object-cover ${className}`}
/>
);
}
function LanguageDropdown({
@@ -110,7 +121,7 @@ function LanguageDropdown({
aria-haspopup="listbox"
aria-expanded={open}
>
<Globe size={16} className="shrink-0 text-ark-gold/80" aria-hidden />
<FlagIcon code={lang} className="h-5 w-5" />
<span className="min-w-0 flex-1 truncate text-left">
{selected?.label ?? lang}
</span>
@@ -147,11 +158,7 @@ function LanguageDropdown({
: "text-neutral-200 hover:bg-white/10 hover:text-white"
}`}
>
<span className="flex h-4 w-4 shrink-0 items-center justify-center">
{active ? (
<Check className="h-4 w-4" strokeWidth={2.4} />
) : null}
</span>
<FlagIcon code={option.code} className="h-5 w-5" />
<span className="truncate font-medium">{option.label}</span>
</button>
);
@@ -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)}
<FlagIcon code={lang} className="h-7 w-7" />
</button>
{open ? (
@@ -238,11 +245,7 @@ function MobileLanguageButton({
: "text-neutral-200 hover:bg-white/10 hover:text-white"
}`}
>
<span className="flex h-4 w-4 shrink-0 items-center justify-center">
{active ? (
<Check className="h-4 w-4" strokeWidth={2.4} />
) : null}
</span>
<FlagIcon code={option.code} className="h-5 w-5" />
<span className="truncate font-medium">{option.label}</span>
</button>
);