{children}
+ Coming soon...
-Date: ${getTruncatedDateStr( new Date(deliveryDate) )}
-Number of Cookies: ${cookieCount}
+Cookies:
+ ${cookieList.reduce( + (total, currentItem) => + `${total}${currentItem.count} ${currentItem.flavor}
`, + '' + )}Message: ${message}
` }) diff --git a/components/DesktopGallery.tsx b/pages/gallery.tsx similarity index 60% rename from components/DesktopGallery.tsx rename to pages/gallery.tsx index 0977961..a09ddd8 100644 --- a/components/DesktopGallery.tsx +++ b/pages/gallery.tsx @@ -1,35 +1,85 @@ -import { useRef, useState, forwardRef } from 'react' +import { forwardRef, useRef, useState } from 'react' import Image from 'next/image' import { Transition } from '@headlessui/react' import classNames from 'classnames' +import { Page } from '../components' +import { useOnClickOutside } from '../hooks' +import CloseIcon from '@mui/icons-material/CloseOutlined' import ChevronLeftIcon from '@mui/icons-material/ChevronLeftOutlined' import ChevronRightIcon from '@mui/icons-material/ChevronRightOutlined' -import CloseIcon from '@mui/icons-material/CloseOutlined' -import { useOnClickOutside } from '../hooks' -import { posts } from '.' -import type { CommonGalleryProps, GalleryButtonProps } from './GallerySection' +import type { NextPage } from 'next' + +import babyPic from '../public/posts/baby.jpg' +import baby2Pic from '../public/posts/baby2.jpg' +import birthdayPic from '../public/posts/birthday.jpg' +import carsPic from '../public/posts/cars.jpg' +import cars2Pic from '../public/posts/cars2.jpg' +import marvelPic from '../public/posts/marvel.jpg' +import potterPic from '../public/posts/potter.jpg' +import potter2Pic from '../public/posts/potter2.jpg' +import potter3Pic from '../public/posts/potter3.jpg' + +export const posts = [ + babyPic, + baby2Pic, + birthdayPic, + carsPic, + cars2Pic, + marvelPic, + potterPic, + potter2Pic, + potter3Pic +] + +const LARGE_PAGE_SIZE = 1024 -type DesktopGalleryProps = CommonGalleryProps & { - setPostIndex: (postIndex: number) => void +export type CommonGalleryProps = { + postIndex: number + goToNextPost: () => void + goToPrevPost: () => void + atFirstPost: boolean + atLastPost: boolean } -export const DesktopGallery = (props: DesktopGalleryProps) => { +export type GalleryButtonProps = { + side: 'left' | 'right' + onClick: () => void + disabled: boolean +} + +const Gallery: NextPage = () => { + const [postIndex, setPostIndex] = useState(0) const [showFullscreenPost, setShowFullscreenPost] = useState(false) + const atFirstPost = postIndex === 0 + const atLastPost = postIndex === posts.length - 1 + + const goToNextPost = () => setPostIndex(postIndex + 1) + const goToPrevPost = () => setPostIndex(postIndex - 1) + const onPostClick = (index: number) => { - props.setPostIndex(index) + setPostIndex(index) setShowFullscreenPost(true) } + const handlePostClick = (postIndex: number) => { + if ( + window.innerWidth > LARGE_PAGE_SIZE || + window.innerWidth === LARGE_PAGE_SIZE + ) { + onPostClick(postIndex) + } + } + return ( - <> -+ Welcome to Cookies by Coffey, your favorite custom cookie boutique! + We offer custom butter sugar and chocolate sugar cookies and are + continually experimenting with new flavors and ideas. Currently, + cookies may be picked up in the Greater St. Louis area, but we + expect to start shipping to the rest of the US soon! +
+