mirror of
https://github.com/vercel/commerce.git
synced 2025-07-22 12:24:18 +00:00
feat: layout CheckoutPage
This commit is contained in:
parent
ee3a331696
commit
d5c0aba8a2
@ -1,6 +1,5 @@
|
||||
import { Layout } from 'src/components/common';
|
||||
import { LayoutCheckout } from 'src/components/common';
|
||||
import { CheckoutPage } from 'src/components/modules/checkout';
|
||||
import { HomeBanner, HomeCategories, HomeCollection, HomeCTA, HomeFeature, HomeRecipe, HomeSubscribe, HomeVideo } from 'src/components/modules/home';
|
||||
|
||||
export default function Checkout() {
|
||||
return (
|
||||
@ -10,4 +9,4 @@ export default function Checkout() {
|
||||
)
|
||||
}
|
||||
|
||||
Checkout.Layout = Layout
|
||||
Checkout.Layout = LayoutCheckout
|
||||
|
@ -0,0 +1,17 @@
|
||||
@import "../../../styles/utilities";
|
||||
.layoutCheckout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
> main {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
.footer {
|
||||
@apply spacing-horizontal;
|
||||
padding-top: 3rem;
|
||||
padding-left: 3.2rem;
|
||||
padding-bottom: 3rem;
|
||||
background-color: var(--gray);
|
||||
}
|
||||
}
|
20
src/components/common/LayoutCheckout/LayoutCheckout.tsx
Normal file
20
src/components/common/LayoutCheckout/LayoutCheckout.tsx
Normal file
@ -0,0 +1,20 @@
|
||||
import s from './LayoutCheckout.module.scss'
|
||||
|
||||
interface Props {
|
||||
children?: any,
|
||||
}
|
||||
|
||||
const LayoutCheckout = ({ children }: Props) => {
|
||||
return (
|
||||
<div className={s.layoutCheckout}>
|
||||
<main>{children}</main>
|
||||
<footer className={s.footer}>
|
||||
<div>
|
||||
© 2021 Online Grocery
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default LayoutCheckout
|
@ -47,3 +47,4 @@ export { default as StaticImage} from './StaticImage/StaticImage'
|
||||
export { default as EmptyCommon} from './EmptyCommon/EmptyCommon'
|
||||
export { default as CustomShapeSvg} from './CustomShapeSvg/CustomShapeSvg'
|
||||
export { default as RecommendedRecipes} from './RecommendedRecipes/RecommendedRecipes'
|
||||
export { default as LayoutCheckout} from './LayoutCheckout/LayoutCheckout'
|
@ -3,7 +3,7 @@
|
||||
min-width: 100%;
|
||||
@screen lg {
|
||||
max-width: 56.3rem;
|
||||
@apply flex justify-between flex-col border-l-2 border-solid border-line;
|
||||
@apply flex justify-between flex-col;
|
||||
}
|
||||
.title {
|
||||
display: none;
|
||||
|
@ -1,11 +1,13 @@
|
||||
.warpper{
|
||||
@apply w-full;
|
||||
padding: 3.2rem;
|
||||
@screen lg {
|
||||
padding-right: 8.8rem;
|
||||
}
|
||||
.title{
|
||||
margin-bottom: 3.2rem;
|
||||
@apply flex justify-between items-center;
|
||||
.viewCart{
|
||||
margin-right: 5.6rem;
|
||||
@apply text-primary font-bold;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
|
@ -2,7 +2,10 @@
|
||||
.warpper{
|
||||
@apply u-form;
|
||||
@screen md {
|
||||
padding: 0 5.6rem;
|
||||
padding-left: 5.6rem;
|
||||
.button {
|
||||
min-width: 22rem;
|
||||
}
|
||||
}
|
||||
.bottom{
|
||||
margin-top: 2.4rem;
|
||||
|
@ -1,7 +1,7 @@
|
||||
@import "../../../../styles/utilities";
|
||||
.warrper{
|
||||
@apply flex;
|
||||
.right{
|
||||
@apply flex w-full h-full absolute;
|
||||
.right {
|
||||
display: none;
|
||||
@screen lg {
|
||||
display: block;
|
||||
@ -11,10 +11,10 @@
|
||||
min-width: 56.3rem;
|
||||
}
|
||||
}
|
||||
.left{
|
||||
@apply w-full;
|
||||
.left {
|
||||
@apply w-full border-r-2 border-solid border-line;
|
||||
}
|
||||
.mobile{
|
||||
.mobile {
|
||||
@apply hidden;
|
||||
&.isShow{
|
||||
@apply block;
|
||||
@ -22,7 +22,7 @@
|
||||
@apply hidden;
|
||||
}
|
||||
}
|
||||
.modal{
|
||||
.modal {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
position: fixed;
|
||||
left: 0;
|
||||
|
Loading…
x
Reference in New Issue
Block a user