75 lines
2.1 KiB
TypeScript
75 lines
2.1 KiB
TypeScript
import { ArrowRight } from "lucide-react";
|
|
import { CartDetail } from "src/api/types";
|
|
import SellerLogo from "../SellerLogo";
|
|
import { useNavigate } from "@remix-run/react";
|
|
import { safeGoBack } from "~/utils/helpers";
|
|
|
|
interface CartHeaderProps {
|
|
cart: CartDetail | null | undefined;
|
|
step: number;
|
|
setStep: React.Dispatch<React.SetStateAction<number>>;
|
|
}
|
|
|
|
export const CartHeader = ({ cart, step, setStep }: CartHeaderProps) => {
|
|
const navigate = useNavigate();
|
|
return (
|
|
<div
|
|
className={`flex flex-col gap-3 pt-4 sticky top-0 z-30 bg-WHITE w-full items-center justify-center ${step !== 0 ? "pb-4" : ""}`}
|
|
>
|
|
<p className={"text-B16 font-bold px-4"}>
|
|
{step === 0
|
|
? "سبد خرید"
|
|
: step === 1
|
|
? "اطلاعات ارسال"
|
|
: "اطلاعات تحویل گیرنده وپرداخت"}
|
|
</p>
|
|
|
|
<ArrowRight
|
|
onClick={() => {
|
|
if (step > 0) setStep((p) => p - 1);
|
|
else safeGoBack(navigate);
|
|
}}
|
|
className="absolute top-4 right-4"
|
|
/>
|
|
{cart && cart.items && cart.items.length > 0 && (
|
|
<>
|
|
<StepIndicator currentStep={step} />
|
|
{step === 0 && (
|
|
<a
|
|
href={`/seller/${cart.seller?.username}`}
|
|
className="flex px-4 gap-2 h-[65px] border-b w-full justify-center items-center"
|
|
>
|
|
<SellerLogo
|
|
size="sm"
|
|
src={cart.seller?.logo}
|
|
alt={"seller-image"}
|
|
/>
|
|
<div className="flex flex-col items-center justify-center">
|
|
<p className="text-B12 font-bold text-overflow-ellipsis overflow-hidden whitespace-nowrap">
|
|
{cart.seller?.name}
|
|
</p>
|
|
</div>
|
|
</a>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// Step Indicator Component
|
|
const StepIndicator = ({ currentStep }: { currentStep: number }) => (
|
|
<div className="w-full px-4 gap-4 flex pt-2">
|
|
{Array(3)
|
|
.fill(0)
|
|
.map((_, index) => (
|
|
<div
|
|
key={index}
|
|
className={`w-full h-[6px] rounded-md ${
|
|
currentStep >= index ? "bg-BLACK" : "bg-GRAY2"
|
|
}`}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|