🐛 bug: fix bug in Delivery Item

This commit is contained in:
sonnguyenkieio
2021-09-16 12:45:36 +07:00
parent 149bc296ab
commit 1b311a69a2
4 changed files with 26 additions and 10 deletions

View File

@@ -9,7 +9,7 @@ import ReOrder from './components/ReOrder/ReOrder'
interface DeliveryItemProps { interface DeliveryItemProps {
id: string; id: string;
status: "Waiting" | "Delivering" | "Delivered"; status: "waiting" | "delivering" | "delivered";
products: string[]; products: string[];
totalPrice: number; totalPrice: number;
} }
@@ -21,7 +21,7 @@ const DeliveryItem = ({ id, status, products, totalPrice } : DeliveryItemProps)
<div className={s.separator}></div> <div className={s.separator}></div>
<Products products={products} /> <Products products={products} />
<TotalPrice totalPrice={totalPrice} /> <TotalPrice totalPrice={totalPrice} />
<ReOrder show={status === "Delivered" ? true : false}/> <ReOrder visible={status === "delivered" ? true : false}/>
</section> </section>
) )
} }

View File

@@ -5,10 +5,10 @@ import s from './IdAndStatus.module.scss'
interface IdAndStatusProps { interface IdAndStatusProps {
id?: string; id?: string;
status: "Waiting" | "Delivering" | "Delivered"; status: "waiting" | "delivering" | "delivered";
} }
const IdAndStatus = ({ id, status="Waiting" } : IdAndStatusProps) => { const IdAndStatus = ({ id, status="waiting" } : IdAndStatusProps) => {
return ( return (
<div className={s.idAndStatus}> <div className={s.idAndStatus}>
<div className={s.id}> <div className={s.id}>

View File

@@ -1,9 +1,21 @@
@import '../../../../../../styles/utilities'; @import '../../../../../../styles/utilities';
.reOrder { .reOrder {
@apply hidden; @apply hidden shape-common text-white font-bold;
background-color: var(--primary);
margin-right: 1.2rem; margin-right: 1.2rem;
&.show { padding: .4rem .6rem;
@screen lg {
padding: .8rem 1.2rem;
margin-right: 2.4rem;
}
&.visible {
@apply block; @apply block;
} }
&:hover {
@apply cursor-pointer;
}
} }

View File

@@ -1,18 +1,22 @@
import classNames from "classnames" import classNames from "classnames"
import React from "react" import React from "react"
import { ButtonCommon } from "src/components/common" import { ButtonCommon } from "src/components/common"
import Link from 'next/link'
import s from './ReOrder.module.scss' import s from './ReOrder.module.scss'
interface ReOrderProps { interface ReOrderProps {
show: boolean; visible: boolean;
href?: string;
} }
const ReOrder = ({ show=false } : ReOrderProps) => { const ReOrder = ({ visible=false, href="#" } : ReOrderProps) => {
return ( return (
<div className={classNames(s.reOrder, { <div className={classNames(s.reOrder, {
[s.show]: show [s.visible]: visible
})}> })}>
<ButtonCommon>Re-Order</ButtonCommon> <Link href={href}>
<a>Re-Order</a>
</Link>
</div> </div>
) )
} }