diff options
Diffstat (limited to 'src-migrate/modules/cart/components/CartSummaryMobile.tsx')
| -rw-r--r-- | src-migrate/modules/cart/components/CartSummaryMobile.tsx | 36 |
1 files changed, 22 insertions, 14 deletions
diff --git a/src-migrate/modules/cart/components/CartSummaryMobile.tsx b/src-migrate/modules/cart/components/CartSummaryMobile.tsx index 02258204..7a334fed 100644 --- a/src-migrate/modules/cart/components/CartSummaryMobile.tsx +++ b/src-migrate/modules/cart/components/CartSummaryMobile.tsx @@ -29,7 +29,7 @@ const CartSummaryMobile = ({ isLoaded = false, }: Props) => { const [showPopup, setShowPopup] = useState(false); - const PPN : number = process.env.NEXT_PUBLIC_PPN ? parseFloat(process.env.NEXT_PUBLIC_PPN) : 0; + const PPN: number = process.env.NEXT_PUBLIC_PPN ? parseFloat(process.env.NEXT_PUBLIC_PPN) : 0; return ( <> <BottomPopup @@ -88,22 +88,30 @@ const CartSummaryMobile = ({ </div> </BottomPopup> <div className='flex flex-col gap-y-3'> - <Skeleton isLoaded={isLoaded} className={style.line}> - <span className={clsxm(style.label, style.grandTotal)}> + <Skeleton + isLoaded={isLoaded} + className={clsxm(style.line, 'flex items-center justify-between !py-2')} + > + {/* Left: label */} + <span className={clsxm(style.label, style.grandTotal, 'leading-tight')}> Grand Total </span> - <button - onClick={() => setShowPopup(true)} - className='bg-gray-300 w-6 h-6 items-center justify-center cursor-pointer hover:bg-red-400 md:hidden ' - > - <ChevronDownIcon className='h-6 w-6 text-white' /> - </button> - </Skeleton> - <Skeleton isLoaded={isLoaded} className={style.line}> - <span className={style.value}> - Rp {formatCurrency(grandTotal || 0)} - </span> + + {/* Right: amount + chevron */} + <div className="flex items-center gap-2"> + <span className={clsxm(style.value, 'whitespace-nowrap tabular-nums leading-tight')}> + Rp {formatCurrency(grandTotal || 0)} + </span> + <button + onClick={() => setShowPopup(true)} + aria-label="Expand ringkasan" + className="md:hidden flex w-5 h-5 items-center justify-center rounded bg-gray-300 hover:bg-gray-400" + > + <ChevronDownIcon className="h-4 w-4 text-white" /> + </button> + </div> </Skeleton> + </div> </> ); |
