Making progress.

src/components/default/header/index.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import Image from 'next/image';
+import Link from 'next/link';
+import NavigationAuth from './auth';
+import { ThemeToggle, TVToggle, useTVMode } from '@/components/context';
+
+const Header = () => {
+  const { tvMode } = useTVMode();
+  return tvMode ? (
+    <div className='absolute top-4 right-2'>
+      <div className='flex flex-row my-auto items-center pt-2 pr-0 md:pt-4'>
+        <TVToggle />
+      </div>
+    </div>
+  ) : (
+    <header className='w-full py-2 pt-6 md:py-5'>
+      <div className='absolute top-4 right-6'>
+        <div className='flex flex-row my-auto items-center pt-2 pr-0 md:pt-4 md:pr-8'>
+          <TVToggle />
+          <ThemeToggle className='mx-2' />
+        </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-[#bec8e6] via-[#F0EEE4] to-[#FFF8E7]
+					font-bold pl-2 md:pl-12 text-transparent bg-clip-text'
+        >
+          Tech Tracker
+        </h1>
+      </Link>
+    </header>
+  );
+};
+export default Header;