77 lines
2.4 KiB
TypeScript
77 lines
2.4 KiB
TypeScript
import React from 'react';
|
|
import { FooterStyle } from './designs';
|
|
import { FooterDesigns } from './designs';
|
|
import Link from 'next/link';
|
|
import { humanize } from '../../helpers/humanize';
|
|
import { useRouter } from 'next/router';
|
|
import { useAppSelector } from '../../stores/hooks';
|
|
interface WebSiteFooterProps {
|
|
projectName: string;
|
|
pages: any;
|
|
}
|
|
export default function WebSiteFooter({
|
|
projectName,
|
|
pages,
|
|
}: WebSiteFooterProps) {
|
|
const currentYear = new Date().getFullYear();
|
|
const router = useRouter();
|
|
const borders = useAppSelector((state) => state.style.borders);
|
|
const websiteHeder = useAppSelector((state) => state.style.websiteHeder);
|
|
|
|
const style = FooterStyle.WITH_PAGES;
|
|
|
|
const design = FooterDesigns.DESIGN_DIVERSITY;
|
|
|
|
return (
|
|
<div
|
|
className={`${
|
|
design ? `bg-black` : 'bg-blue-700 bg-opacity-25'
|
|
} border-t ${borders}`}
|
|
>
|
|
<div className='container mx-auto'>
|
|
<div
|
|
className={`${
|
|
design ? 'text-white ' : ' text-black '
|
|
} flex flex-col text-center justify-between md:flex-row `}
|
|
>
|
|
<p className='py-6 text-sm'>
|
|
© {currentYear} Flatlogic. All rights reserved
|
|
</p>
|
|
{style ? (
|
|
<p className='py-6 font-bold'>{projectName}</p>
|
|
) : (
|
|
<div className='py-6 md:py-0 flex flex-col md:flex-row w-full md:w-auto space-y-4 md:space-y-0 items-center md:space-x-4'>
|
|
{pages.map((page, index) => {
|
|
const isRootRoute = router.pathname === '/';
|
|
const isActive = isRootRoute
|
|
? index === 0
|
|
: router.pathname.includes(page.href);
|
|
|
|
return (
|
|
<Link
|
|
key={index}
|
|
href={page.href}
|
|
className={`block text-sm text-center ${
|
|
isActive ? `border-b-2 ${borders}` : ''
|
|
}`}
|
|
>
|
|
{humanize(page.label)}
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
<div className='py-6'>
|
|
<Link href={'/terms-of-use'} className='mr-4 text-sm'>
|
|
Terms of Use
|
|
</Link>
|
|
<Link href={'/privacy-policy'} className=' text-sm'>
|
|
Privacy Policy
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|