Untitled
unknown
plain_text
a year ago
8.5 kB
4
Indexable
'use client'; import LeftSideDrawer from '@/components/Global/LeftSideDrawer'; import AuthModal from '@/components/Modal/AuthModal'; import { xoomBackendUrl } from '@/lib/axios/getAxios'; import { signOut, useSession } from 'next-auth/react'; import Image from 'next/image'; import Link from 'next/link'; import { usePathname } from 'next/navigation'; import { useEffect, useState } from 'react'; import toast from 'react-hot-toast'; import { FaCrown } from 'react-icons/fa'; export default function Header() { const pathname = usePathname(); // Get initial state from local storage or provide default values // const [siteSettings, ] = useState(initialSiteSettings); const [siteSettings, setSiteSettings] = useState({}); const { data: session } = useSession(); const handleLogout = async () => { await signOut({ redirect: false, callbackUrl: '/', }); toast.success('Signed out successfully!'); }; const isCurrentPath = (path) => pathname.includes(path); useEffect(() => { async function getSettings() { try { const { data } = await xoomBackendUrl.get( '/api/admin/administration-settings' ); if (data?.data !== null) { // Extract only the required properties const { site_logo, site_icon } = data.data; // Store data in local storage localStorage.setItem('siteSettings', JSON.stringify({ site_logo, site_icon })); const initialSiteSettings = JSON.parse(localStorage.getItem('siteSettings')) || {}; setSiteSettings(initialSiteSettings) // setLogoImage(data?.data?.site_logo); } } catch (error) { console.error('Error fetching general settings:', error); } } getSettings(); }, []); return ( <header> <div className="relative w-full mx-auto h-[75px] bg-primary hidden sm:block "> <div className="absolute -top-10 z-40 inset-0 bg-[url('/images/bgimage_2.png')] transform -skew-y-[0.5deg] origin-bottom-right bg-cover bg-center bg-no-repeat "></div> <div className="relative z-50 max-w-screen-xl p-4 mx-auto top-0 "> <div className="flex items-center justify-between"> <Link href="/" className="flex items-center text-xl font-semibold text-white uppercase max-h-16" > {/* <span className="text-secondary">x</span> <BiFootball className="animate-bounce" /> bg-[#0F8A19] <BiFootball className="text-secondary animate-bounce [animation-delay:-0.3s]" /> mSp <BiFootball className="animate-spin" /> rts */} <Image src="/images/Logo_l.png" // alt="Logo" width={210} // Desired width height={70} // Desired height /> {/* {siteSettings.site_logo ? ( <Image src={siteSettings.site_logo} alt="Site Logo" width={200} height={160} /> ) : ( // Default image when site_logo is not available <Image src="/images/Logo_l.png" alt="Default Logo" width={200} height={160} /> )} */} </Link> <ul className="flex items-center gap-2 lg:gap-5 text-md lg:text-lg text-white uppercase md:gap-3"> <Link className={` ${pathname === '/' || isCurrentPath('/match') ? "text-warning after:content-['_-'] after:absolute relative after:top-4 after:text-warning after:left-11" : 'text-white hover:text-warning' }`} href="/" > matches </Link> <Link className={` ${isCurrentPath('/favorites') ? "text-warning after:content-['_-'] after:absolute relative after:top-4 after:text-warning after:left-12" : 'text-white hover:text-warning' }`} href="/favorites" > favorites </Link> <Link className={` ${isCurrentPath('/watch') ? "text-warning after:content-['_-'] after:absolute relative after:top-4 after:text-warning after:left-8" : 'text-white hover:text-warning' }`} href="/watch" > watch </Link> <Link className={` ${isCurrentPath('/news') ? "text-warning after:content-['_-'] after:absolute relative after:top-4 after:text-warning after:left-6" : 'text-white hover:text-warning' }`} href="/news" > news </Link> <Link className={`flex items-center ${isCurrentPath('/subscription') ? "text-warning after:content-['_-'] after:absolute relative after:top-4 after:text-warning after:left-14" : 'text-white hover:text-warning' }`} href="/subscription" > <FaCrown className="mr-1 text-xl text-yellow-400" /> premium </Link> {/* <label onClick={() => window.subscriptionModal.showModal()} className="flex items-center text-white cursor-pointer hover:text-warning" style={{ textDecoration: 'none' }} > <FaCrown className="mr-1 text-xl text-yellow-400" /> premium </label> */} {session ? ( <> <div className="dropdown dropdown-end"> <div tabIndex={0} role="button" className="btn btn-ghost btn-circle btn-sm avatar ring-2 ring-white" > <div className="w-10 rounded-full"> {session?.user?.image ? ( <Image src={session?.user?.image} alt="User Profile" height={40} width={40} /> ) : ( <Image src="/images/default_profile.png" alt="User Profile" height={40} width={40} /> )} </div> </div> <ul tabIndex={0} className="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow-md bg-primary rounded-md border border-gray-200 w-52" > <div className="flex items-center gap-2 px-2 py-1 font-medium"> <span className="text-white hover:text-secondary"> {session?.user?.name} </span>{' '} <span className="badge badge-outline">Free</span> </div> <li className="px-2 py-1 font-medium text-white hover:text-secondary "> Settings </li> <li className="w-full mx-auto mt-3 rounded-md btn btn-sm btn-error" onClick={handleLogout} > Logout </li> </ul> </div> </> ) : ( <label onClick={() => window.authModal.showModal()} className="text-white cursor-pointer hover:text-warning" > sign in </label> )} </ul> </div> </div> </div> <div className="block sm:hidden"> <LeftSideDrawer session={session} handleLogout={handleLogout} /> </div> {/* Modals */} <AuthModal /> {/* <SubscriptionModal /> */} </header> ); }
Editor is loading...
Leave a Comment