81 lines
2.4 KiB
TypeScript
81 lines
2.4 KiB
TypeScript
'use client';
|
|
import Image from 'next/image';
|
|
import { TVToggle, useTVMode } from '@/components/context/TVMode';
|
|
import { ThemeToggle } from '@/components/context/Theme';
|
|
import AvatarDropdown from '@/components/auth/AvatarDropdown';
|
|
import { useAuth } from '@/components/context/Auth'
|
|
|
|
const Header = () => {
|
|
const { tvMode } = useTVMode();
|
|
const { session, user, loading } = useAuth();
|
|
|
|
if (tvMode) {
|
|
return (
|
|
<div className='w-full flex flex-row items-end justify-end'>
|
|
<div
|
|
className='flex flex-row my-auto items-center
|
|
justify-center pt-2 pr-0 sm:pt-4 sm:pr-8'
|
|
>
|
|
<ThemeToggle />
|
|
{session && !loading && (
|
|
<div
|
|
className='flex flex-row my-auto items-center
|
|
justify-center'
|
|
>
|
|
<div className='mb-0.5 ml-4'>
|
|
<TVToggle width={22} height={22} />
|
|
</div>
|
|
<AvatarDropdown />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
} else {
|
|
return (
|
|
<header className='w-full min-h-[10vh]'>
|
|
<div className='w-full flex flex-row items-end justify-end'>
|
|
<div
|
|
className='flex flex-row my-auto items-center
|
|
justify-center pt-2 pr-0 sm:pt-4 sm:pr-8'
|
|
>
|
|
<ThemeToggle />
|
|
{session && !loading && (
|
|
<div
|
|
className='flex flex-row my-auto items-center
|
|
justify-center'
|
|
>
|
|
<div className='mb-0.5 ml-4'>
|
|
<TVToggle width={22} height={22} />
|
|
</div>
|
|
<AvatarDropdown />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div
|
|
className='flex flex-row items-center text-center
|
|
justify-center'
|
|
>
|
|
<Image
|
|
src='/images/tech_tracker_logo.png'
|
|
alt='Tech Tracker Logo'
|
|
width={100}
|
|
height={100}
|
|
className='max-w-[40px] md:max-w-[120px]'
|
|
/>
|
|
<h1
|
|
className='title-text text-xl sm:text-4xl md:text-6xl lg:text-8xl
|
|
bg-gradient-to-r dark:from-[#bec8e6] dark:via-[#F0EEE4]
|
|
dark:to-[#FFF8E7] from-[#2e3266] via-slate-600 to-zinc-700
|
|
font-bold pl-2 md:pl-12 text-transparent bg-clip-text'
|
|
>
|
|
Tech Tracker
|
|
</h1>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|
|
};
|
|
export default Header;
|