From 76a5ecdfc846f685d166e60812049c923d9ad9e4 Mon Sep 17 00:00:00 2001 From: Binoy Patel Date: Thu, 15 Sep 2022 12:24:14 -0400 Subject: [PATCH 1/7] Update Design for Header - Add Logo - Hide Blog navigation closes #78 --- packages/nextjs/components/Header.tsx | 22 ++++++++++++---------- packages/nextjs/components/Input.tsx | 17 +++++++++++------ packages/nextjs/components/Search.tsx | 8 ++++---- packages/nextjs/public/Logo.svg | 1 + 4 files changed, 28 insertions(+), 20 deletions(-) create mode 100644 packages/nextjs/public/Logo.svg diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx index 7b3450ca..78644c96 100644 --- a/packages/nextjs/components/Header.tsx +++ b/packages/nextjs/components/Header.tsx @@ -1,6 +1,6 @@ import Link from "next/link"; import React from "react"; -import { MdShoppingCart } from "react-icons/md"; +import { FiShoppingCart } from "react-icons/fi"; import { useCart } from "./CartContext"; import { Search } from "./Search"; @@ -20,17 +20,17 @@ export const Header = () => { const { cartTotal } = useCart(); return ( -
+
-

- - NextJs Ecom - -

+ + + Formidable Boulangerie + + @@ -38,8 +38,10 @@ export const Header = () => {
- - {cartTotal} + + Cart + + {cartTotal}
diff --git a/packages/nextjs/components/Input.tsx b/packages/nextjs/components/Input.tsx index a7c4e692..b2c55763 100644 --- a/packages/nextjs/components/Input.tsx +++ b/packages/nextjs/components/Input.tsx @@ -1,21 +1,24 @@ import classNames from "classnames"; -import { InputHTMLAttributes, useId } from "react"; +import { ForwardedRef, forwardRef, InputHTMLAttributes, useId } from "react"; interface Props extends InputHTMLAttributes { - label: string; + label?: string; placeholder: string; disabled?: boolean; } -export const Input: React.FC = ({ label, disabled, ...props }) => { +const InputComponent = ({ label, disabled, ...props }: Props, ref: ForwardedRef) => { const id = useId(); return (
- + {label && ( + + )} = ({ label, disabled, ...props }) => {
); }; + +export const Input = forwardRef(InputComponent); diff --git a/packages/nextjs/components/Search.tsx b/packages/nextjs/components/Search.tsx index 91f72ef7..2f51d1e6 100644 --- a/packages/nextjs/components/Search.tsx +++ b/packages/nextjs/components/Search.tsx @@ -6,6 +6,7 @@ import debounce from "lodash.debounce"; import { ProductSearch } from "utils/groqTypes/ProductSearch"; import Link from "next/link"; import { Image } from "./Image"; +import { Input } from "./Input"; const SEARCH_QUERY = groq`*[_type == 'product'] | score( @@ -74,10 +75,9 @@ export const Search: React.FC = () => { }, [closeMenu]); return ( -
+
- { {...getMenuProps({ "aria-labelledby": "search-label", })} - className={`absolute bg-white w-72 mt-2 border rounded z-10 p-5 ${!isOpen ? "hidden" : ""}`} + className={`absolute w-72 bg-yellow mt-2 border rounded z-10 p-5 ${!isOpen ? "hidden" : ""}`} > {isOpen && products.length ? ( products.map((product) => ( diff --git a/packages/nextjs/public/Logo.svg b/packages/nextjs/public/Logo.svg new file mode 100644 index 00000000..9dbdb5e5 --- /dev/null +++ b/packages/nextjs/public/Logo.svg @@ -0,0 +1 @@ + \ No newline at end of file From 6345aef96776d00a4945636bcbfc6f3b7ba6a16b Mon Sep 17 00:00:00 2001 From: Binoy Patel Date: Thu, 15 Sep 2022 14:33:16 -0400 Subject: [PATCH 2/7] Mobile nav --- packages/nextjs/components/Header.tsx | 102 +++++++++++++++++++------- packages/nextjs/components/Search.tsx | 2 +- 2 files changed, 75 insertions(+), 29 deletions(-) diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx index 78644c96..9f989cdc 100644 --- a/packages/nextjs/components/Header.tsx +++ b/packages/nextjs/components/Header.tsx @@ -1,6 +1,8 @@ +import classNames from "classnames"; import Link from "next/link"; -import React from "react"; -import { FiShoppingCart } from "react-icons/fi"; +import React, { useState } from "react"; +import { FiMenu, FiShoppingCart } from "react-icons/fi"; +import { MdClose } from "react-icons/md"; import { useCart } from "./CartContext"; import { Search } from "./Search"; @@ -17,34 +19,78 @@ const NAV_ITEMS = [ ]; export const Header = () => { + const [navOpen, setNavOpen] = useState(false); const { cartTotal } = useCart(); + const onMobileNavClick = () => setNavOpen((prev) => !prev); + + const onMobileNavClose = () => setNavOpen(false); + return ( -
-
- - - Formidable Boulangerie - - - -
- -
+ <> + +
    + {navOpen && + NAV_ITEMS?.map(({ label, href }) => { + return ( +
  • + + + {label} + + +
    • + ); + })} +
+ ); }; diff --git a/packages/nextjs/components/Search.tsx b/packages/nextjs/components/Search.tsx index 2f51d1e6..cbd9df26 100644 --- a/packages/nextjs/components/Search.tsx +++ b/packages/nextjs/components/Search.tsx @@ -75,7 +75,7 @@ export const Search: React.FC = () => { }, [closeMenu]); return ( -
+
Date: Thu, 15 Sep 2022 15:08:19 -0400 Subject: [PATCH 3/7] Home Page design updates --- packages/nextjs/components/Button.tsx | 3 +- packages/nextjs/components/Card.tsx | 11 +++-- packages/nextjs/components/Layout.tsx | 16 ++++-- packages/nextjs/pages/index.tsx | 49 ++++++++++++++----- packages/nextjs/utils/generated/graphql.ts | 3 +- .../graphql/getProductAndCategories.graphql | 1 + 6 files changed, 58 insertions(+), 25 deletions(-) diff --git a/packages/nextjs/components/Button.tsx b/packages/nextjs/components/Button.tsx index f20b0439..f67c144f 100644 --- a/packages/nextjs/components/Button.tsx +++ b/packages/nextjs/components/Button.tsx @@ -28,10 +28,9 @@ function ButtonComponent( "py-4", "px-8", "text-body-reg", - "font-bold", { "bg-blue text-white hover:text-sky": variant === "primary", - "bg-white text-blue hover:bg-blue hover:text-sky border border-blue": variant === "secondary", + "bg-[transparent] text-blue hover:bg-blue hover:text-sky border border-blue": variant === "secondary", "bg-white text-yellow hover:bg-yellow hover:text-blue": variant === "tertiary", "bg-thunder-cloud text-dark-thunder-cloud hover:text-dark-thunder-cloud": disabled, }, diff --git a/packages/nextjs/components/Card.tsx b/packages/nextjs/components/Card.tsx index 703b51e5..7af4d3df 100644 --- a/packages/nextjs/components/Card.tsx +++ b/packages/nextjs/components/Card.tsx @@ -4,6 +4,8 @@ import Link from "next/link"; import { Image } from "./Image"; interface Props { + title: string; + price: string | number; children: React.ReactNode; to: string; className?: string; @@ -13,12 +15,13 @@ interface Props { }; } -export const Card: React.FC = ({ to, children, imageProps, className = "" }) => { +export const Card: React.FC = ({ to, children, title, price, imageProps, className = "" }) => { return ( - - {imageProps.alt} -

{children}

+ + {imageProps.alt} +

{title}

+ ${price} ); diff --git a/packages/nextjs/components/Layout.tsx b/packages/nextjs/components/Layout.tsx index e50567ee..c106101a 100644 --- a/packages/nextjs/components/Layout.tsx +++ b/packages/nextjs/components/Layout.tsx @@ -1,3 +1,4 @@ +import Head from "next/head"; import React from "react"; import { Footer } from "./Footer"; import { Header } from "./Header"; @@ -8,10 +9,15 @@ interface Props { export const Layout: React.FC = ({ children }) => { return ( -
-
-
{children}
-
-
+ <> + + Formidable Boulangerie + +
+
+
{children}
+
+
+ ); }; diff --git a/packages/nextjs/pages/index.tsx b/packages/nextjs/pages/index.tsx index 0101fd2e..a9e474fc 100644 --- a/packages/nextjs/pages/index.tsx +++ b/packages/nextjs/pages/index.tsx @@ -2,30 +2,53 @@ import { GetServerSideProps, NextPage } from "next"; import { withUrqlClient } from "next-urql"; import { GetProductsAndCategoriesDocument, useGetProductsAndCategoriesQuery } from "utils/generated/graphql"; import { initializeUrql, urqlOptions, withUrqlOptions } from "utils/urql"; -import { CategoryList } from "components/CategoryList"; import { setCachingHeaders } from "utils/setCachingHeaders"; -import { ProductList } from "components/ProductList"; -import { ImageCarousel } from "components/ImageCarousel"; import { SanityType } from "utils/consts"; +import { Button } from "components/Button"; +import { FiArrowRight } from "react-icons/fi"; +import { Card } from "components/Card"; const Home: NextPage = () => { const [{ data }] = useGetProductsAndCategoriesQuery(); return ( -
-
-
- +
+
+
+

Formidable breads for your daily life.

+
+
- -
-

Top Products

- +

Our bestsellers

+
+ {data?.allProduct.map((product, i) => ( + <> + +

{product.name}

+ + {i !== data.allProduct.length - 1 && } + + ))} +
+
+
-

Top Categories

- +

Top categories

); }; diff --git a/packages/nextjs/utils/generated/graphql.ts b/packages/nextjs/utils/generated/graphql.ts index 84f8e1d1..095a53f4 100644 --- a/packages/nextjs/utils/generated/graphql.ts +++ b/packages/nextjs/utils/generated/graphql.ts @@ -1116,7 +1116,7 @@ export type GetProductQuery = { __typename?: 'RootQuery', allProduct: Array<{ __ export type GetProductsAndCategoriesQueryVariables = Exact<{ [key: string]: never; }>; -export type GetProductsAndCategoriesQuery = { __typename?: 'RootQuery', allCategory: Array<{ __typename?: 'Category', _id?: string | null, name?: string | null, slug?: { __typename?: 'Slug', current?: string | null } | null, images?: Array<{ __typename?: 'CategoryImage', name?: string | null, images?: { __typename?: 'Image', asset?: { __typename?: 'SanityImageAsset', url?: string | null } | null } | null } | null> | null }>, allProduct: Array<{ __typename?: 'Product', _id?: string | null, name?: string | null, slug?: { __typename?: 'Slug', current?: string | null } | null, variants?: Array<{ __typename?: 'Variant', images?: Array<{ __typename?: 'ProductImage', name?: string | null, images?: { __typename?: 'Image', asset?: { __typename?: 'SanityImageAsset', url?: string | null } | null } | null } | null> | null } | null> | null }>, allProductImage: Array<{ __typename?: 'ProductImage', _id?: string | null, name?: string | null, images?: { __typename?: 'Image', asset?: { __typename?: 'SanityImageAsset', _id?: string | null, url?: string | null } | null } | null }> }; +export type GetProductsAndCategoriesQuery = { __typename?: 'RootQuery', allCategory: Array<{ __typename?: 'Category', _id?: string | null, name?: string | null, slug?: { __typename?: 'Slug', current?: string | null } | null, images?: Array<{ __typename?: 'CategoryImage', name?: string | null, images?: { __typename?: 'Image', asset?: { __typename?: 'SanityImageAsset', url?: string | null } | null } | null } | null> | null }>, allProduct: Array<{ __typename?: 'Product', _id?: string | null, name?: string | null, slug?: { __typename?: 'Slug', current?: string | null } | null, variants?: Array<{ __typename?: 'Variant', price?: number | null, images?: Array<{ __typename?: 'ProductImage', name?: string | null, images?: { __typename?: 'Image', asset?: { __typename?: 'SanityImageAsset', url?: string | null } | null } | null } | null> | null } | null> | null }>, allProductImage: Array<{ __typename?: 'ProductImage', _id?: string | null, name?: string | null, images?: { __typename?: 'Image', asset?: { __typename?: 'SanityImageAsset', _id?: string | null, url?: string | null } | null } | null }> }; export type GetProductsQueryVariables = Exact<{ [key: string]: never; }>; @@ -1256,6 +1256,7 @@ export const GetProductsAndCategoriesDocument = gql` current } variants { + price images { name images { diff --git a/packages/nextjs/utils/graphql/getProductAndCategories.graphql b/packages/nextjs/utils/graphql/getProductAndCategories.graphql index 39eb0b79..1451cb0d 100644 --- a/packages/nextjs/utils/graphql/getProductAndCategories.graphql +++ b/packages/nextjs/utils/graphql/getProductAndCategories.graphql @@ -21,6 +21,7 @@ query getProductsAndCategories { current } variants { + price images { name images { From 98a5bae3176297b24eca72407e9a757b0a7eda4b Mon Sep 17 00:00:00 2001 From: Binoy Patel Date: Thu, 15 Sep 2022 15:10:29 -0400 Subject: [PATCH 4/7] Fix header on desktop --- packages/nextjs/components/Header.tsx | 2 +- packages/nextjs/components/Search.tsx | 2 +- packages/nextjs/pages/index.tsx | 2 ++ 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx index 9f989cdc..34340a45 100644 --- a/packages/nextjs/components/Header.tsx +++ b/packages/nextjs/components/Header.tsx @@ -51,7 +51,7 @@ export const Header = () => { - Cart + Cart {cartTotal} diff --git a/packages/nextjs/components/Search.tsx b/packages/nextjs/components/Search.tsx index cbd9df26..21e4145c 100644 --- a/packages/nextjs/components/Search.tsx +++ b/packages/nextjs/components/Search.tsx @@ -75,7 +75,7 @@ export const Search: React.FC = () => { }, [closeMenu]); return ( -
+
{
+

Our bestsellers

+
{data?.allProduct.map((product, i) => ( <> From eba78c1a3ec6634fe0b7d5702674b04d7aabca71 Mon Sep 17 00:00:00 2001 From: Binoy Patel Date: Fri, 16 Sep 2022 11:15:46 -0400 Subject: [PATCH 5/7] Update styles for product list --- packages/nextjs/components/Card.tsx | 9 +++++---- packages/nextjs/components/CategoryList.tsx | 5 ++--- packages/nextjs/components/ProductList.tsx | 14 +++++++------ packages/nextjs/pages/index.tsx | 22 ++------------------- 4 files changed, 17 insertions(+), 33 deletions(-) diff --git a/packages/nextjs/components/Card.tsx b/packages/nextjs/components/Card.tsx index 7af4d3df..ced11598 100644 --- a/packages/nextjs/components/Card.tsx +++ b/packages/nextjs/components/Card.tsx @@ -5,8 +5,8 @@ import { Image } from "./Image"; interface Props { title: string; - price: string | number; - children: React.ReactNode; + price?: string | number; + subTitle?: string; to: string; className?: string; imageProps: { @@ -15,13 +15,14 @@ interface Props { }; } -export const Card: React.FC = ({ to, children, title, price, imageProps, className = "" }) => { +export const Card: React.FC = ({ to, subTitle, title, price, imageProps, className = "" }) => { return ( {imageProps.alt}

{title}

- ${price} + {price && ${price}} + {subTitle && {subTitle}} ); diff --git a/packages/nextjs/components/CategoryList.tsx b/packages/nextjs/components/CategoryList.tsx index 37220340..de77cc72 100644 --- a/packages/nextjs/components/CategoryList.tsx +++ b/packages/nextjs/components/CategoryList.tsx @@ -18,9 +18,8 @@ export const CategoryList = ({ items }: CategoryListProps) => { src: category.images?.[0]?.images ?? "", alt: category.images?.[0]?.name ?? "", }} - > - {category.name} - + title={category.name ?? ""} + /> ))} diff --git a/packages/nextjs/components/ProductList.tsx b/packages/nextjs/components/ProductList.tsx index bacf9a83..e4d6f915 100644 --- a/packages/nextjs/components/ProductList.tsx +++ b/packages/nextjs/components/ProductList.tsx @@ -9,18 +9,20 @@ export const ProductList = ({ items }: Props) => { if (!items) return null; return ( -