forked from crowetic/commerce
Merge branch 'master' of https://github.com/okbel/e-comm-example
This commit is contained in:
commit
698c2fb7df
@ -1 +1,2 @@
|
|||||||
export { default as CartSidebarView } from './CartSidebarView'
|
export { default as CartSidebarView } from './CartSidebarView'
|
||||||
|
export { default as CartItem } from './CartItem'
|
||||||
|
@ -3,7 +3,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
@apply h-10 px-2 rounded-md border border-accents-2 flex items-center space-x-2 justify-center;
|
@apply h-10 px-2 rounded-md border border-accents-2 flex items-center space-x-2 justify-center outline-none focus:outline-none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdownMenu {
|
.dropdownMenu {
|
||||||
|
@ -36,7 +36,6 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
|
|||||||
}
|
}
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
console.log(displaySidebar, displayDropdown)
|
|
||||||
usePreventScroll({
|
usePreventScroll({
|
||||||
isDisabled: !displaySidebar,
|
isDisabled: !displaySidebar,
|
||||||
})
|
})
|
||||||
|
@ -3,10 +3,6 @@
|
|||||||
min-width: 300px;
|
min-width: 300px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input:focus {
|
|
||||||
@apply outline-none shadow-outline-gray;
|
|
||||||
}
|
|
||||||
|
|
||||||
.iconContainer {
|
.iconContainer {
|
||||||
@apply absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none;
|
@apply absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none;
|
||||||
}
|
}
|
||||||
|
@ -10,6 +10,21 @@ interface DropdownMenuProps {
|
|||||||
open: boolean
|
open: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const LINKS = [
|
||||||
|
{
|
||||||
|
name: 'My Orders',
|
||||||
|
href: '/orders',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'My Profile',
|
||||||
|
href: '/profile',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Cart',
|
||||||
|
href: '/cart',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
const DropdownMenu: FC<DropdownMenuProps> = ({ open = false }) => {
|
const DropdownMenu: FC<DropdownMenuProps> = ({ open = false }) => {
|
||||||
const { theme, setTheme } = useTheme()
|
const { theme, setTheme } = useTheme()
|
||||||
|
|
||||||
@ -24,39 +39,36 @@ const DropdownMenu: FC<DropdownMenuProps> = ({ open = false }) => {
|
|||||||
leaveTo="transform opacity-0 scale-95"
|
leaveTo="transform opacity-0 scale-95"
|
||||||
>
|
>
|
||||||
<Menu.Items className={s.dropdownMenu}>
|
<Menu.Items className={s.dropdownMenu}>
|
||||||
|
{LINKS.map(({ name, href }) => (
|
||||||
|
<Link href={href}>
|
||||||
|
<Menu.Item key={href}>
|
||||||
|
{({ active }) => (
|
||||||
|
<a className={cn(s.link, { [s.active]: active })}>{name}</a>
|
||||||
|
)}
|
||||||
|
</Menu.Item>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
<Menu.Item>
|
<Menu.Item>
|
||||||
{({ active }) => <a className={s.link}>My Purchases</a>}
|
<a
|
||||||
|
className={cn(s.link, 'justify-between')}
|
||||||
|
onClick={() =>
|
||||||
|
theme === 'dark' ? setTheme('light') : setTheme('dark')
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
Theme: <strong>{theme}</strong>{' '}
|
||||||
|
</div>
|
||||||
|
<div className="ml-3">
|
||||||
|
{theme == 'dark' ? (
|
||||||
|
<Moon width={20} height={20} />
|
||||||
|
) : (
|
||||||
|
<Sun width="20" height={20} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
</Menu.Item>
|
</Menu.Item>
|
||||||
<Menu.Item>
|
<Menu.Item>
|
||||||
{({ active }) => <a className={s.link}>My Account</a>}
|
<a className={cn(s.link, 'border-t border-accents-2 mt-4')}>Logout</a>
|
||||||
</Menu.Item>
|
|
||||||
<Menu.Item>
|
|
||||||
{({ active }) => (
|
|
||||||
<a
|
|
||||||
className={cn(s.link, 'justify-between')}
|
|
||||||
onClick={() =>
|
|
||||||
theme === 'dark' ? setTheme('light') : setTheme('dark')
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
Theme: <strong>{theme}</strong>{' '}
|
|
||||||
</div>
|
|
||||||
<div className="ml-3">
|
|
||||||
{theme == 'dark' ? (
|
|
||||||
<Moon width={20} height={20} />
|
|
||||||
) : (
|
|
||||||
<Sun width="20" height={20} />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
)}
|
|
||||||
</Menu.Item>
|
|
||||||
<Menu.Item>
|
|
||||||
{({ active }) => (
|
|
||||||
<a className={cn(s.link, 'border-t border-accents-2 mt-4')}>
|
|
||||||
Logout
|
|
||||||
</a>
|
|
||||||
)}
|
|
||||||
</Menu.Item>
|
</Menu.Item>
|
||||||
</Menu.Items>
|
</Menu.Items>
|
||||||
</Transition>
|
</Transition>
|
||||||
|
@ -2,9 +2,6 @@
|
|||||||
@apply relative;
|
@apply relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mainContainer {
|
|
||||||
}
|
|
||||||
|
|
||||||
.list {
|
.list {
|
||||||
@apply flex flex-row items-center justify-items-end h-full;
|
@apply flex flex-row items-center justify-items-end h-full;
|
||||||
}
|
}
|
||||||
@ -25,3 +22,11 @@
|
|||||||
@apply outline-none;
|
@apply outline-none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bagCount {
|
||||||
|
@apply border border-accents-1 bg-secondary text-secondary h-4 w-4 absolute rounded-full right-3 top-3 flex items-center justify-center font-bold text-xs;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatarButton {
|
||||||
|
@apply inline-flex justify-center rounded-full outline-none focus:outline-none;
|
||||||
|
}
|
||||||
|
@ -1,9 +1,9 @@
|
|||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
import cn from 'classnames'
|
import cn from 'classnames'
|
||||||
import s from './UserNav.module.css'
|
import s from './UserNav.module.css'
|
||||||
import { FC, useRef } from 'react'
|
import { FC } from 'react'
|
||||||
import { Avatar } from '@components/core'
|
|
||||||
import { Heart, Bag } from '@components/icon'
|
import { Heart, Bag } from '@components/icon'
|
||||||
|
import { Avatar } from '@components/core'
|
||||||
import { useUI } from '@components/ui/context'
|
import { useUI } from '@components/ui/context'
|
||||||
import DropdownMenu from './DropdownMenu'
|
import DropdownMenu from './DropdownMenu'
|
||||||
import { Menu } from '@headlessui/react'
|
import { Menu } from '@headlessui/react'
|
||||||
@ -20,9 +20,7 @@ const countItems = (count: number, items: any[]) =>
|
|||||||
const UserNav: FC<Props> = ({ className, children, ...props }) => {
|
const UserNav: FC<Props> = ({ className, children, ...props }) => {
|
||||||
const { data } = useCart()
|
const { data } = useCart()
|
||||||
const { openSidebar, closeSidebar, displaySidebar } = useUI()
|
const { openSidebar, closeSidebar, displaySidebar } = useUI()
|
||||||
|
|
||||||
const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)
|
const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)
|
||||||
let ref = useRef() as React.MutableRefObject<HTMLInputElement>
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<nav className={cn(s.root, className)}>
|
<nav className={cn(s.root, className)}>
|
||||||
@ -33,11 +31,7 @@ const UserNav: FC<Props> = ({ className, children, ...props }) => {
|
|||||||
onClick={() => (displaySidebar ? closeSidebar() : openSidebar())}
|
onClick={() => (displaySidebar ? closeSidebar() : openSidebar())}
|
||||||
>
|
>
|
||||||
<Bag />
|
<Bag />
|
||||||
{itemsCount > 0 && (
|
{itemsCount > 0 && <span className={s.bagCount}>{itemsCount}</span>}
|
||||||
<span className="border border-accent-1 bg-secondary text-secondary h-4 w-4 absolute rounded-full right-3 top-3 flex items-center justify-center font-bold text-xs">
|
|
||||||
{itemsCount}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</li>
|
</li>
|
||||||
<Link href="/wishlist">
|
<Link href="/wishlist">
|
||||||
<li className={s.item}>
|
<li className={s.item}>
|
||||||
@ -46,16 +40,14 @@ const UserNav: FC<Props> = ({ className, children, ...props }) => {
|
|||||||
</Link>
|
</Link>
|
||||||
<li className={s.item}>
|
<li className={s.item}>
|
||||||
<Menu>
|
<Menu>
|
||||||
{({ open }) => {
|
{({ open }) => (
|
||||||
return (
|
<>
|
||||||
<>
|
<Menu.Button className={s.avatarButton}>
|
||||||
<Menu.Button className="inline-flex justify-center rounded-full">
|
<Avatar />
|
||||||
<Avatar />
|
</Menu.Button>
|
||||||
</Menu.Button>
|
<DropdownMenu open={open} />
|
||||||
<DropdownMenu open={open} />
|
</>
|
||||||
</>
|
)}
|
||||||
)
|
|
||||||
}}
|
|
||||||
</Menu>
|
</Menu>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
@ -1 +0,0 @@
|
|||||||
import { Colors } from '@components/ui/types'
|
|
@ -6,3 +6,7 @@
|
|||||||
.modal {
|
.modal {
|
||||||
@apply bg-primary p-12 border border-accents-2;
|
@apply bg-primary p-12 border border-accents-2;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.modal:focus {
|
||||||
|
@apply outline-none;
|
||||||
|
}
|
||||||
|
11
components/ui/Text/Text.module.css
Normal file
11
components/ui/Text/Text.module.css
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
.body {
|
||||||
|
@apply text-lg leading-7 font-medium max-w-6xl mx-auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heading {
|
||||||
|
@apply text-5xl mb-12;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pageHeading {
|
||||||
|
@apply pt-1 pb-4 text-2xl leading-7 font-bold text-base tracking-wide;
|
||||||
|
}
|
56
components/ui/Text/Text.tsx
Normal file
56
components/ui/Text/Text.tsx
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
import React, {
|
||||||
|
FunctionComponent,
|
||||||
|
JSXElementConstructor,
|
||||||
|
CSSProperties,
|
||||||
|
} from 'react'
|
||||||
|
import cn from 'classnames'
|
||||||
|
import s from './Text.module.css'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
variant?: Variant
|
||||||
|
className?: string
|
||||||
|
style?: CSSProperties
|
||||||
|
children: React.ReactNode | any
|
||||||
|
}
|
||||||
|
|
||||||
|
type Variant = 'heading' | 'body' | 'pageHeading'
|
||||||
|
|
||||||
|
const Text: FunctionComponent<Props> = ({
|
||||||
|
style,
|
||||||
|
className = '',
|
||||||
|
variant = 'body',
|
||||||
|
children,
|
||||||
|
}) => {
|
||||||
|
const componentsMap: {
|
||||||
|
[P in Variant]: React.ComponentType<any> | string
|
||||||
|
} = {
|
||||||
|
body: 'p',
|
||||||
|
heading: 'h1',
|
||||||
|
pageHeading: 'h1',
|
||||||
|
}
|
||||||
|
|
||||||
|
const Component:
|
||||||
|
| JSXElementConstructor<any>
|
||||||
|
| React.ReactElement<any>
|
||||||
|
| React.ComponentType<any>
|
||||||
|
| string = componentsMap![variant!]
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Component
|
||||||
|
className={cn(
|
||||||
|
s.root,
|
||||||
|
{
|
||||||
|
[s.body]: variant === 'body',
|
||||||
|
[s.heading]: variant === 'heading',
|
||||||
|
[s.pageHeading]: variant === 'pageHeading',
|
||||||
|
},
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
style={style}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</Component>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Text
|
1
components/ui/Text/index.ts
Normal file
1
components/ui/Text/index.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export { default } from './Text'
|
@ -8,3 +8,4 @@ export { default as Container } from './Container'
|
|||||||
export { default as LoadingDots } from './LoadingDots'
|
export { default as LoadingDots } from './LoadingDots'
|
||||||
export { default as Skeleton } from './Skeleton'
|
export { default as Skeleton } from './Skeleton'
|
||||||
export { default as Modal } from './Modal'
|
export { default as Modal } from './Modal'
|
||||||
|
export { default as Text } from './Text'
|
||||||
|
@ -1 +0,0 @@
|
|||||||
export type Colors = 'violet' | 'black' | 'pink' | 'white'
|
|
126
pages/cart.tsx
126
pages/cart.tsx
@ -1,7 +1,12 @@
|
|||||||
import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
|
import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
|
||||||
import getAllPages from '@lib/bigcommerce/api/operations/get-all-pages'
|
import getAllPages from '@lib/bigcommerce/api/operations/get-all-pages'
|
||||||
import { Layout } from '@components/core'
|
import { Layout } from '@components/core'
|
||||||
import { Container } from '@components/ui'
|
import { Button } from '@components/ui'
|
||||||
|
import { Bag, Cross, Check } from '@components/icon'
|
||||||
|
import useCart from '@lib/bigcommerce/cart/use-cart'
|
||||||
|
import usePrice from '@lib/bigcommerce/use-price'
|
||||||
|
import { CartItem } from '@components/cart'
|
||||||
|
import { Text } from '@components/ui'
|
||||||
|
|
||||||
export async function getStaticProps({ preview }: GetStaticPropsContext) {
|
export async function getStaticProps({ preview }: GetStaticPropsContext) {
|
||||||
const { pages } = await getAllPages()
|
const { pages } = await getAllPages()
|
||||||
@ -10,16 +15,121 @@ export async function getStaticProps({ preview }: GetStaticPropsContext) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function Home({}: InferGetStaticPropsType<
|
export default function Cart({}: InferGetStaticPropsType<
|
||||||
typeof getStaticProps
|
typeof getStaticProps
|
||||||
>) {
|
>) {
|
||||||
|
const { data, isEmpty } = useCart()
|
||||||
|
const { price: subTotal } = usePrice(
|
||||||
|
data && {
|
||||||
|
amount: data.base_amount,
|
||||||
|
currencyCode: data.currency.code,
|
||||||
|
}
|
||||||
|
)
|
||||||
|
const { price: total } = usePrice(
|
||||||
|
data && {
|
||||||
|
amount: data.cart_amount,
|
||||||
|
currencyCode: data.currency.code,
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
const items = data?.line_items.physical_items ?? []
|
||||||
|
|
||||||
|
const error = null
|
||||||
|
const success = null
|
||||||
return (
|
return (
|
||||||
<Container>
|
<div className="grid lg:grid-cols-12">
|
||||||
<h2 className="pt-1 pb-4 text-2xl leading-7 font-bold text-base tracking-wide">
|
<div className="lg:col-span-8">
|
||||||
My Cart
|
{isEmpty ? (
|
||||||
</h2>
|
<div className="flex-1 px-4 flex flex-col justify-center items-center ">
|
||||||
</Container>
|
<span className="border border-dashed border-white rounded-full flex items-center justify-center w-16 h-16 bg-black p-12 rounded-lg text-white">
|
||||||
|
<Bag className="absolute" />
|
||||||
|
</span>
|
||||||
|
<h2 className="pt-6 text-2xl font-bold tracking-wide text-center">
|
||||||
|
Your cart is empty
|
||||||
|
</h2>
|
||||||
|
<p className="text-accents-2 px-10 text-center pt-2">
|
||||||
|
Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
) : error ? (
|
||||||
|
<div className="flex-1 px-4 flex flex-col justify-center items-center">
|
||||||
|
<span className="border border-white rounded-full flex items-center justify-center w-16 h-16">
|
||||||
|
<Cross width={24} height={24} />
|
||||||
|
</span>
|
||||||
|
<h2 className="pt-6 text-xl font-light text-center">
|
||||||
|
We couldn’t process the purchase. Please check your card
|
||||||
|
information and try again.
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
) : success ? (
|
||||||
|
<div className="flex-1 px-4 flex flex-col justify-center items-center">
|
||||||
|
<span className="border border-white rounded-full flex items-center justify-center w-16 h-16">
|
||||||
|
<Check />
|
||||||
|
</span>
|
||||||
|
<h2 className="pt-6 text-xl font-light text-center">
|
||||||
|
Thank you for your order.
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="px-4 sm:px-6 flex-1">
|
||||||
|
<h2 className="pt-1 pb-4 text-2xl leading-7 font-bold text-base tracking-wide">
|
||||||
|
My Cart
|
||||||
|
</h2>
|
||||||
|
<ul className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-accents-2 border-t border-accents-2">
|
||||||
|
{items.map((item) => (
|
||||||
|
<CartItem
|
||||||
|
key={item.id}
|
||||||
|
item={item}
|
||||||
|
currencyCode={data?.currency.code!}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
<hr className="mb-6" />
|
||||||
|
<Text>
|
||||||
|
Before you leave, take a look at these items. We picked them just
|
||||||
|
for you
|
||||||
|
</Text>
|
||||||
|
<div className="flex py-6 space-x-2">
|
||||||
|
{[1, 2, 3, 4, 5, 6].map((x) => (
|
||||||
|
<div className="border border-accents-3 w-full h-24 bg-accents-2 bg-opacity-50" />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="lg:col-span-4">
|
||||||
|
<div className="flex-shrink-0 px-4 py-12 sm:px-6">
|
||||||
|
<div className="border-t border-accents-2">
|
||||||
|
<ul className="py-3">
|
||||||
|
<li className="flex justify-between py-1">
|
||||||
|
<span>Subtotal</span>
|
||||||
|
<span>{subTotal}</span>
|
||||||
|
</li>
|
||||||
|
<li className="flex justify-between py-1">
|
||||||
|
<span>Taxes</span>
|
||||||
|
<span>Calculated at checkout</span>
|
||||||
|
</li>
|
||||||
|
<li className="flex justify-between py-1">
|
||||||
|
<span>Estimated Shipping</span>
|
||||||
|
<span className="font-bold tracking-wide">FREE</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div className="flex justify-between border-t border-accents-2 py-3 font-bold mb-10">
|
||||||
|
<span>Total</span>
|
||||||
|
<span>{total}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-row justify-end">
|
||||||
|
<div className="w-full lg:w-72">
|
||||||
|
<Button href="/checkout" Component="a" width="100%">
|
||||||
|
Proceed to Checkout
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
Home.Layout = Layout
|
Cart.Layout = Layout
|
||||||
|
33
pages/forgot-password.tsx
Normal file
33
pages/forgot-password.tsx
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
import { Layout } from '@components/core'
|
||||||
|
import { Logo, Modal, Button } from '@components/ui'
|
||||||
|
export default function ForgotPassword() {
|
||||||
|
return (
|
||||||
|
<div className="pb-20">
|
||||||
|
<Modal close={() => {}}>
|
||||||
|
<div className="h-80 w-80 flex flex-col justify-between py-3 px-3">
|
||||||
|
<div className="flex justify-center pb-12 ">
|
||||||
|
<Logo width="64px" height="64px" />
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col space-y-3">
|
||||||
|
<div className="border border-accents-3 text-accents-6">
|
||||||
|
<input
|
||||||
|
placeholder="Email"
|
||||||
|
className="focus:outline-none bg-primary focus:shadow-outline-gray border-none py-2 px-6 w-full appearance-none transition duration-150 ease-in-out placeholder-accents-5 pr-10"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Button variant="slim">Recover Password</Button>
|
||||||
|
<span className="pt-3 text-center text-sm">
|
||||||
|
<span className="text-accents-7">Don't have an account?</span>
|
||||||
|
{` `}
|
||||||
|
<a className="text-accent-9 font-bold hover:underline cursor-pointer">
|
||||||
|
Sign Up
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
ForgotPassword.Layout = Layout
|
12
pages/orders.tsx
Normal file
12
pages/orders.tsx
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
import { Layout } from '@components/core'
|
||||||
|
import { Container, Text } from '@components/ui'
|
||||||
|
|
||||||
|
export default function Orders() {
|
||||||
|
return (
|
||||||
|
<Container>
|
||||||
|
<Text variant="pageHeading">My Orders</Text>
|
||||||
|
</Container>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
Orders.Layout = Layout
|
12
pages/profile.tsx
Normal file
12
pages/profile.tsx
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
import { Layout } from '@components/core'
|
||||||
|
import { Container, Text } from '@components/ui'
|
||||||
|
|
||||||
|
export default function Profile() {
|
||||||
|
return (
|
||||||
|
<Container>
|
||||||
|
<Text variant="pageHeading">My Profile</Text>
|
||||||
|
</Container>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
Profile.Layout = Layout
|
@ -1,7 +1,7 @@
|
|||||||
import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
|
import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
|
||||||
import getAllPages from '@lib/bigcommerce/api/operations/get-all-pages'
|
import getAllPages from '@lib/bigcommerce/api/operations/get-all-pages'
|
||||||
import { Layout } from '@components/core'
|
import { Layout } from '@components/core'
|
||||||
import { Container } from '@components/ui'
|
import { Container, Text } from '@components/ui'
|
||||||
import { WishlistCard } from '@components/wishlist'
|
import { WishlistCard } from '@components/wishlist'
|
||||||
|
|
||||||
import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info'
|
import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info'
|
||||||
@ -35,12 +35,10 @@ export default function Home({
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-span-8">
|
<div className="col-span-8">
|
||||||
<h2 className="pt-1 px-3 pb-4 text-2xl leading-7 font-bold text-base tracking-wide">
|
<Text variant="pageHeading">My Wishlist</Text>
|
||||||
My Wishlist
|
|
||||||
</h2>
|
|
||||||
<div className="group flex flex-col">
|
<div className="group flex flex-col">
|
||||||
{[1, 2, 3, 4, 5, 6].map((i) => (
|
{[1, 2, 3, 4, 5, 6].map((i) => (
|
||||||
<WishlistCard />
|
<WishlistCard key={i} />
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -3,7 +3,7 @@ module.exports = {
|
|||||||
removeDeprecatedGapUtilities: true,
|
removeDeprecatedGapUtilities: true,
|
||||||
purgeLayersByDefault: true,
|
purgeLayersByDefault: true,
|
||||||
},
|
},
|
||||||
purge: ['./components/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}'],
|
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
|
||||||
theme: {
|
theme: {
|
||||||
extend: {
|
extend: {
|
||||||
maxWidth: {
|
maxWidth: {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user