Untitled
unknown
plain_text
a year ago
9.5 kB
4
Indexable
import moment from 'moment'; import Image from 'next/image'; import Link from 'next/link'; import { usePathname } from 'next/navigation'; import { FaCrown } from 'react-icons/fa'; import { IoStarSharp } from "react-icons/io5"; import { PiVideoLight } from 'react-icons/pi'; import { TbSoccerField } from "react-icons/tb"; import { FaApple, FaFacebookF, FaGooglePlay, FaInstagram, FaTwitter, FaYoutube, } from 'react-icons/fa'; import { FaRegCopyright, FaRegNewspaper } from 'react-icons/fa6'; export default function Footer2() { const updateYear = moment().format('YYYY [escaped] YYYY').split(' '); const pathname = usePathname(); const isCurrentPath = (path) => pathname.includes(path); return ( <div className="mt-16"> <div className="web_menu_bar bg-gray-100 relative mt-12 pb-5"> <div className="bg-gray-100 -mt-4 -skew-y-[0.5deg] "> <div className="mx-auto w-full max-w-screen-xl py-5 skew-y-[0.5deg]"> <div className="flex flex-wrap justify-between "> <div className="p-0"> <Image src="/images/logo.png" alt="logo" width={0} height={0} className="w-36 h-16 p-[7px]" sizes="100vw" /> <h2 className="my-2 font-bold ms-2"> XOOMSPORTS is The best Football App </h2> </div> <div className="font-semibold"> <p> <Link href="/">Matches</Link> </p> <p className="py-1"> <Link href="/favorites">Favorites</Link> </p> <p className="py-1"> <Link href="/watch">Live</Link> </p> <p className="py-1"> <Link href="/news">News</Link> </p> <p className="py-1"> <Link href="/watch">Highlights</Link> </p> </div> <div className="font-semibold"> <p> {' '} <a href="">Terms of Use</a> </p> <p className="py-1"> {' '} <a href="">Privacy Policy</a> </p> <p className="py-1"> {' '} <a href="">Contact</a> </p> </div> <div className="font-bold px-2"> <div className="py-4"> <h2>Follow Us On</h2> <div className="flex gap-2"> {/* <FaFacebookF /> <TiSocialTwitter /> */} <div className="w-10 h-10 rounded-full bg-gray-200 flex justify-center items-center"> <FaFacebookF className="text-blue-500 text-xl" /> </div> <div className="w-10 h-10 rounded-full bg-gray-200 flex justify-center items-center"> <FaTwitter className="text-blue-400 text-xl" /> </div> <div className="w-10 h-10 rounded-full bg-gray-200 flex justify-center items-center"> <FaYoutube className="text-red-600 text-xl" /> </div> <div className="w-10 h-10 rounded-full bg-gray-200 flex justify-center items-center"> <FaInstagram className="text-rose-500 text-xl" /> </div> </div> </div> <div> <h2>Get The App</h2> <div className="flex gap-2"> {/* <FaFacebookF /> <TiSocialTwitter /> */} <div className="w-10 h-10 rounded-full bg-gray-200 flex justify-center items-center"> <FaApple className="text-black text-xl" /> </div> <div className="w-10 h-10 rounded-full bg-gray-200 flex justify-center items-center"> <FaGooglePlay className="text-gray-700 text-xl" /> </div> </div> </div> </div> </div> <hr className="my-3 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-4" /> {/* copyright section */} <div className="flex justify-center"> <span className="text-sm text-gray-500 sm:text-center dark:text-gray-400"> <span className=""> <FaRegCopyright className="font-bold text-black inline-block" /> </span>{' '} Copyright {updateYear[2]}{' '} <a href="http://localhost:3000/" className="hover:underline font-bold text-black" > XOOMSPORTS™ </a> . All Rights Reserved. </span> </div> </div> </div> </div> <div className="mobile_menu_bar bg-black w-full h-20 mt-16 pb-5 fixed -bottom-2 left-0 -skew-y-[1deg]"> <div className="flex flex-wrap justify-around p-4 skew-y-[1deg]"> <div className="flex flex-col justify-center"> <Link className={` ${pathname === '/' || isCurrentPath('/match') ? "text-green-400 after:content-[''] after:absolute relative after:top-4 after:text-white after:left-11" : 'text-white ' }`} href="/" > <div className="flex justify-center"> {pathname === '/' ? ( <div> <TbSoccerField className="text-green-400 text-2xl font-extrabold" /> </div> ) : ( <div> <TbSoccerField className="text-2xl font-extrabold" /> </div> )} </div> <div className="font-xs"> <small className="text-center uppercase">matches</small> </div> </Link> </div> <div className="flex flex-col justify-center"> <Link className={` ${pathname === '/favorites' ? "text-green-400 after:content-[''] after:absolute relative after:top-4 after:text-white after:left-11" : 'text-white' }`} href="/favorites" > <div className="flex justify-center"> {pathname === '/favorites' ? ( <div> <IoStarSharp className="text-green-400 text-2xl font-extrabold" /> </div> ) : ( <div> <IoStarSharp className="text-2xl font-extrabold" /> </div> )} </div> <div className="font-xs"> <small className="text-center uppercase">Favorites</small> </div> </Link> </div> <div className="flex flex-col justify-center"> <Link className={` ${pathname === '/watch' ? "text-green-400 after:content-[''] after:absolute relative after:top-4 after:text-white after:left-11" : 'text-white' }`} href="/watch" > <div className="flex justify-center"> {pathname === '/watch' ? ( <div> <PiVideoLight className="text-green-400 text-2xl font-extrabold" /> </div> ) : ( <div> <PiVideoLight className="text-2xl font-extrabold" /> </div> )} </div> <div className="font-xs"> <small className="text-center uppercase">Watch</small> </div> </Link> </div> <div className="flex flex-col justify-center"> <Link className={` ${pathname === '/news' ? "text-green-400 after:content-[''] after:absolute relative after:top-4 after:text-white after:left-11" : 'text-white' }`} href="/news" > <div className="flex justify-center"> {pathname === '/news' ? ( <div> <FaRegNewspaper className="text-green-400 text-2xl" /> </div> ) : ( <div> <FaRegNewspaper className=" text-2xl" /> </div> )} </div> <div className="font-xs"> <small className="text-center uppercase">News</small> </div> </Link> </div> <div className="flex flex-col justify-center"> <Link className="text-white" href="#"> <div className="flex justify-center"> <div> <FaCrown className="text-yellow-400 text-2xl" /> </div> </div> <div className="font-xs"> <small className="text-center uppercase">Premium</small> </div> </Link> </div> </div> </div> </div> ); }
Editor is loading...
Leave a Comment