76 lines
3.0 KiB
TypeScript
76 lines
3.0 KiB
TypeScript
import { useTranslations } from 'next-intl';
|
|
import { PageLink } from '#web-runtime/components/links';
|
|
import { SiteSettings } from '#web-runtime/types';
|
|
import { Link } from '#i18n/navigation';
|
|
|
|
export default function SiteFooter({ settings }: { settings: SiteSettings }) {
|
|
const t = useTranslations('Components.Footer');
|
|
|
|
const hasLegalLinks = Boolean(settings.legal.privacyPath || settings.legal.termsPath);
|
|
|
|
return (
|
|
<footer className="bg-[#172019] pt-[clamp(4rem,8vw,7rem)] pb-8 text-[#f6f5ef]">
|
|
<div className="mx-auto w-[min(calc(100%-2rem),76rem)] max-[45rem]:w-[min(calc(100%-1.25rem),76rem)]">
|
|
<div className="grid grid-cols-[minmax(15rem,0.75fr)_minmax(0,1.25fr)] gap-[clamp(3rem,8vw,8rem)] max-lg:grid-cols-1">
|
|
<div>
|
|
<Link
|
|
className="inline-block text-[1.45rem] font-extrabold tracking-[-0.06em] focus-visible:outline-3 focus-visible:outline-offset-4 focus-visible:outline-[#99d900]"
|
|
href="/"
|
|
>
|
|
CRUX
|
|
<span className="text-[#99d900]" aria-hidden="true">
|
|
.
|
|
</span>
|
|
</Link>
|
|
</div>
|
|
|
|
{settings.footer.menus.length > 0 ? (
|
|
<nav
|
|
className="grid grid-cols-3 gap-8 max-[45rem]:grid-cols-2"
|
|
aria-label={t('navigation')}
|
|
>
|
|
{settings.footer.menus.map((menu, menuIndex) => (
|
|
<div
|
|
className="flex flex-col items-start gap-1.5"
|
|
key={`${menu.title}-${menuIndex}`}
|
|
>
|
|
{menu.title ? (
|
|
<h2 className="mb-3 font-mono text-[0.7rem] font-semibold tracking-widest text-[#aab4aa] uppercase">
|
|
{menu.title}
|
|
</h2>
|
|
) : null}
|
|
{menu.items.map((item, itemIndex) => (
|
|
<PageLink
|
|
key={`${item.label}-${itemIndex}`}
|
|
link={item}
|
|
className="text-sm font-medium text-[#f6f5ef] hover:text-[#c7ff3f]"
|
|
/>
|
|
))}
|
|
</div>
|
|
))}
|
|
</nav>
|
|
) : null}
|
|
</div>
|
|
|
|
<div className="mt-[clamp(4rem,8vw,7rem)] flex items-center justify-between gap-8 border-t border-white/15 pt-6 text-[0.78rem] text-[#aab4aa] max-[45rem]:flex-col max-[45rem]:items-start">
|
|
{settings.footer.copyright ? <p>{settings.footer.copyright}</p> : <span />}
|
|
{hasLegalLinks ? (
|
|
<nav className="flex gap-5" aria-label={t('legal')}>
|
|
{settings.legal.privacyPath ? (
|
|
<a className="hover:text-white" href={settings.legal.privacyPath}>
|
|
{t('privacy')}
|
|
</a>
|
|
) : null}
|
|
{settings.legal.termsPath ? (
|
|
<a className="hover:text-white" href={settings.legal.termsPath}>
|
|
{t('terms')}
|
|
</a>
|
|
) : null}
|
|
</nav>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|