122 lines
3.9 KiB
TypeScript
122 lines
3.9 KiB
TypeScript
'use client';
|
|
|
|
import { product_api } from '@/shared/config/api/product/api';
|
|
import { useRouter } from '@/shared/config/i18n/navigation';
|
|
import { Button } from '@/shared/ui/button';
|
|
import { Card } from '@/shared/ui/card';
|
|
import { Skeleton } from '@/shared/ui/skeleton';
|
|
import { ProductCard } from '@/widgets/categories/ui/product-card';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { AxiosError } from 'axios';
|
|
import { Heart } from 'lucide-react';
|
|
import { useTranslations } from 'next-intl';
|
|
import { useEffect } from 'react';
|
|
|
|
export default function Favourite() {
|
|
const router = useRouter();
|
|
const t = useTranslations();
|
|
const {
|
|
data: favourite,
|
|
isLoading,
|
|
error,
|
|
} = useQuery({
|
|
queryKey: ['favourite_product'],
|
|
queryFn: () => product_api.favouuriteProduct(),
|
|
select(data) {
|
|
return data.data;
|
|
},
|
|
});
|
|
|
|
useEffect(() => {
|
|
if ((error as AxiosError)?.status === 403) {
|
|
router.replace('/auth');
|
|
} else if ((error as AxiosError)?.status === 401) {
|
|
router.replace('/auth');
|
|
}
|
|
}, [error]);
|
|
|
|
if (favourite && favourite.results.length === 0) {
|
|
return (
|
|
<div className="min-h-screen py-12">
|
|
<div className="container mx-auto px-4">
|
|
<div className="flex flex-col items-center justify-center py-20">
|
|
<div className="w-32 h-32 bg-slate-100 rounded-full flex items-center justify-center mb-6">
|
|
<Heart className="w-16 h-16 text-slate-300" />
|
|
</div>
|
|
<h2 className="text-2xl font-bold text-slate-800 mb-2">
|
|
{t("Sevimlilar bo'sh")}
|
|
</h2>
|
|
<p className="text-slate-500 text-center max-w-md mb-8">
|
|
{t(`Hali hech qanday mahsulotni sevimlilarga qo'shmadingiz`)}
|
|
</p>
|
|
<Button
|
|
className="bg-blue-600 text-white px-8 py-3 rounded-xl hover:bg-blue-700"
|
|
onClick={() => router.push('/')}
|
|
>
|
|
{t('Xarid qilishni boshlash')}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="custom-container">
|
|
<div className="mb-8">
|
|
<Skeleton className="h-8 w-64 mb-2" />
|
|
<Skeleton className="h-4 w-32" />
|
|
</div>
|
|
|
|
{/* Grid */}
|
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
|
|
{Array.from({ length: 10 }).map((_, i) => (
|
|
<div key={i} className="rounded-xl border p-3 space-y-3">
|
|
<Skeleton className="h-40 w-full rounded-lg" />
|
|
<Skeleton className="h-4 w-[80%]" />
|
|
<Skeleton className="h-4 w-[60%]" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="custom-container">
|
|
<>
|
|
<div className="mb-8">
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-slate-800 mb-2">
|
|
{t('Sevimli mahsulotlar')}
|
|
</h1>
|
|
<p className="text-slate-500">
|
|
{favourite && favourite.total} {t('ta mahsulot')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4 mb-30">
|
|
{isLoading &&
|
|
Array.from({ length: 6 }).map((_, index) => (
|
|
<Card className="p-3 space-y-3 rounded-xl" key={index}>
|
|
<Skeleton className="h-40 sm:h-48 md:h-56 w-full rounded-lg" />
|
|
<Skeleton className="h-4 w-3/4" />
|
|
<Skeleton className="h-4 w-1/2" />
|
|
<Skeleton className="h-10 w-full rounded-lg" />
|
|
</Card>
|
|
))}
|
|
{favourite &&
|
|
!isLoading &&
|
|
favourite?.results
|
|
.filter((product) => product.is_active)
|
|
.map((product) => (
|
|
<ProductCard key={product.id} product={product} />
|
|
))}
|
|
</div>
|
|
</>
|
|
</div>
|
|
);
|
|
}
|