53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
'use client';
|
|
|
|
import Image from 'next/image';
|
|
import Link from 'next/link';
|
|
import { ThemeToggle, useTVMode } from '@/components/context';
|
|
import { useAuth } from '@/components/context';
|
|
import AvatarDropdown from './AvatarDropdown';
|
|
|
|
const Header = () => {
|
|
const { tvMode } = useTVMode();
|
|
const { isAuthenticated } = useAuth();
|
|
return tvMode ? (
|
|
<div className='w-full py-2 pt-6 md:py-5'>
|
|
<div className='absolute top-8 right-24'>
|
|
<div className='flex flex-row my-auto items-center pt-2 pr-0 md:pt-4'>
|
|
{isAuthenticated && <AvatarDropdown />}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<header className='w-full py-2 pt-6 md:py-5'>
|
|
<div className='absolute top-8 right-16'>
|
|
<div className='flex flex-row my-auto items-center pt-2 pr-0 md:pt-4 md:pr-8'>
|
|
<ThemeToggle className='mr-4' />
|
|
{isAuthenticated && <AvatarDropdown />}
|
|
</div>
|
|
</div>
|
|
<Link
|
|
href='/'
|
|
scroll={false}
|
|
className='flex flex-row items-center text-center
|
|
justify-center sm:ml-0 p-4 mt-10 sm:mt-0'
|
|
>
|
|
<Image
|
|
src='/favicon.png'
|
|
alt='Tech Tracker Logo'
|
|
width={100}
|
|
height={100}
|
|
className='max-w-[40px] md:max-w-[120px]'
|
|
/>
|
|
<h1
|
|
className='title-text text-sm md:text-4xl lg:text-8xl
|
|
bg-gradient-to-r from-[#281A65] via-[#363354] to-accent-foreground dark:from-[#bec8e6] dark:via-[#F0EEE4] dark:to-[#FFF8E7]
|
|
font-bold pl-2 md:pl-12 text-transparent bg-clip-text'
|
|
>
|
|
Tech Tracker
|
|
</h1>
|
|
</Link>
|
|
</header>
|
|
);
|
|
};
|
|
export default Header;
|