Arda Samadi
96034fe61a
- cart checkout (/cart/$cartId): steps on the left, sticky order summary on the right at lg (1320px container); CartSummary becomes an inline card on desktop (fixed bottom bar on mobile) - profile (/profile): contained account layout; menu becomes a 2-col card grid on desktop with a heading - MyLayout: desktop gate now includes /cart/* and /profile
38 lines
1.4 KiB
TypeScript
38 lines
1.4 KiB
TypeScript
import { Loader2 } from "lucide-react";
|
||
import { formatPrice } from "../../utils/helpers";
|
||
import { Button } from "../ui/button";
|
||
|
||
interface CartSummaryProps {
|
||
total: string;
|
||
onContinue: () => void;
|
||
step: number;
|
||
isLoading: boolean;
|
||
}
|
||
|
||
export const CartSummary = ({
|
||
total,
|
||
onContinue,
|
||
step,
|
||
isLoading,
|
||
}: CartSummaryProps) => (
|
||
<div className="max-w-md mx-auto fixed flex flex-row gap-2 w-full bottom-[50px] left-0 right-0 border-t py-1 px-2 z-50 bg-WHITE lg:static lg:max-w-none lg:mx-0 lg:bottom-auto lg:flex-col-reverse lg:gap-4 lg:border lg:border-WHITE3 lg:rounded-xl lg:p-5 lg:z-auto">
|
||
<Button
|
||
variant="dark"
|
||
size="lg"
|
||
className="w-full flex-1 font-bold bg-VITROWN_BLUE active:bg-VITROWN_BLUE hover:bg-VITROWN_BLUE text-white"
|
||
onClick={onContinue}
|
||
disabled={isLoading}
|
||
>
|
||
{isLoading && <Loader2 className="w-4 h-4 animate-spin" />}
|
||
{step === 0 || step === 1 ? "ثبت و ادامه" : "تایید و پرداخت"}
|
||
</Button>
|
||
<div className="flex-1 gap-2 w-full flex flex-col items-center justify-center">
|
||
<p className="text-B14 font-bold text-GRAY">مبلغ کل فاکتور:</p>
|
||
<p className="text-B14 font-bold">{formatPrice(total)} تومان</p>
|
||
{step === 2 && (
|
||
<p className="text-R10 text-GRAY">۱۰٪ مالیات به مبلغ نهایی اضافه میشود</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|