87 lines
2.7 KiB
TypeScript
87 lines
2.7 KiB
TypeScript
import Link from 'next/link'
|
|
import Image from 'next/image'
|
|
|
|
import { ToggleThemeButton } from '@/components/toggle-theme-button'
|
|
|
|
import {
|
|
FOLLOW_US_LINKS,
|
|
INTERNAL_LINKS,
|
|
EXTERNAL_LINKS,
|
|
OTHER_LINKS,
|
|
} from '@/constants/footer-links'
|
|
|
|
interface linksProps {
|
|
title: string
|
|
links: Array<{ href: string; label: string }>
|
|
}
|
|
|
|
const Links = ({ title, links }: linksProps) => (
|
|
<div className="basis-[100%] md:basis-[calc(33%-8px)] lg:basis-[calc(25%-8px)] xl:basis-[calc(20%-8px)]">
|
|
<h3 className="pb-6 text-base font-semibold text-black">{title}</h3>
|
|
<ul className="flex flex-col gap-1">
|
|
{links.map(({ href, label }, i) => (
|
|
<li key={i}>
|
|
<Link
|
|
href={href}
|
|
className="block py-2 leading-6 text-neutral-600 hover:text-black"
|
|
>
|
|
{label}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)
|
|
|
|
export const Footer = () => (
|
|
<footer className="w-full bg-[#f1f3f4]">
|
|
<div className="w-full max-w-[1400px] mx-auto px-4 md:px-8">
|
|
<div className="flex items-center gap-8 py-8">
|
|
<h4 className="text-black text-base sm:text-lg font-semibold">
|
|
Follow Us
|
|
</h4>
|
|
<div className="flex items-center gap-8">
|
|
{FOLLOW_US_LINKS.map(({ href, alt, src }, i) => (
|
|
<Link key={i} href={href}>
|
|
<Image alt={alt} src={src} width={24} height={24} />
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap items-start gap-2 gap-y-8 py-10 border-t border-neutral-200">
|
|
<Links title="Internal Links" links={INTERNAL_LINKS} />
|
|
<Links title="External Links" links={EXTERNAL_LINKS} />
|
|
<Links title="Internal Links" links={INTERNAL_LINKS} />
|
|
<Links title="External Links" links={EXTERNAL_LINKS} />
|
|
<Links title="Internal Links" links={INTERNAL_LINKS} />
|
|
</div>
|
|
|
|
<div className="flex flex-wrap items-center gap-6 pt-6 pb-10 border-t md:pb-12 md:pt-8 md:gap-8 border-t-clr-border">
|
|
<div className="flex items-center justify-between grow">
|
|
<Link href="/">
|
|
<Image alt="logo" src="/logo.svg" width={120} height={34} />
|
|
</Link>
|
|
|
|
<ToggleThemeButton className="md:hidden" />
|
|
</div>
|
|
|
|
<ul className="flex flex-wrap items-center gap-8 gap-y-2">
|
|
{OTHER_LINKS.map(({ href, label }, i) => (
|
|
<li key={i}>
|
|
<Link
|
|
href={href}
|
|
className="text-sm text-neutral-600 hover:text-black hover:underline whitespace-nowrap"
|
|
>
|
|
{label}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
<ToggleThemeButton className="hidden ml-auto md:flex" />
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
)
|