refactor and style header

components/header/header.tsx

@@ -0,0 +1,23 @@
+import { useRouter } from 'next/router'
+import { Twirl as Hamburger } from 'hamburger-react'
+import { HeaderLinks } from './headerLinks'
+import { MenuProps } from '../menu'
+
+export const Header = ({ show, setShow }: MenuProps) => {
+  const router = useRouter()
+  const { pathname } = router
+
+  return (
+    <div className='z-50 top-0 w-full bg-[#1B1B1B]'>
+      <div className='max-w-screen-2xl  mx-auto'>
+        <div className='px-6 w-full h-16 flex items-center relative transition-all justify-between sm:justify-start'>
+          <h1 className=' text-4xl font-bold sm:text-5xl'>John Roberts</h1>
+          <div className={`absolute  sm:hidden z-10 ${show ? 'right-6' : 'right-4'}`}>
+            <Hamburger toggle={setShow} toggled={show} direction='right' rounded />
+          </div>
+        </div>
+        {/* <HeaderLinks pathname={pathname} /> */}
+      </div>
+    </div>
+  )
+}

components/header/headerLinks.tsx

@@ -0,0 +1,32 @@
+import { useRouter } from 'next/router'
+import { links } from '@/lib/links'
+import Link from 'next/link'
+
+type HeaderLinkProps = {
+  linkName: string
+  linkPath: string
+  pathname: string
+}
+
+const HeaderLink = ({ linkName, linkPath, pathname }: HeaderLinkProps) => {
+  return (
+    <Link href={linkPath}>
+      <div className={`${pathname == linkPath ? 'text-red-500' : 'text-[var(--fg)]'} hover:text-red-500  transition-all ease-in-out duration-200`}>
+        {linkName}
+      </div>
+    </Link>
+  )
+}
+
+export const HeaderLinks = () => {
+  const router = useRouter()
+  const { pathname } = router
+
+  return (
+    <div className={`hidden sm:flex sticky top-0 z-20 w-full h-8 gap-7 items-center justify-center bg-black font-semibold pr-4 md:justify-end `}>
+      {links.map((link) => (
+        <HeaderLink pathname={pathname} key={link.linkName} linkName={link.linkName} linkPath={link.linkPath} />
+      ))}
+    </div>
+  )
+}

components/layout.tsx

@@ -1,7 +1,8 @@
 import React, { PropsWithChildren, useState } from 'react'
 
 import { motion } from 'framer-motion'
-import { Header } from './header'
+import { Header } from './header/header'
+import { HeaderLinks } from './header/headerLinks'
 import { Footer } from './footer'
 import Menu from './menu'
 import { Inter } from 'next/font/google'
@@ -14,6 +15,7 @@ export const Layout = ({ children }: PropsWithChildren) => {
   return (
     <main className={`flex min-h-screen flex-col items-center ${inter.className}`}>
       <Header setShow={setShow} show={show} />
+      <HeaderLinks />
       <motion.div className='w-full  mx-auto max-w-screen-2xl ' initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
         {children}
       </motion.div>

pages/editorial.tsx

@@ -20,20 +20,22 @@ type Photo = {
   btnTxt: string
 }
 
-const ImageWithLink = (photo: Photo) => {
-  const { src, alt, href, btnTxt, width, height } = photo
+const LinkButton = ({ href, btnTxt }: { href: string; btnTxt: string }) => {
   return (
-    <>
-      <Image className='mx-auto' src={src} width={width} height={height} alt={alt} />
-      <Link href={href}>
-        <div className='w-max mx-auto border py-1 px-6 text-[1.75rem] text-black font-extrabold border-black rounded-xl mt-6 mb-16 hover:bg-red-500 hover:text-[var(--fg)] transition-colors'>
-          {btnTxt}
-        </div>
+    <div className='w-max mx-auto border text-xs flex flex-shrink py-2 text-[var(--fg)] font-extrabold border-[var(--fg)] rounded-xl mt-6 mb-16 hover:bg-red-500 hover:text-[var(--fg)] transition-colors sm:text-2xl md:text-3xl md:px-2'>
+      <Link className='py-1 px-2 md:px-6' href={href}>
+        {btnTxt}
       </Link>
-    </>
+    </div>
   )
 }
 
+const PageImage = (photo: Photo) => {
+  const { src, alt, width, height } = photo
+
+  return <Image className='mx-auto' src={src} width={width} height={height} alt={alt} />
+}
+
 const Editorial = (props: Props, ref: EditorialPageRef) => {
   const [index, setIndex] = useState(-1)
 
@@ -42,15 +44,18 @@ const Editorial = (props: Props, ref: EditorialPageRef) => {
       <div className='w-full px-16'>
         <h1 className='text-center py-6 text-4xl font-extrabold'>Editorial</h1>
         {photos.map((photo, i) => (
-          <div className='cursor-pointer' onClick={() => setIndex(i)} key={i}>
-            <ImageWithLink {...photo} />
+          <div key={i}>
+            <div onClick={() => setIndex(i)}>
+              <PageImage {...photo} />
+            </div>
+            <LinkButton href={photo.href} btnTxt={photo.btnTxt} />
           </div>
         ))}
-        <Link href='https://www.motortrend.com/staff/john-roberts/'>
-          <div className='w-max mx-auto border py-1 px-6 text-[1.75rem] text-red-500 font-extrabold border-black rounded-xl mt-6 mb-16 hover:bg-[#1B1B1B] hover:text-[var(--fg)] transition-colors'>
+        <div className='w-max mx-auto border text-sm flex flex-shrink py-2 text-red-500 font-extrabold border-[var(--fg)] rounded-xl mt-6 mb-16 hover:bg-[#1B1B1B] hover:text-[var(--fg)] transition-colors md:text-3xl md:px-2'>
+          <Link className='py-1 px-2 md:px-6' href='https://www.motortrend.com/staff/john-roberts/'>
             More Editorial Here
-          </div>
-        </Link>
+          </Link>
+        </div>
       </div>
       <Suggest />
       <Lightbox slides={photos} open={index >= 0} close={() => setIndex(-1)} index={index} plugins={[Zoom]} />

pages/video.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react'
 import YouTube, { YouTubeProps } from 'react-youtube'
 import { videos } from '@/lib/videos'
 import PageTransition from '@/components/pageTransition'
@@ -8,9 +9,11 @@ type VideoPlayerProps = {
 }
 
 const VideoPlayer = ({ id }: VideoPlayerProps) => {
+  const [ready, setReady] = useState(false)
   const onPlayerReady: YouTubeProps['onReady'] = (event) => {
     // access to player in all event handlers via event.target
     event.target.pauseVideo()
+    setReady(true)
   }
 
   const opts: YouTubeProps['opts'] = {
@@ -24,7 +27,7 @@ const VideoPlayer = ({ id }: VideoPlayerProps) => {
 
   return (
     <div className='w-full h-full max-w-[640px] max-h-[360px]'>
-      <YouTube className='aspect-video' videoId={id} opts={opts} onReady={onPlayerReady} />
+      <YouTube className='aspect-video border-2' videoId={id} opts={opts} onReady={onPlayerReady} loading='lazy' />
     </div>
   )
 }
@@ -36,7 +39,7 @@ export default function Video(props: VideoPageProps, ref: VideoPageRef) {
   return (
     <PageTransition ref={ref}>
       <h1 className='text-center py-6 text-4xl text-[#69DB7A] font-extrabold'>YOUTUBE SERIES “THE TASTING”</h1>
-      <div className='flex flex-col items-center justify-center gap-4 min-h-screen py-2'>
+      <div className='flex flex-col items-center justify-center gap-4 min-h-screen px-4 py-2'>
         {videos.map((video) => (
           <VideoPlayer key={video.id} id={video.id} />
         ))}