diff --git a/components/cart/CartItem/CartItem.tsx b/components/cart/CartItem/CartItem.tsx index fa472afd0..622001e8d 100644 --- a/components/cart/CartItem/CartItem.tsx +++ b/components/cart/CartItem/CartItem.tsx @@ -53,8 +53,6 @@ const CartItem = ({ } }, [item.quantity]) - console.log(item) - return (
  • diff --git a/components/cart/CartSidebarView/CartSidebarView.tsx b/components/cart/CartSidebarView/CartSidebarView.tsx index f1274de16..23ead0008 100644 --- a/components/cart/CartSidebarView/CartSidebarView.tsx +++ b/components/cart/CartSidebarView/CartSidebarView.tsx @@ -27,9 +27,6 @@ const CartSidebarView: FC = () => { const items = data?.line_items.physical_items ?? [] - console.log('CART', data, isEmpty) - - // This should come from the API via hook I guess const error = null const success = null @@ -95,7 +92,7 @@ const CartSidebarView: FC = () => {

    My Cart

    -
    -
    +
    • Subtotal @@ -122,7 +119,7 @@ const CartSidebarView: FC = () => { FREE
    -
    +
    Total {total}
    diff --git a/components/core/Head/Head.tsx b/components/core/Head/Head.tsx new file mode 100644 index 000000000..b2c0c997b --- /dev/null +++ b/components/core/Head/Head.tsx @@ -0,0 +1,18 @@ +import { FC } from 'react' +import NextHead from 'next/head' +import { DefaultSeo } from 'next-seo' +import config from '@config/seo.json' + +const Head: FC = () => { + return ( + <> + + + + + + + ) +} + +export default Head diff --git a/components/core/Head/index.ts b/components/core/Head/index.ts new file mode 100644 index 000000000..b317a124b --- /dev/null +++ b/components/core/Head/index.ts @@ -0,0 +1 @@ +export { default } from './Head' diff --git a/components/core/Layout/Layout.tsx b/components/core/Layout/Layout.tsx index 63ec7a238..3c679ab2f 100644 --- a/components/core/Layout/Layout.tsx +++ b/components/core/Layout/Layout.tsx @@ -1,58 +1,40 @@ import { FC } from 'react' import cn from 'classnames' -import { ThemeProvider } from 'next-themes' -import { SSRProvider, OverlayProvider } from 'react-aria' import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages' import { CommerceProvider } from '@lib/bigcommerce' import { Navbar, Featurebar, Footer } from '@components/core' import { Container, Sidebar } from '@components/ui' import { CartSidebarView } from '@components/cart' -import { UIProvider, useUI } from '@components/ui/context' +import { useUI } from '@components/ui/context' import s from './Layout.module.css' -interface LayoutProps { +interface Props { pageProps: { pages?: Page[] } } -interface Props { - pages?: Page[] -} - -const CoreLayout: FC = ({ children, pages }) => { +const Layout: FC = ({ children, pageProps }) => { const { displaySidebar, closeSidebar } = useUI() return ( -
    - - - - -
    {children}
    -
    - - - -
    + +
    + + + + +
    {children}
    +
    + + + +
    +     ) } -const Layout: FC = ({ children, pageProps }) => ( - - - - - - {children} - - - - - -) - export default Layout diff --git a/components/core/index.ts b/components/core/index.ts index 587c9cece..27b19d5d8 100644 --- a/components/core/index.ts +++ b/components/core/index.ts @@ -6,3 +6,4 @@ export { default as Navbar } from './Navbar' export { default as Searchbar } from './Searchbar' export { default as UserNav } from './UserNav' export { default as Toggle } from './Toggle' +export { default as Head } from './Head' diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css index b8329a94f..1c9b2a75f 100644 --- a/components/product/ProductCard/ProductCard.module.css +++ b/components/product/ProductCard/ProductCard.module.css @@ -6,31 +6,31 @@ @apply scale-75; } - & .productTitle, + & .productTitle > span, & .productPrice, & .wishlistButton { @apply bg-secondary text-secondary; } - &:nth-child(6n + 1) .productTitle, + &:nth-child(6n + 1) .productTitle > span, &:nth-child(6n + 1) .productPrice, &:nth-child(6n + 1) .wishlistButton { @apply bg-violet text-white; } - &:nth-child(6n + 5) .productTitle, + &:nth-child(6n + 5) .productTitle > span, &:nth-child(6n + 5) .productPrice, &:nth-child(6n + 5) .wishlistButton { @apply bg-blue text-white; } - &:nth-child(6n + 3) .productTitle, + &:nth-child(6n + 3) .productTitle > span, &:nth-child(6n + 3) .productPrice, &:nth-child(6n + 3) .wishlistButton { @apply bg-pink text-white; } - &:nth-child(6n + 6) .productTitle, + &:nth-child(6n + 6) .productTitle > span, &:nth-child(6n + 6) .productPrice, &:nth-child(6n + 6) .wishlistButton { @apply bg-cyan text-white; @@ -66,29 +66,13 @@ } .productTitle { - /* @apply p-3 h-14 bg-primary text-base font-bold text-xl truncate leading-8 inline-flex; */ - /* max-width: calc(100% - 50px); */ - line-height: 1.3; - padding: 2px 0; - border-left: 20px solid #c0c; - width: 400px; - margin: 20px auto; + line-height: 51px; + width: 200px; - & h2 { - background-color: #c0c; - padding: 4px 0; - color: #fff; - display: inline; - margin: 0; - - & .strong { - position: relative; - left: -10px; - } - } - - @screen lg { - @apply text-2xl; + & span { + @apply inline text-2xl leading-6 p-4 bg-primary text-primary font-bold; + box-decoration-break: clone; + -webkit-box-decoration-break: clone; } } diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx index 2637b8a76..2bb3e149a 100644 --- a/components/product/ProductCard/ProductCard.tsx +++ b/components/product/ProductCard/ProductCard.tsx @@ -46,17 +46,11 @@ const ProductCard: FC = ({ className, node: p, variant }) => {
    -
    -
    - -

    - {p.name} -

    -     -
    -
    -
    ${p.prices.price.value}
    +
    +
    + {p.name}
    + ${p.prices.price.value}
    diff --git a/components/ui/context.tsx b/components/ui/context.tsx index 40ac823b1..90fe8de94 100644 --- a/components/ui/context.tsx +++ b/components/ui/context.tsx @@ -1,4 +1,6 @@ import React, { FC } from 'react' +import { ThemeProvider } from 'next-themes' +import { SSRProvider, OverlayProvider } from 'react-aria' export interface State { displaySidebar: boolean @@ -63,3 +65,13 @@ function uiReducer(state: State, action: Action) { } } } + +export const ManagedUIContext: FC = ({ children }) => ( + + + + {children} + + + +) diff --git a/config.json b/config.json deleted file mode 100644 index 6c279ee04..000000000 --- a/config.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "seo": { - "title": "ACME Storefront | Powered by Next.js Commerce", - "titleTemplate": "%s - ACME Storefront", - "description": "Next.js Commerce -> https://www.nextjs.org/commerce", - "openGraph": { - "type": "website", - "locale": "en_IE", - "url": "https://nextjs.org/commerce", - "site_name": "Next.js Commerce" - }, - "twitter": { - "handle": "@nextjs", - "site": "@nextjs", - "cardType": "summary_large_image" - } - } -} diff --git a/config/seo.json b/config/seo.json new file mode 100644 index 000000000..0d0c3d37d --- /dev/null +++ b/config/seo.json @@ -0,0 +1,16 @@ +{ + "title": "ACME Storefront | Powered by Next.js Commerce", + "titleTemplate": "%s - ACME Storefront", + "description": "Next.js Commerce -> https://www.nextjs.org/commerce", + "openGraph": { + "type": "website", + "locale": "en_IE", + "url": "https://nextjs.org/commerce", + "site_name": "Next.js Commerce" + }, + "twitter": { + "handle": "@nextjs", + "site": "@nextjs", + "cardType": "summary_large_image" + } +} diff --git a/pages/_app.tsx b/pages/_app.tsx index dfa00b6aa..8b95bcf40 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -3,11 +3,10 @@ import '@assets/tailwind.css' import '@assets/utils.css' import 'animate.css' import { FC } from 'react' -import { DefaultSeo } from 'next-seo' import type { AppProps } from 'next/app' -import Head from 'next/head' -import config from '../config.json' +import { ManagedUIContext } from '@components/ui/context' +import { Head } from '@components/core' const Noop: FC = ({ children }) => <>{children} @@ -16,14 +15,12 @@ export default function MyApp({ Component, pageProps }: AppProps) { return ( <> - - - - - - - - + + + + + + ) } diff --git a/tsconfig.json b/tsconfig.json index 4760611cc..e6b6b9c9c 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -18,7 +18,8 @@ "@lib/*": ["lib/*"], "@assets/*": ["assets/*"], "@components/*": ["components/*"], - "@utils/*": ["utils/*"] + "@utils/*": ["utils/*"], + "@config/*": ["config/*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"],