90 lines
2.8 KiB
TypeScript
90 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import { useFavorites } from "@/lib/hooks";
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
import { useTranslations } from "next-intl";
|
|
import ProductCard from "@/features/home/components/ProductCard";
|
|
import type { Favorite } from "@/lib/types/api";
|
|
import EmptyFavorites from "@/features/favorites/components/EmptyFavorites";
|
|
import ErrorPage from "@/components/ErrorPage";
|
|
export default function FavoritesPage() {
|
|
const t = useTranslations();
|
|
const { data: favorites, isLoading, isError } = useFavorites();
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="mx-auto px-2 md:px-4 lg:px-6 pb-12 space-y-8 max-w-[1504px]">
|
|
<h1 className="bg-white text-3xl p-4 font-bold mb-0 pb-6">
|
|
{t("favorite_products")}
|
|
</h1>
|
|
<div className="bg-white grid grid-cols-2 sm:grid-cols-3 rounded-b-lg md:grid-cols-4 lg:grid-cols-5 gap-3 p-4">
|
|
{Array.from({ length: 10 }).map((_, i) => (
|
|
<div key={i} className="space-y-2">
|
|
<Skeleton className="w-full h-[260px] rounded-xl" />
|
|
<Skeleton className="h-4 w-3/4 mx-2" />
|
|
<Skeleton className="h-6 w-1/2 mx-2" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (isError) {
|
|
return <ErrorPage />;
|
|
}
|
|
|
|
if (!favorites || favorites.length === 0) {
|
|
return <EmptyFavorites />;
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className=" mx-auto px-2 md:px-4 lg:px-6 pb-12 space-y-8 max-w-[1504px]
|
|
"
|
|
>
|
|
<h1 className="bg-white text-3xl p-4 font-bold mb-0 pb-6">
|
|
{t("favorite_products")}
|
|
</h1>
|
|
<div className="bg-white grid grid-cols-2 sm:grid-cols-3 rounded-b-lg md:grid-cols-4 lg:grid-cols-5 gap-3 p-4">
|
|
{favorites.map((favorite: Favorite) => {
|
|
const product = favorite.product;
|
|
|
|
const allImages = product.media
|
|
?.map(
|
|
(media) =>
|
|
media.images_800x800 ||
|
|
media.images_720x720 ||
|
|
media.images_400x400 ||
|
|
media.thumbnail
|
|
)
|
|
.filter(Boolean) || ["/placeholder-product.jpg"];
|
|
|
|
const formattedPrice = product.price_amount
|
|
? `${parseFloat(product.price_amount).toFixed(2)} TMT`
|
|
: "Price not available";
|
|
|
|
return (
|
|
<ProductCard
|
|
key={product.id}
|
|
id={product.id}
|
|
name={product.name}
|
|
price={
|
|
product.price_amount ? parseFloat(product.price_amount) : null
|
|
}
|
|
struct_price_text={formattedPrice}
|
|
images={allImages}
|
|
labels={[]}
|
|
price_color="#0059ff"
|
|
height={360}
|
|
width={250}
|
|
button={false}
|
|
stock={product.stock}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|