73 lines
1.9 KiB
TypeScript
73 lines
1.9 KiB
TypeScript
'use client';
|
|
import Image from 'next/image';
|
|
import Link from 'next/link';
|
|
import { useTVMode } from '@/components/providers';
|
|
import { cn } from '@/lib/utils';
|
|
import { type ComponentProps } from 'react';
|
|
import { Controls } from './controls';
|
|
|
|
const Header = (headerProps: ComponentProps<'header'>) => {
|
|
const { tvMode } = useTVMode();
|
|
|
|
if (tvMode)
|
|
return (
|
|
<header
|
|
{...headerProps}
|
|
className={cn(
|
|
'w-full px-4 md:px-6 lg:px-20 my-8',
|
|
headerProps?.className,
|
|
)}
|
|
>
|
|
<div className='flex-1 flex justify-end mt-5'>
|
|
<Controls />
|
|
</div>
|
|
</header>
|
|
);
|
|
|
|
return (
|
|
<header
|
|
{...headerProps}
|
|
className={cn(
|
|
'w-full px-4 md:px-6 lg:px-20 my-8',
|
|
headerProps?.className,
|
|
)}
|
|
>
|
|
<div className='flex items-center justify-between'>
|
|
{/* Left spacer for perfect centering */}
|
|
<div className='flex flex-1 justify-start' />
|
|
|
|
{/* Centered logo and title */}
|
|
<div className='flex-shrink-0'>
|
|
<Link
|
|
href='/'
|
|
scroll={false}
|
|
className='flex flex-row items-center justify-center px-4'
|
|
>
|
|
<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>
|
|
</div>
|
|
|
|
{/* Right-aligned controls */}
|
|
<div className='flex-1 flex justify-end'>
|
|
<Controls />
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|
|
export default Header;
|