97 lines
3.1 KiB
TypeScript
97 lines
3.1 KiB
TypeScript
import { motion } from 'motion/react';
|
|
import { footerSections } from '../utils/footerConstants';
|
|
|
|
interface FooterNavigationProps {
|
|
onHomeClick?: () => void;
|
|
onMelbourneClick?: () => void;
|
|
onPassesClick?: () => void;
|
|
onSignInClick?: () => void;
|
|
onAttractionsClick?: () => void;
|
|
onBlogsClick?: () => void;
|
|
onHowItWorksClick?: () => void;
|
|
onFAQClick?: () => void;
|
|
onPrivacyPolicyClick?: () => void;
|
|
onAboutUsClick?: () => void;
|
|
onContactUsClick?: () => void;
|
|
currentPage?: string;
|
|
}
|
|
|
|
export function FooterNavigation({
|
|
onHomeClick,
|
|
onMelbourneClick,
|
|
onPassesClick,
|
|
onSignInClick,
|
|
onAttractionsClick,
|
|
onBlogsClick,
|
|
onHowItWorksClick,
|
|
onFAQClick,
|
|
onPrivacyPolicyClick,
|
|
onAboutUsClick,
|
|
onContactUsClick,
|
|
currentPage
|
|
}: FooterNavigationProps) {
|
|
return (
|
|
<div className="lg:col-span-8 grid grid-cols-2 md:grid-cols-4 gap-8">
|
|
{Object.entries(footerSections).map(([key, section]) => (
|
|
<motion.div
|
|
key={key}
|
|
className="space-y-4"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{
|
|
duration: 0.5,
|
|
delay: Object.keys(footerSections).indexOf(key) * 0.1 + 0.1
|
|
}}
|
|
>
|
|
<h4 className="font-semibold text-white">{section.title}</h4>
|
|
<ul className="space-y-3">
|
|
{section.links.map((link, index) => {
|
|
const getClickHandler = () => {
|
|
switch (link) {
|
|
case 'Home': return onHomeClick;
|
|
case 'Melbourne': return onMelbourneClick;
|
|
case 'Passes': return onPassesClick;
|
|
case 'Sign In': return onSignInClick;
|
|
case 'Attractions': return onAttractionsClick;
|
|
case 'Blog': return onBlogsClick;
|
|
case 'How It Works': return onHowItWorksClick;
|
|
case 'FAQ': return onFAQClick;
|
|
case 'Privacy Policy': return onPrivacyPolicyClick;
|
|
case 'Contact Us': return onContactUsClick;
|
|
default: return undefined;
|
|
}
|
|
};
|
|
|
|
const clickHandler = getClickHandler();
|
|
|
|
return (
|
|
<li key={link}>
|
|
{clickHandler ? (
|
|
<motion.button
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
clickHandler();
|
|
}}
|
|
className="text-white/80 hover:text-white transition-colors duration-200 text-sm text-left"
|
|
whileHover={{ x: 4 }}
|
|
transition={{ duration: 0.2 }}
|
|
>
|
|
{link}
|
|
</motion.button>
|
|
) : (
|
|
<motion.span
|
|
className="text-white/80 cursor-default text-sm"
|
|
>
|
|
{link}
|
|
</motion.span>
|
|
)}
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
);
|
|
} |