Initial frontend import
This commit is contained in:
TerryM
388
src/layouts/PublicLayout.tsx
Normal file
388
src/layouts/PublicLayout.tsx
Normal file
@@ -0,0 +1,388 @@
|
||||
import { Globe, Menu, Search as SearchIcon, X } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { Link, Outlet, useLocation, useNavigate } from "react-router-dom";
|
||||
import { ArkLogoMark } from "../components/ArkLogoMark";
|
||||
import { useI18n, type Lang } from "../i18n";
|
||||
import { adminUiPrefix } from "../adminPaths";
|
||||
|
||||
type PublicNavWhich =
|
||||
| "home"
|
||||
| "browseAll"
|
||||
| "categories"
|
||||
| "browseLatest"
|
||||
| "browseRecommended"
|
||||
| "browsePopular"
|
||||
| "favorites"
|
||||
| "wallet"
|
||||
| "about";
|
||||
|
||||
function navIsActive(
|
||||
pathname: string,
|
||||
search: string,
|
||||
hash: string,
|
||||
which: PublicNavWhich,
|
||||
): boolean {
|
||||
const sp = new URLSearchParams(search);
|
||||
switch (which) {
|
||||
case "home":
|
||||
return pathname === "/";
|
||||
case "browseAll":
|
||||
return pathname === "/browse" && !sp.has("sort");
|
||||
case "categories":
|
||||
return pathname === "/" && hash === "#categories";
|
||||
case "browseLatest":
|
||||
return pathname === "/browse" && sp.get("sort") === "latest";
|
||||
case "browseRecommended":
|
||||
return pathname === "/browse" && sp.get("sort") === "recommended";
|
||||
case "browsePopular":
|
||||
return pathname === "/browse" && sp.get("sort") === "popular";
|
||||
case "favorites":
|
||||
return pathname === "/favorites";
|
||||
case "wallet":
|
||||
return pathname === "/wallet";
|
||||
case "about":
|
||||
return pathname === "/about";
|
||||
default:
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function navClassName(active: boolean) {
|
||||
return [
|
||||
"shrink-0 rounded-sm px-2 py-2 text-[13px] font-medium leading-none whitespace-nowrap no-underline outline-none transition-colors",
|
||||
"focus-visible:ring-2 focus-visible:ring-ark-gold/90 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg",
|
||||
active
|
||||
? "text-ark-gold visited:text-ark-gold"
|
||||
: "text-[#d7d7dc] visited:text-[#d7d7dc] hover:text-ark-gold",
|
||||
].join(" ");
|
||||
}
|
||||
|
||||
export function PublicLayout() {
|
||||
const { t, lang, setLang } = useI18n();
|
||||
const { pathname, search, hash } = useLocation();
|
||||
const [open, setOpen] = useState(false);
|
||||
const [q, setQ] = useState("");
|
||||
const nav = useNavigate();
|
||||
|
||||
const na = (which: PublicNavWhich) =>
|
||||
navIsActive(pathname, search, hash, which);
|
||||
|
||||
const goSearch = () => {
|
||||
const s = q.trim();
|
||||
if (!s) return;
|
||||
nav(`/search?q=${encodeURIComponent(s)}`);
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-full flex flex-col pb-20 md:pb-0">
|
||||
<header className="sticky top-0 z-40 border-b border-ark-line bg-ark-nav/98 backdrop-blur-md">
|
||||
<div className="mx-auto max-w-[1280px] px-4 py-[15px] md:px-8 xl:px-0">
|
||||
{/* Single row (md+): logo | scrollable nav (左對齊，可橫向滑動) | 搜尋 + 語言 */}
|
||||
<div className="flex h-10 items-center gap-2 lg:gap-4">
|
||||
<Link
|
||||
to="/"
|
||||
className="flex min-w-0 shrink-0 items-center gap-2.5 rounded-sm text-xl font-bold tracking-wide text-ark-gold outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
|
||||
>
|
||||
<ArkLogoMark className="h-10 w-10 shrink-0" />
|
||||
<span className="max-w-[9rem] truncate text-ark-gold sm:inline md:max-w-[10rem] lg:max-w-none">
|
||||
{t("brand")}
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
<nav
|
||||
className="header-nav-scroll hidden min-w-0 flex-1 items-center justify-center gap-4 overflow-x-auto overflow-y-hidden py-1 md:flex lg:gap-5"
|
||||
aria-label={t("mainNav")}
|
||||
>
|
||||
<Link
|
||||
to="/"
|
||||
className={navClassName(na("home"))}
|
||||
aria-current={na("home") ? "page" : undefined}
|
||||
>
|
||||
{t("home")}
|
||||
</Link>
|
||||
<Link
|
||||
to="/browse"
|
||||
className={navClassName(na("browseAll"))}
|
||||
aria-current={na("browseAll") ? "page" : undefined}
|
||||
>
|
||||
{t("all")}
|
||||
</Link>
|
||||
<Link
|
||||
to="/#categories"
|
||||
className={navClassName(na("categories"))}
|
||||
aria-current={na("categories") ? "page" : undefined}
|
||||
>
|
||||
{t("categories")}
|
||||
</Link>
|
||||
<Link
|
||||
to="/browse?sort=latest"
|
||||
className={navClassName(na("browseLatest"))}
|
||||
aria-current={na("browseLatest") ? "page" : undefined}
|
||||
>
|
||||
{t("latest")}
|
||||
</Link>
|
||||
<Link
|
||||
to="/browse?sort=recommended"
|
||||
className={navClassName(na("browseRecommended"))}
|
||||
aria-current={na("browseRecommended") ? "page" : undefined}
|
||||
>
|
||||
{t("official")}
|
||||
</Link>
|
||||
<Link
|
||||
to="/browse?sort=popular"
|
||||
className={navClassName(na("browsePopular"))}
|
||||
aria-current={na("browsePopular") ? "page" : undefined}
|
||||
>
|
||||
{t("popular")}
|
||||
</Link>
|
||||
<Link
|
||||
to="/favorites"
|
||||
className={navClassName(na("favorites"))}
|
||||
aria-current={na("favorites") ? "page" : undefined}
|
||||
>
|
||||
{t("favorites")}
|
||||
</Link>
|
||||
<Link
|
||||
to="/wallet"
|
||||
className={navClassName(na("wallet"))}
|
||||
aria-current={na("wallet") ? "page" : undefined}
|
||||
>
|
||||
{t("wallet")}
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
<div className="flex shrink-0 items-center justify-end gap-2">
|
||||
<div className="hidden h-10 items-center gap-2 rounded-full border border-ark-line bg-[#1a1b20] py-2 pl-3 pr-3 shadow-inner md:flex lg:pr-4">
|
||||
<SearchIcon size={16} className="shrink-0 text-[#c6c7cf]" />
|
||||
<input
|
||||
value={q}
|
||||
onChange={(e) => setQ(e.target.value)}
|
||||
onKeyDown={(e) => e.key === "Enter" && goSearch()}
|
||||
placeholder={t("searchPlaceholder")}
|
||||
className="w-24 rounded-md bg-transparent text-sm text-neutral-200 outline-none placeholder:text-[#777985] focus-visible:ring-2 focus-visible:ring-ark-gold/60 focus-visible:ring-offset-2 focus-visible:ring-offset-[#1a1b20] md:w-28 lg:w-44 xl:w-52"
|
||||
/>
|
||||
</div>
|
||||
<div className="hidden h-10 items-center gap-2 rounded-full border border-ark-line bg-[#1a1b20] px-2 py-2 md:flex lg:px-3">
|
||||
<Globe
|
||||
size={16}
|
||||
className="shrink-0 text-ark-gold/80"
|
||||
aria-hidden
|
||||
/>
|
||||
<select
|
||||
className="max-w-[6.5rem] cursor-pointer truncate rounded-md bg-transparent text-sm text-neutral-200 outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/60 focus-visible:ring-offset-2 focus-visible:ring-offset-[#1a1b20] lg:max-w-none"
|
||||
value={lang}
|
||||
onChange={(e) => setLang(e.target.value as Lang)}
|
||||
aria-label={t("langLabel")}
|
||||
>
|
||||
<option value="zh-TW">繁體中文</option>
|
||||
<option value="zh-CN">简体中文</option>
|
||||
<option value="en">English</option>
|
||||
</select>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="md:hidden inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-ark-line bg-[#1a1b20] text-neutral-200 outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
aria-label="menu"
|
||||
>
|
||||
{open ? <X size={18} /> : <Menu size={18} />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{open ? (
|
||||
<div className="md:hidden border-t border-ark-line bg-ark-nav px-4 py-3 grid gap-2">
|
||||
<div className="mb-1 flex items-center gap-2 rounded-full border border-ark-line bg-[#1a1b20] px-3 py-2">
|
||||
<SearchIcon size={16} className="shrink-0 text-[#c6c7cf]" />
|
||||
<input
|
||||
value={q}
|
||||
onChange={(e) => setQ(e.target.value)}
|
||||
onKeyDown={(e) => e.key === "Enter" && goSearch()}
|
||||
placeholder={t("searchPlaceholder")}
|
||||
className="flex-1 bg-transparent text-sm outline-none placeholder:text-[#777985]"
|
||||
/>
|
||||
</div>
|
||||
<Link
|
||||
to="/"
|
||||
className={navClassName(na("home"))}
|
||||
aria-current={na("home") ? "page" : undefined}
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
{t("home")}
|
||||
</Link>
|
||||
<Link
|
||||
to="/browse"
|
||||
className={navClassName(na("browseAll"))}
|
||||
aria-current={na("browseAll") ? "page" : undefined}
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
{t("all")}
|
||||
</Link>
|
||||
<Link
|
||||
to="/#categories"
|
||||
className={navClassName(na("categories"))}
|
||||
aria-current={na("categories") ? "page" : undefined}
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
{t("categories")}
|
||||
</Link>
|
||||
<Link
|
||||
to="/favorites"
|
||||
className={navClassName(na("favorites"))}
|
||||
aria-current={na("favorites") ? "page" : undefined}
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
{t("favorites")}
|
||||
</Link>
|
||||
<Link
|
||||
to="/browse?sort=latest"
|
||||
className={navClassName(na("browseLatest"))}
|
||||
aria-current={na("browseLatest") ? "page" : undefined}
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
{t("latest")}
|
||||
</Link>
|
||||
<Link
|
||||
to="/browse?sort=recommended"
|
||||
className={navClassName(na("browseRecommended"))}
|
||||
aria-current={na("browseRecommended") ? "page" : undefined}
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
{t("official")}
|
||||
</Link>
|
||||
<Link
|
||||
to="/browse?sort=popular"
|
||||
className={navClassName(na("browsePopular"))}
|
||||
aria-current={na("browsePopular") ? "page" : undefined}
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
{t("popular")}
|
||||
</Link>
|
||||
<Link
|
||||
to="/wallet"
|
||||
className={navClassName(na("wallet"))}
|
||||
aria-current={na("wallet") ? "page" : undefined}
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
{t("wallet")}
|
||||
</Link>
|
||||
<Link
|
||||
to="/about"
|
||||
className={navClassName(na("about"))}
|
||||
aria-current={na("about") ? "page" : undefined}
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
{t("footerAbout")}
|
||||
</Link>
|
||||
</div>
|
||||
) : null}
|
||||
</header>
|
||||
|
||||
<main className="mx-auto w-full max-w-[1280px] flex-1 px-4 py-6 md:px-8 md:py-10 xl:px-0">
|
||||
<Outlet />
|
||||
</main>
|
||||
|
||||
<footer className="mt-auto border-t border-ark-line bg-ark-nav/90 mb-20 md:mb-0">
|
||||
<div className="mx-auto flex max-w-[1280px] flex-wrap gap-x-6 gap-y-2 px-4 py-6 text-sm text-neutral-400 md:px-8 xl:px-0">
|
||||
<Link
|
||||
to="/about"
|
||||
className="rounded-sm outline-none hover:text-ark-gold2 focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
|
||||
>
|
||||
{t("footerAbout")}
|
||||
</Link>
|
||||
<Link
|
||||
to="/wallet"
|
||||
className="rounded-sm outline-none hover:text-ark-gold2 focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
|
||||
>
|
||||
{t("profile")}
|
||||
</Link>
|
||||
{import.meta.env.VITE_DISABLE_ADMIN !== "true" ? (
|
||||
<Link
|
||||
to={`${adminUiPrefix}/login`}
|
||||
className="rounded-sm outline-none hover:text-ark-gold2 focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
|
||||
>
|
||||
{t("footerAdminLogin")}
|
||||
</Link>
|
||||
) : null}
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<nav className="md:hidden fixed bottom-0 inset-x-0 z-40 border-t border-ark-line bg-ark-nav/95 backdrop-blur">
|
||||
<div className="grid grid-cols-4 gap-1 px-1 py-2 text-center text-[11px]">
|
||||
<BottomNavIcon
|
||||
to="/"
|
||||
label={t("home")}
|
||||
icon="home"
|
||||
active={pathname === "/"}
|
||||
/>
|
||||
<BottomNavIcon
|
||||
to="/browse"
|
||||
label={t("all")}
|
||||
icon="document"
|
||||
active={
|
||||
pathname === "/browse" && !new URLSearchParams(search).get("sort")
|
||||
}
|
||||
/>
|
||||
<BottomNavIcon
|
||||
to="/favorites"
|
||||
label={t("favorites")}
|
||||
icon="heart"
|
||||
active={pathname === "/favorites"}
|
||||
/>
|
||||
<BottomNavIcon
|
||||
to="/browse?sort=latest"
|
||||
label={t("latest")}
|
||||
icon="update"
|
||||
active={
|
||||
pathname === "/browse" &&
|
||||
new URLSearchParams(search).get("sort") === "latest"
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const NAVBAR_ICON_BASE = "/assets/ark-library/navbar";
|
||||
|
||||
function BottomNavIcon({
|
||||
to,
|
||||
label,
|
||||
icon,
|
||||
active,
|
||||
}: {
|
||||
to: string;
|
||||
label: string;
|
||||
icon: "home" | "document" | "heart" | "update";
|
||||
active: boolean;
|
||||
}) {
|
||||
const src = active
|
||||
? `${NAVBAR_ICON_BASE}/${icon}-active.svg`
|
||||
: `${NAVBAR_ICON_BASE}/${icon}-inactive.svg`;
|
||||
return (
|
||||
<Link
|
||||
to={to}
|
||||
className={[
|
||||
"flex flex-col items-center gap-1 rounded-lg py-1 outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg",
|
||||
active ? "text-ark-gold" : "text-neutral-400",
|
||||
].join(" ")}
|
||||
>
|
||||
<img
|
||||
src={src}
|
||||
alt=""
|
||||
className={[
|
||||
"mx-auto h-7 w-7 object-contain",
|
||||
active ? "opacity-100" : "opacity-55",
|
||||
].join(" ")}
|
||||
width={28}
|
||||
height={28}
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
<span className="leading-tight">{label}</span>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user