popiart-server
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

76 lines
2.3 KiB

import Link from "next/link";
import type { AppDictionary, Locale } from "@/lib/site-content";
function localize(locale: Locale, path: string) {
if (!path || path === "/") {
return `/${locale}`;
}
return `/${locale}${path}`;
}
export function SiteChrome({
children,
dictionary,
locale,
}: {
children: React.ReactNode;
dictionary: AppDictionary;
locale: Locale;
}) {
return (
<div className="site-shell">
<header className="site-header">
<div className="brand-lockup">
<Link className="brand-mark" href={localize(locale, "/")}>
PA
</Link>
<div>
<strong>{dictionary.brand.name}</strong>
<span>{dictionary.brand.subtitle}</span>
</div>
</div>
<nav className="main-nav">
<Link href={localize(locale, "/")}>{dictionary.nav.home}</Link>
<Link href={localize(locale, "/docs")}>{dictionary.nav.docs}</Link>
<Link href={localize(locale, "/console")}>{dictionary.nav.console}</Link>
<Link href={localize(locale, "/pricing")}>{dictionary.nav.pricing}</Link>
</nav>
<div className="header-actions">
<div className="locale-switch">
<Link
className={locale === "zh" ? "locale-active" : ""}
href={localize("zh", "/")}
>
</Link>
<Link
className={locale === "en" ? "locale-active" : ""}
href={localize("en", "/")}
>
EN
</Link>
</div>
<Link className="button button-light button-small" href={localize(locale, "/login")}>
{dictionary.nav.login}
</Link>
</div>
</header>
<main className="main-content">{children}</main>
<footer className="site-footer">
<div>
<strong>{dictionary.brand.name}</strong>
<p>{dictionary.footer.copy}</p>
</div>
<div className="footer-links">
<Link href={localize(locale, "/docs")}>{dictionary.nav.docs}</Link>
<Link href={localize(locale, "/pricing")}>{dictionary.nav.pricing}</Link>
<Link href={localize(locale, "/console")}>{dictionary.nav.console}</Link>
</div>
</footer>
</div>
);
}