crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-28 20:51:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

reponsive: checkout info

Browse Source
This commit is contained in:
unknown
2021-09-10 13:50:24 +07:00
parent 0947b79830
commit c712d66fa5
9 changed files with 108 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/modules/checkout/CheckoutInfo/CheckoutInfo.module.scss
View File

@@ -3,6 +3,15 @@
padding: 3.2rem;
.title{
margin-bottom: 3.2rem;
@apply flex justify-start items-center
@apply flex justify-between items-center;
.viewCart{
margin-right: 5.6rem;
@apply text-primary font-bold;
display: block;
cursor: pointer;
@screen lg {
display: none;
}
}
}
}

7
src/components/modules/checkout/CheckoutInfo/CheckoutInfo.tsx
View File

@@ -7,9 +7,11 @@ import s from './CheckoutInfo.module.scss'
import CustomerInfoForm from './components/CustomerInfoForm/CustomerInfoForm'
import PaymentInfoForm from './components/PaymentInfoForm/PaymentInfoForm'
import ShippingInfoForm from './components/ShippingInfoForm/ShippingInfoForm'
interface CheckoutInfoProps {}
interface CheckoutInfoProps {
onViewCart:()=>void
}
const CheckoutInfo = ({}: CheckoutInfoProps) => {
const CheckoutInfo = ({onViewCart}: CheckoutInfoProps) => {
const [active, setActive] = useState(1)
const [done, setDone] = useState<number[]>([])
const [info, setInfo] = useState<CheckOutForm>({})
@@ -69,6 +71,7 @@ const CheckoutInfo = ({}: CheckoutInfoProps) => {
<div className={s.warpper}>
<div className={s.title}>
<Logo />
<div className={s.viewCart} onClick={onViewCart}>View cart</div>
</div>
{formList.map((item) => {
let note = getNote(item.id)

4
src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/CustomerInfoForm.module.scss
View File

@@ -1,7 +1,9 @@
@import "../../../../../../styles/utilities";
.warpper{
@apply u-form;
padding: 0 5.6rem;
@screen md {
padding: 0 5.6rem;
}
.bottom{
margin-top: 2.4rem;
@apply flex justify-between items-center;

4
src/components/modules/checkout/CheckoutInfo/components/PaymentInfoForm/PaymentInfoForm.module.scss
View File

@@ -1,5 +1,7 @@
.wrapper{
padding: 0 5.6rem;
@screen md {
padding: 0 5.6rem;
}
.inner{
padding: 4rem 0;
}

4
src/components/modules/checkout/CheckoutInfo/components/ShippingInfoForm/ShippingInfoForm.module.scss
View File

@@ -2,7 +2,9 @@
.warpper{
@apply u-form;
padding: 0 5.6rem;
@screen md {
padding: 0 5.6rem;
}
.bottom{
margin-top: 2.4rem;
@apply flex justify-between items-center;