107 lines
3.2 KiB
TypeScript
107 lines
3.2 KiB
TypeScript
|
|
// import { motion } from 'motion/react';
|
|
// import { useNavigate } from 'react-router-dom';
|
|
|
|
// interface SubNavbarProps {
|
|
// activePage?: 'citycards' | 'magic-itinerary' | 'postcards' | 'offers' | 'esims' | 'hotel-discounts';
|
|
// activeTab?: 'citycards' | 'magic-itinerary' | 'postcards' | 'offers' | 'esims' | 'hotel-discounts';
|
|
// }
|
|
|
|
// export function SubNavbar({
|
|
// activeTab,
|
|
// activePage,
|
|
// }: SubNavbarProps) {
|
|
// const navigate = useNavigate();
|
|
// const activeProduct = activePage || activeTab;
|
|
|
|
// const products = [
|
|
// {
|
|
// id: 'citycards',
|
|
// label: 'CityCards',
|
|
// path: '/citycards'
|
|
// },
|
|
// {
|
|
// id: 'magic-itinerary',
|
|
// label: 'Magic Itinerary',
|
|
// path: '/magic-itinerary'
|
|
// },
|
|
// {
|
|
// id: 'postcards',
|
|
// label: 'PostCards',
|
|
// path: '/postcards'
|
|
// },
|
|
// {
|
|
// id: 'offers',
|
|
// label: 'Offers',
|
|
// path: '/offers'
|
|
// },
|
|
// {
|
|
// id: 'esims',
|
|
// label: 'eSIMs',
|
|
// path: '/esims'
|
|
// },
|
|
// {
|
|
// id: 'hotel-discounts',
|
|
// label: 'Hotel Discounts',
|
|
// path: '/hotel-discounts'
|
|
// }
|
|
// ];
|
|
|
|
// const handleProductClick = (path: string) => {
|
|
// navigate(path);
|
|
// };
|
|
|
|
// return (
|
|
// <motion.div
|
|
// className="fixed w-full z-30 hidden lg:block"
|
|
// initial={{ y: -20, opacity: 0 }}
|
|
// animate={{ y: 0, opacity: 1 }}
|
|
// transition={{
|
|
// duration: 0.6,
|
|
// ease: [0.25, 0.1, 0.25, 1],
|
|
// delay: 0.4
|
|
// }}
|
|
// style={{ top: '80px' }}
|
|
// >
|
|
// <motion.div
|
|
// className="bg-white px-2 py-2 shadow-lg border border-gray-200"
|
|
// initial={{ scale: 0.9 }}
|
|
// animate={{
|
|
// scale: 1,
|
|
// y: 0,
|
|
// boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03)"
|
|
// }}
|
|
// transition={{ duration: 0.3, ease: [0.25, 0.1, 0.25, 1] }}
|
|
// >
|
|
// <div className="flex items-center gap-1 justify-center">
|
|
// {products.map((product) => (
|
|
// <motion.button
|
|
// key={product.id}
|
|
// onClick={() => handleProductClick(product.path)}
|
|
// className={`font-poppins font-medium text-base relative px-4 py-2.5 transition-all duration-300 whitespace-nowrap rounded-full ${activeProduct === product.id
|
|
// ? 'bg-primary text-white shadow-md'
|
|
// : 'text-gray-700 hover:text-white hover:bg-gray-800'
|
|
// }`}
|
|
// whileHover={{ scale: 1.02 }}
|
|
// whileTap={{ scale: 0.98 }}
|
|
// >
|
|
// {product.label}
|
|
|
|
// {/* Hover effect for non-active items */}
|
|
// {activeProduct !== product.id && (
|
|
// <motion.div
|
|
// className="absolute inset-0 bg-gray-800 rounded-full -z-10"
|
|
// initial={{ opacity: 0, scale: 0.9 }}
|
|
// whileHover={{ opacity: 1, scale: 1 }}
|
|
// transition={{ duration: 0.2 }}
|
|
// />
|
|
// )}
|
|
// </motion.button>
|
|
// ))}
|
|
// </div>
|
|
// </motion.div>
|
|
// </motion.div>
|
|
// );
|
|
// }
|
|
|
|
// export default SubNavbar;
|