nickcoffey · nickcoffey · Nov 7, 2023 · Aug 29, 2023 · Aug 30, 2023 · Aug 30, 2023
diff --git a/components/AboutSection.tsx b/components/AboutSection.tsx
diff --git a/components/Datepicker.tsx b/components/Datepicker.tsx
@@ -4,10 +4,10 @@ import { Popover, Transition } from '@headlessui/react'
 import { usePopper } from 'react-popper'
 import classNames from 'classnames'
 import { Input } from './Input'
-import { OrderInputs } from './OrderSection'
 import { getTruncatedDateStr } from '../utils'
 import type { Props as DayzedProps } from 'dayzed'
 import type { UseFormSetValue } from 'react-hook-form'
+import type { OrderInputs } from '../pages/order'
 import type { BaseInputProps } from './Input'
 
 type RequiredInputProps = Required<Pick<BaseInputProps, 'inputProps'>>
@@ -17,6 +17,8 @@ type DatepickerProps = { setValue: UseFormSetValue<OrderInputs> } & Omit<
 > &
   RequiredInputProps
 
+// TODO: fix focus within state
+// TODO: fix popper offset
 export const Datepicker = ({ setValue, ...props }: DatepickerProps) => {
   const [date, setDate] = useState<Date>()
 
@@ -53,10 +55,15 @@ export const Datepicker = ({ setValue, ...props }: DatepickerProps) => {
           {...attributes.popper}
           className='bg-white'
         >
-          <DateDialog
-            selected={date}
-            onDateSelected={date => setDate(date.date)}
-          />
+          {({ close }) => (
+            <DateDialog
+              selected={date}
+              onDateSelected={date => {
+                setDate(date.date)
+                close()
+              }}
+            />
+          )}
         </Popover.Panel>
       </Transition>
     </Popover>

diff --git a/components/GallerySection.tsx b/components/GallerySection.tsx
diff --git a/components/Layout.tsx b/components/Layout.tsx
@@ -0,0 +1,22 @@
+import type { ReactNode, RefObject } from 'react'
+import Head from 'next/head'
+import { Navigation } from './Navigation'
+
+type Props = {
+  children: ReactNode
+  navRef?: RefObject<HTMLElement>
+}
+
+export const Layout = ({ children, navRef }: Props) => {
+  return (
+    <>
+      <Head>
+        <title>Cookies by Coffey</title>
+        <meta name='description' content='Custom Boutique Cookies' />
+        <link rel='icon' href='/logo.svg' />
+      </Head>
+      <Navigation ref={navRef} />
+      {children}
+    </>
+  )
+}
diff --git a/components/Main.tsx b/components/Main.tsx
@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react'
+
+type Props = {
+  children: ReactNode
+}
+
+export const Main = ({ children }: Props) => {
+  return (
+    <main className='p-4 lg:py-8 lg:px-24 lg:flex lg:flex-col lg:items-center'>
+      <div className='max-w-5xl'>{children}</div>
+    </main>
+  )
+}
diff --git a/components/MobileGallery.tsx b/components/MobileGallery.tsx
diff --git a/components/Navigation.tsx b/components/Navigation.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect, useRef, forwardRef } from 'react'
+import Link from 'next/link'
 import HomeIcon from '@mui/icons-material/HomeOutlined'
-import PersonIcon from '@mui/icons-material/PersonOutlined'
 import PhotoLibraryIcon from '@mui/icons-material/PhotoLibraryOutlined'
 import EmailIcon from '@mui/icons-material/EmailOutlined'
 import MenuIcon from '@mui/icons-material/MenuOutlined'
@@ -11,44 +11,14 @@ import { useOnClickOutside } from '../hooks'
 import type { Icon } from '../types'
 
 type LinkName = 'Home' | 'About' | 'Gallery' | 'Order'
-type Link = { name: LinkName; icon: Icon; id?: string }
+type Link = { name: LinkName; icon: Icon; id: string }
 
 const links: Link[] = [
-  { name: 'Home', icon: HomeIcon },
-  { name: 'About', icon: PersonIcon, id: 'about' },
-  { name: 'Gallery', icon: PhotoLibraryIcon, id: 'gallery' },
-  { name: 'Order', icon: EmailIcon, id: 'order' }
+  { name: 'Home', icon: HomeIcon, id: '/' },
+  { name: 'Gallery', icon: PhotoLibraryIcon, id: '/gallery' },
+  { name: 'Order', icon: EmailIcon, id: '/order' }
 ]
 
-function scrollToTop() {
-  window.scrollTo({ top: 0, behavior: 'smooth' })
-}
-
-function scrollToSection(id: string) {
-  const element = document.querySelector(`#${id}`)
-  const navbar = document.querySelector('#navbar')
-
-  if (element && navbar) {
-    // @ts-ignore
-    const navbarOffset = navbar.offsetHeight + 8
-    const elementPosition = element.getBoundingClientRect().top
-    const offsetTop = elementPosition + window.pageYOffset - navbarOffset
-
-    window.scrollTo({
-      top: offsetTop,
-      behavior: 'smooth'
-    })
-  }
-}
-
-const handleLinkClick = (linkId?: string) => {
-  if (!linkId) {
-    scrollToTop()
-  } else {
-    scrollToSection(linkId)
-  }
-}
-
 export const Navigation = forwardRef<HTMLElement>((_props, ref) => {
   const [navVisEnabled, setNavVisEnabled] = useState(false)
 
@@ -77,17 +47,17 @@ export const Navigation = forwardRef<HTMLElement>((_props, ref) => {
     <nav className={navClasses} id='navbar' ref={ref}>
       {/* Desktop Nav */}
       {links.map((link, index) => (
-        <a
-          className='items-start justify-center hidden gap-2 px-4 py-2 transition duration-150 rounded-md cursor-pointer select-none lg:flex hover:text-black hover:bg-primary'
-          onClick={() => handleLinkClick(link.id)}
-          key={index}
-        >
-          <link.icon />
-          {link.name}
-        </a>
+        <Link href={link.id} key={index}>
+          <span className='items-start justify-center hidden gap-2 px-4 py-2 transition duration-150 rounded-md cursor-pointer select-none lg:flex hover:text-black hover:bg-primary'>
+            <link.icon />
+            {link.name}
+          </span>
+        </Link>
       ))}
       {/* Mobile Nav */}
-      <HomeIcon onClick={scrollToTop} className='text-4xl-important lg-hidden-important' />
+      <Link href='/'>
+        <HomeIcon className='text-4xl-important lg-hidden-important' />
+      </Link>
       <MobileNavButton />
     </nav>
   )
@@ -107,10 +77,15 @@ const MobileNavButton = () => {
 
   return (
     <>
-      <span className='fixed right-2 top-2 lg:hidden'>
-        {isDrawerOpen ? <CloseIcon className='text-4xl-important' ref={btnRef} onClick={toggleDrawer} /> :
-          <MenuIcon className='text-4xl-important' ref={btnRef}  onClick={toggleDrawer} />}
-      </span>
+      {!isDrawerOpen && (
+        <span className='fixed right-2 top-2 lg:hidden'>
+          <MenuIcon
+            className='text-4xl-important'
+            ref={btnRef}
+            onClick={toggleDrawer}
+          />
+        </span>
+      )}
       <Transition
         show={isDrawerOpen}
         enter='transition duration-150'
@@ -120,21 +95,27 @@ const MobileNavButton = () => {
         leaveFrom='opacity-100'
         leaveTo='opacity-0'
       >
+        {isDrawerOpen && (
+          <span className='fixed right-2 top-2 text-white z-50 lg:hidden'>
+            <CloseIcon
+              className='text-4xl-important'
+              ref={btnRef}
+              onClick={toggleDrawer}
+            />
+          </span>
+        )}
         <ul
-          className='h-full fixed z-20 top-0 left-0 bg-[rgba(0,0,0,0.9)] pt-12 pl-6 pr-20 text-white text-xl flex flex-col gap-4'
+          className='h-full fixed z-20 top-0 right-0 bg-[rgba(0,0,0,0.9)] pt-16 pl-6 pr-20 text-white text-xl flex flex-col gap-4'
           ref={drawerRef}
         >
           {links.map((link, index) => (
-            <li
-              key={index}
-              onClick={() => {
-                setIsDrawerOpen(false)
-                handleLinkClick(link.id)
-              }}
-              className='flex items-center gap-2'
-            >
-              <link.icon className='text-4xl-important' />
-              {link.name}
+            <li key={index}>
+              <Link href={link.id}>
+                <span className='flex items-center gap-2'>
+                  <link.icon className='text-4xl-important' />
+                  {link.name}
+                </span>
+              </Link>
             </li>
           ))}
         </ul>

diff --git a/components/Page.tsx b/components/Page.tsx
@@ -0,0 +1,18 @@
+import { Layout, Main } from '.'
+import type { ReactNode } from 'react'
+
+type Props = {
+  header: string
+  children: ReactNode
+}
+
+export const Page = ({ header, children }: Props) => {
+  return (
+    <Layout>
+      <h1 className='mt-[52px] lg:mt-14 mb-4 tracking-normal text-center text-8xl text-darkprimary font-bdscript'>
+        {header}
+      </h1>
+      <Main>{children}</Main>
+    </Layout>
+  )
+}
diff --git a/components/Section.tsx b/components/Section.tsx