58 lines
1.9 KiB
TypeScript
58 lines
1.9 KiB
TypeScript
import { EyeOff, Home, Search } from "lucide-react";
|
||
import { Button } from "~/components/ui/button";
|
||
import { useNavigate } from "@remix-run/react";
|
||
|
||
export const InactiveProductView = () => {
|
||
const navigate = useNavigate();
|
||
|
||
return (
|
||
<div className="flex flex-col items-center justify-center p-4 bg-WHITE">
|
||
<div className="flex flex-col items-center gap-6 max-w-md text-center">
|
||
{/* Icon */}
|
||
<div className="w-24 h-24 rounded-full bg-WHITE3 flex items-center justify-center">
|
||
<EyeOff size={48} className="text-BLACK2" />
|
||
</div>
|
||
|
||
{/* Title */}
|
||
<h1 className="text-B24 font-bold text-BLACK">محصول غیرفعال است</h1>
|
||
|
||
{/* Description */}
|
||
<p className="text-R16 text-BLACK2 leading-relaxed">
|
||
این محصول در حال حاضر توسط فروشنده غیرفعال شده است و امکان خرید آن
|
||
وجود ندارد.
|
||
</p>
|
||
|
||
{/* Additional Info */}
|
||
<div className="w-full p-4 bg-WHITE3 rounded-lg">
|
||
<p className="text-R14 text-BLACK2">
|
||
ممکن است این محصول موقتاً موجود نباشد یا فروشنده آن را از فروش خارج
|
||
کرده باشد.
|
||
</p>
|
||
</div>
|
||
|
||
{/* Action Buttons */}
|
||
<div className="flex flex-col gap-3 w-full mt-4">
|
||
<Button
|
||
variant="dark"
|
||
size="lg"
|
||
className="w-full font-bold"
|
||
onClick={() => navigate("/")}
|
||
>
|
||
<Home size={20} />
|
||
بازگشت به صفحه اصلی
|
||
</Button>
|
||
<Button
|
||
variant="outline"
|
||
size="lg"
|
||
className="w-full font-bold"
|
||
onClick={() => navigate("/explore")}
|
||
>
|
||
<Search size={20} />
|
||
جستجوی محصولات دیگر
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|