67 lines
2.2 KiB
TypeScript
67 lines
2.2 KiB
TypeScript
import { Link } from "react-router-dom";
|
|
import { BrandMark, Button } from "../ui";
|
|
import { useI18n } from "../../i18n/I18nContext";
|
|
import { PublicLocaleSwitch } from "./PublicLocaleSwitch";
|
|
|
|
type Props = {
|
|
/** data-testid on outer shell */
|
|
testId: string;
|
|
/** Extra class on outer shell (e.g. hb-public--legal) */
|
|
className?: string;
|
|
/** Nav aria label key */
|
|
navLabelKey: string;
|
|
children: React.ReactNode;
|
|
};
|
|
|
|
/**
|
|
* Shared chrome for public legal / marketing pages (header + footer + locale).
|
|
*/
|
|
export function PublicLegalChrome({ testId, className = "", navLabelKey, children }: Props) {
|
|
const { t } = useI18n();
|
|
|
|
return (
|
|
<div className={`hb-public ${className}`.trim()} data-testid={testId}>
|
|
<header className="hb-public__header">
|
|
<Link to="/" className="hb-public__brand hb-public__brand-link">
|
|
<BrandMark size={36} title={t("login.brandTitle")} />
|
|
<div className="hb-public__brand-text">
|
|
<strong>{t("app.name")}</strong>
|
|
<span className="text-muted display-en">{t("app.nameEn")}</span>
|
|
</div>
|
|
</Link>
|
|
<nav className="hb-public__nav" aria-label={t(navLabelKey)}>
|
|
<PublicLocaleSwitch />
|
|
<Link to="/" className="hb-public__nav-link">
|
|
{t("privacy.backHome")}
|
|
</Link>
|
|
<Link to="/login" className="hb-public__nav-cta">
|
|
<Button type="button" variant="secondary">
|
|
{t("home.ctaLogin")}
|
|
</Button>
|
|
</Link>
|
|
</nav>
|
|
</header>
|
|
|
|
{children}
|
|
|
|
<footer className="hb-public__footer">
|
|
<nav className="hb-public__footer-links" aria-label={t("legal.footerNav")}>
|
|
<Link to="/" className="hb-public__text-link">
|
|
{t("privacy.backHome")}
|
|
</Link>
|
|
<Link to="/privacy" className="hb-public__text-link">
|
|
{t("home.privacyLink")}
|
|
</Link>
|
|
<Link to="/terms" className="hb-public__text-link">
|
|
{t("home.termsLink")}
|
|
</Link>
|
|
<Link to="/data-deletion" className="hb-public__text-link">
|
|
{t("home.dataDeletionLink")}
|
|
</Link>
|
|
</nav>
|
|
<span className="text-muted">{t("privacy.footerNote")}</span>
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|