74 lines
2.9 KiB
TypeScript
74 lines
2.9 KiB
TypeScript
import { getCachedGlobal } from '@/utilities/getGlobals'
|
|
import Link from 'next/link'
|
|
import React from 'react'
|
|
import type { Footer } from '@/payload-types'
|
|
import { CMSLink } from '@/components/Link'
|
|
import { Logo } from '@/components/Logo/Logo'
|
|
|
|
export async function Footer() {
|
|
const footerData = await getCachedGlobal("footer", 1)() as unknown as Footer
|
|
const columns = footerData?.columns || []
|
|
const navItems = footerData?.navItems || []
|
|
const hasColumns = columns.length > 0
|
|
|
|
const bottomLeft = (footerData?.bottomLeftText || '© {year} Fiber Direkt. Alla rättigheter förbehållna.').replace('{year}', new Date().getFullYear().toString())
|
|
const bottomRight = footerData?.bottomRightText || 'Svenskt datacenter · ISO 27001 · ISO 14001'
|
|
|
|
return (
|
|
<footer className="mt-auto bg-fd-navy text-white">
|
|
<div className="max-w-[1200px] mx-auto px-6 md:px-8 py-12 md:py-16 flex flex-col gap-10">
|
|
{/* Top section: Logo + columns or simple nav */}
|
|
<div className="flex flex-col lg:flex-row gap-10 lg:gap-16">
|
|
{/* Logo column */}
|
|
<div className="flex-shrink-0">
|
|
<Link className="flex items-center" href="/">
|
|
<Logo variant="white" className="max-w-[120px]" />
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Sitemap columns */}
|
|
{hasColumns ? (
|
|
<div className="flex-1 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8 md:gap-10">
|
|
{columns.map((column, colIndex) => (
|
|
<div key={colIndex} className="flex flex-col gap-4">
|
|
<span className="font-joey-bold text-fd-yellow text-base md:text-lg">
|
|
{column.heading}
|
|
</span>
|
|
<nav className="flex flex-col gap-2.5">
|
|
{column.links?.map(({ link }, linkIndex) => (
|
|
<CMSLink
|
|
className="font-joey text-white/70 hover:text-white text-sm md:text-base transition-colors no-underline"
|
|
key={linkIndex}
|
|
{...link}
|
|
/>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<nav className="flex flex-col md:flex-row md:items-center gap-4 md:ml-auto">
|
|
{navItems.map(({ link }, i) => (
|
|
<CMSLink
|
|
className="font-joey text-white hover:text-fd-yellow transition-colors no-underline"
|
|
key={i}
|
|
{...link}
|
|
/>
|
|
))}
|
|
</nav>
|
|
)}
|
|
</div>
|
|
|
|
{/* Divider */}
|
|
<hr className="border-white/20" />
|
|
|
|
{/* Bottom row */}
|
|
<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
|
|
<p className="font-joey text-white/60 text-sm">{bottomLeft}</p>
|
|
<p className="font-joey text-white/60 text-sm">{bottomRight}</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
)
|
|
}
|