api ulandi
This commit is contained in:
Samandar Turgunboyev
@@ -1,5 +1,11 @@
|
||||
'use client';
|
||||
|
||||
import { cart_api } from '@/features/cart/lib/api';
|
||||
import { product_api } from '@/shared/config/api/product/api';
|
||||
import { BASE_URL } from '@/shared/config/api/URLs';
|
||||
import { useCartId } from '@/shared/hooks/cartId';
|
||||
import formatPrice from '@/shared/lib/formatPrice';
|
||||
import { Card } from '@/shared/ui/card';
|
||||
import {
|
||||
Carousel,
|
||||
CarouselContent,
|
||||
@@ -7,107 +13,112 @@ import {
|
||||
CarouselNext,
|
||||
CarouselPrevious,
|
||||
} from '@/shared/ui/carousel';
|
||||
import { Input } from '@/shared/ui/input';
|
||||
import { Skeleton } from '@/shared/ui/skeleton';
|
||||
import { ProductCard } from '@/widgets/categories/ui/product-card';
|
||||
import {
|
||||
Heart,
|
||||
Minus,
|
||||
Plus,
|
||||
RotateCcw,
|
||||
Shield,
|
||||
ShoppingCart,
|
||||
Star,
|
||||
Truck,
|
||||
} from 'lucide-react';
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { AxiosError } from 'axios';
|
||||
import { Heart, Minus, Plus, Shield, ShoppingCart, Truck } from 'lucide-react';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import Image from 'next/image';
|
||||
import { useState } from 'react';
|
||||
import { useParams } from 'next/navigation';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
const ProductDetail = () => {
|
||||
const t = useTranslations();
|
||||
const [quantity, setQuantity] = useState(1);
|
||||
const [selectedImage, setSelectedImage] = useState(0);
|
||||
const [liked, setLiked] = useState(false);
|
||||
const { product } = useParams();
|
||||
const queryClient = useQueryClient();
|
||||
const [selectedImage, setSelectedImage] = useState<number>(0);
|
||||
const debounceRef = useRef<NodeJS.Timeout | null>(null);
|
||||
const { cart_id } = useCartId();
|
||||
|
||||
// Fake product data
|
||||
const product = {
|
||||
id: 5,
|
||||
name: 'Coca-Cola 1.5L',
|
||||
price: 12000,
|
||||
oldPrice: 14000,
|
||||
image: '/classic-coca-cola.png',
|
||||
rating: 4.8,
|
||||
reviews: 342,
|
||||
discount: 14,
|
||||
inStock: true,
|
||||
description:
|
||||
"Coca-Cola klassik ta'mi bilan ajoyib gazlangan ichimlik. 1.5 litrlik shisha butilkada. Sovuq holda iste'mol qilish tavsiya etiladi.",
|
||||
category: 'Ichimliklar',
|
||||
brand: 'Coca-Cola',
|
||||
volume: '1.5L',
|
||||
supplier: {
|
||||
name: 'Global Trade LLC',
|
||||
logo: '/generic-company-logo.png',
|
||||
phone: '+998 90 123 45 67',
|
||||
email: 'info@globaltrade.uz',
|
||||
},
|
||||
images: [
|
||||
'/classic-coca-cola.png',
|
||||
'/clear-soda-bottle.png',
|
||||
'/classic-coca-cola.png',
|
||||
'/classic-coca-cola.png',
|
||||
'/classic-coca-cola.png',
|
||||
'/classic-coca-cola.png',
|
||||
'/classic-coca-cola.png',
|
||||
'/classic-coca-cola.png',
|
||||
'/classic-coca-cola.png',
|
||||
'/classic-coca-cola.png',
|
||||
'/classic-coca-cola.png',
|
||||
],
|
||||
specifications: {
|
||||
Hajmi: '1.5 litr',
|
||||
'Qadoq turi': 'Plastik butilka',
|
||||
'Ishlab chiqaruvchi': 'Coca-Cola Company',
|
||||
'Saqlash muddati': '12 oy',
|
||||
'Energiya qiymati': '180 kJ / 43 kcal',
|
||||
},
|
||||
};
|
||||
const { data: cartItems } = useQuery({
|
||||
queryKey: ['cart_items', cart_id],
|
||||
queryFn: () => cart_api.get_cart_items(cart_id!),
|
||||
enabled: !!cart_id,
|
||||
});
|
||||
|
||||
const [relatedProducts, setRelatedProducts] = useState([
|
||||
{
|
||||
id: 6,
|
||||
name: 'Pepsi 2L',
|
||||
price: 11000,
|
||||
reviews: 342,
|
||||
liked: false,
|
||||
inStock: true,
|
||||
oldPrice: 13000,
|
||||
image: '/pepsi-bottle.jpg',
|
||||
rating: 4.6,
|
||||
discount: 15,
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey: ['product_detail', product],
|
||||
queryFn: () => {
|
||||
if (product) return product_api.detail(product.toString());
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: 'Sprite 1.5L',
|
||||
price: 10000,
|
||||
inStock: true,
|
||||
oldPrice: 12000,
|
||||
image: '/clear-soda-bottle.png',
|
||||
rating: 4.5,
|
||||
reviews: 342,
|
||||
liked: false,
|
||||
discount: 17,
|
||||
select(data) {
|
||||
return data?.data;
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: 'Fanta Orange 1L',
|
||||
price: 9000,
|
||||
oldPrice: 10000,
|
||||
inStock: true,
|
||||
image: '/fanta-orange-bottle.png',
|
||||
rating: 4.4,
|
||||
reviews: 342,
|
||||
liked: true,
|
||||
discount: 10,
|
||||
enabled: !!product,
|
||||
});
|
||||
|
||||
const { data: recomendation, isLoading: proLoad } = useQuery({
|
||||
queryKey: ['product_list'],
|
||||
queryFn: () => product_api.list({ page: 1, page_size: 12 }),
|
||||
select(data) {
|
||||
return data.data.results;
|
||||
},
|
||||
]);
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (!cart_id) return;
|
||||
if (quantity <= 1) return;
|
||||
|
||||
const cartItemId = cartItems?.data?.cart_item.find(
|
||||
(item) => item.product_id === data?.id,
|
||||
)?.id;
|
||||
|
||||
if (!cartItemId) return;
|
||||
|
||||
if (debounceRef.current) clearTimeout(debounceRef.current);
|
||||
|
||||
debounceRef.current = setTimeout(() => {
|
||||
updateCartItem({ body: { quantity }, cart_item_id: cartItemId });
|
||||
}, 500);
|
||||
|
||||
return () => {
|
||||
if (debounceRef.current) clearTimeout(debounceRef.current);
|
||||
};
|
||||
}, [quantity, cart_id]);
|
||||
|
||||
const { mutate } = useMutation({
|
||||
mutationFn: (body: { product: string; quantity: number; cart: string }) =>
|
||||
cart_api.cart_item(body),
|
||||
onSuccess: () => {
|
||||
queryClient.refetchQueries({ queryKey: ['cart_items'] });
|
||||
},
|
||||
onError: (err: AxiosError) => {
|
||||
const detail = (err.response?.data as { detail: string }).detail;
|
||||
toast.error(detail || err.message, {
|
||||
richColors: true,
|
||||
position: 'top-center',
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const { mutate: updateCartItem } = useMutation({
|
||||
mutationFn: ({
|
||||
body,
|
||||
cart_item_id,
|
||||
}: {
|
||||
body: { quantity: number };
|
||||
cart_item_id: string;
|
||||
}) => cart_api.update_cart_item({ body, cart_item_id }),
|
||||
onSuccess: () => {
|
||||
queryClient.refetchQueries({ queryKey: ['cart_items'] });
|
||||
},
|
||||
onError: (err: AxiosError) => {
|
||||
toast.error(err.message, { richColors: true, position: 'top-center' });
|
||||
},
|
||||
});
|
||||
|
||||
const favouriteMutation = useMutation({
|
||||
mutationFn: (productId: string) => product_api.favourite(productId),
|
||||
|
||||
onSuccess: () => {
|
||||
queryClient.refetchQueries({ queryKey: ['product_list'] });
|
||||
queryClient.refetchQueries({ queryKey: ['product_detail', product] });
|
||||
},
|
||||
});
|
||||
|
||||
const handleQuantityChange = (type: string) => {
|
||||
if (type === 'increase') {
|
||||
@@ -117,25 +128,23 @@ const ProductDetail = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const addToCart = () => {
|
||||
alert(`${quantity} ta ${product.name} savatchaga qo'shildi!`);
|
||||
};
|
||||
|
||||
const handleRemove = (id: number) => {
|
||||
setRelatedProducts((prev) =>
|
||||
prev.map((product) =>
|
||||
product.id === id ? { ...product, liked: false } : product,
|
||||
),
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="custom-container pb-5">
|
||||
<div className="w-full max-w-4xl space-y-6">
|
||||
<div className="h-[400px] bg-gray-100 animate-pulse rounded-lg"></div>
|
||||
<div className="h-8 bg-gray-100 animate-pulse rounded w-3/4"></div>
|
||||
<div className="h-6 bg-gray-100 animate-pulse rounded w-1/4"></div>
|
||||
<div className="h-4 bg-gray-100 animate-pulse rounded w-full"></div>
|
||||
<div className="h-4 bg-gray-100 animate-pulse rounded w-5/6"></div>
|
||||
<div className="flex gap-4 mt-4">
|
||||
<div className="h-10 bg-gray-100 animate-pulse rounded flex-1"></div>
|
||||
<div className="h-10 bg-gray-100 animate-pulse rounded w-12"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const handleLiked = (id: number) => {
|
||||
setRelatedProducts((prev) =>
|
||||
prev.map((product) =>
|
||||
product.id === id ? { ...product, liked: true } : product,
|
||||
),
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="custom-container pb-5">
|
||||
@@ -143,26 +152,32 @@ const ProductDetail = () => {
|
||||
<div className="bg-white rounded-lg shadow-md p-6 mb-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<div className="relative bg-gray-100 rounded-lg overflow-hidden mb-4">
|
||||
<Image
|
||||
width={500}
|
||||
height={500}
|
||||
src={product.images[selectedImage] || '/placeholder.svg'}
|
||||
alt={product.name}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
{product.discount > 0 && (
|
||||
<div className="absolute top-4 left-4 bg-red-500 text-white px-3 py-1 rounded-full text-sm font-semibold">
|
||||
-{product.discount}%
|
||||
</div>
|
||||
<div className="relative rounded-lg overflow-hidden mb-4">
|
||||
{data && (
|
||||
<Image
|
||||
width={500}
|
||||
height={500}
|
||||
src={
|
||||
data.images.length > 0
|
||||
? data.images[selectedImage].image
|
||||
: data.image || '/placeholder.svg'
|
||||
}
|
||||
alt={data.name}
|
||||
className="w-full h-[400px] object-contain"
|
||||
/>
|
||||
)}
|
||||
{!product.inStock && (
|
||||
{/* {products.discount > 0 && (
|
||||
<div className="absolute top-4 left-4 bg-red-500 text-white px-3 py-1 rounded-full text-sm font-semibold">
|
||||
-{products.discount}%
|
||||
</div>
|
||||
)} */}
|
||||
{/* {!products.inStock && (
|
||||
<div className="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center">
|
||||
<span className="text-white text-xl font-bold">
|
||||
Mavjud emas
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
)} */}
|
||||
</div>
|
||||
|
||||
<Carousel
|
||||
@@ -173,29 +188,53 @@ const ProductDetail = () => {
|
||||
className="w-full"
|
||||
>
|
||||
<CarouselContent className="-ml-2 pr-[15%] sm:pr-0">
|
||||
{product.images.map((img, index) => (
|
||||
<CarouselItem
|
||||
key={index}
|
||||
className="pl-2 basis-1/3 sm:basis-1/4 md:basis-1/5 lg:basis-1/6"
|
||||
>
|
||||
{data && data.images.length > 0 ? (
|
||||
data.images.map((img, index) => (
|
||||
<CarouselItem
|
||||
key={img.id}
|
||||
className="pl-2 basis-1/3 sm:basis-1/4 md:basis-1/5 lg:basis-1/6"
|
||||
>
|
||||
<button
|
||||
onClick={() => setSelectedImage(index)}
|
||||
className={`aspect-square w-full rounded-lg border-2 overflow-hidden transition ${
|
||||
selectedImage === index
|
||||
? 'border-blue-500'
|
||||
: 'border-gray-200 hover:border-blue-300'
|
||||
}`}
|
||||
>
|
||||
<Image
|
||||
src={
|
||||
img.image.includes(BASE_URL)
|
||||
? img.image
|
||||
: BASE_URL + img.image || '/placeholder.svg'
|
||||
}
|
||||
alt={BASE_URL + data?.image}
|
||||
width={150}
|
||||
height={150}
|
||||
className="w-full h-full object-contain"
|
||||
/>
|
||||
</button>
|
||||
</CarouselItem>
|
||||
))
|
||||
) : (
|
||||
<CarouselItem className="pl-2 basis-1/3 sm:basis-1/4 md:basis-1/5 lg:basis-1/6">
|
||||
<button
|
||||
onClick={() => setSelectedImage(index)}
|
||||
className={`aspect-square w-full rounded-lg border-2 overflow-hidden transition ${
|
||||
selectedImage === index
|
||||
? 'border-blue-500'
|
||||
: 'border-gray-200 hover:border-blue-300'
|
||||
}`}
|
||||
className={`aspect-square w-full rounded-lg border-2 overflow-hidden transition ${'border-blue-500'}`}
|
||||
>
|
||||
<Image
|
||||
src={img || '/placeholder.svg'}
|
||||
alt={`thumb-${index}`}
|
||||
src={
|
||||
data?.image.includes(BASE_URL)
|
||||
? data.image
|
||||
: BASE_URL + data?.image || '/placeholder.svg'
|
||||
}
|
||||
alt={BASE_URL + data?.image}
|
||||
width={150}
|
||||
height={150}
|
||||
className="w-full h-full object-contain"
|
||||
/>
|
||||
</button>
|
||||
</CarouselItem>
|
||||
))}
|
||||
)}
|
||||
</CarouselContent>
|
||||
</Carousel>
|
||||
</div>
|
||||
@@ -203,83 +242,94 @@ const ProductDetail = () => {
|
||||
{/* Product Info */}
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-800 mb-2">
|
||||
{product.name}
|
||||
{data?.name}
|
||||
</h1>
|
||||
|
||||
{/* Rating */}
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
{/* <div className="flex items-center gap-2 mb-4">
|
||||
<div className="flex items-center">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<Star
|
||||
key={i}
|
||||
className={`w-5 h-5 ${
|
||||
i < Math.floor(product.rating)
|
||||
i < Math.floor(products.rating)
|
||||
? 'fill-yellow-400 text-yellow-400'
|
||||
: 'text-gray-300'
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<span className="text-gray-600">{product.rating}</span>
|
||||
</div>
|
||||
<span className="text-gray-600">{products.rating}</span>
|
||||
</div> */}
|
||||
|
||||
{/* Price */}
|
||||
<div className="mb-6">
|
||||
<div className="flex items-center gap-3 max-lg:flex-col max-lg:items-start">
|
||||
<span className="text-4xl font-bold text-blue-600">
|
||||
{product.price.toLocaleString()} {"so'm"}
|
||||
{data && formatPrice(data.price, true)}
|
||||
</span>
|
||||
{product.oldPrice && (
|
||||
{/* {products.oldPrice && (
|
||||
<span className="text-xl text-gray-400 line-through">
|
||||
{product.oldPrice.toLocaleString()} {"so'm"}
|
||||
{products.oldPrice.toLocaleString()} {"so'm"}
|
||||
</span>
|
||||
)}
|
||||
)} */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<p className="text-gray-600 mb-6">{product.description}</p>
|
||||
<p className="text-gray-600 mb-6">{data?.description}</p>
|
||||
|
||||
{/* Brand and Category */}
|
||||
<div className="grid grid-cols-2 gap-4 mb-6 max-md:grid-cols-1">
|
||||
{/* <div className="grid grid-cols-2 gap-4 mb-6 max-md:grid-cols-1">
|
||||
<div>
|
||||
<span className="text-gray-500">Brand:</span>
|
||||
<p className="font-semibold">{product.brand}</p>
|
||||
<p className="font-semibold">{products.brand}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-500">Kategoriya:</span>
|
||||
<p className="font-semibold">{product.category}</p>
|
||||
<p className="font-semibold">{products.category}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
{/* Quantity Selector */}
|
||||
<div className="mb-6">
|
||||
<label className="text-gray-700 font-medium mb-2 block">
|
||||
Miqdor:
|
||||
{t('Miqdor')}:
|
||||
</label>
|
||||
<div className="flex items-center gap-4 max-lg:flex-col max-lg:items-start">
|
||||
<div className="flex items-center border border-gray-300 rounded-lg">
|
||||
<button
|
||||
onClick={() => handleQuantityChange('decrease')}
|
||||
className="p-3 hover:bg-gray-100 transition"
|
||||
className="p-3 hover:bg-gray-100 transition rounded-lg"
|
||||
disabled={quantity <= 1}
|
||||
>
|
||||
<Minus className="w-5 h-5" />
|
||||
</button>
|
||||
<span className="px-6 font-semibold text-lg">
|
||||
{quantity}
|
||||
</span>
|
||||
<Input
|
||||
value={quantity}
|
||||
onChange={(e) => {
|
||||
const v = e.target.value;
|
||||
|
||||
if (!/^\d*$/.test(v)) return;
|
||||
|
||||
const num = Number(v);
|
||||
|
||||
setQuantity(num);
|
||||
}}
|
||||
inputMode="numeric"
|
||||
className="w-14 h-12 border-none text-center text-sm !p-0 focus-visible:ring-0"
|
||||
/>
|
||||
<button
|
||||
onClick={() => handleQuantityChange('increase')}
|
||||
className="p-3 hover:bg-gray-100 transition"
|
||||
className="p-3 hover:bg-gray-100 transition rounded-lg"
|
||||
>
|
||||
<Plus className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
<span className="text-gray-600">
|
||||
Jami:{' '}
|
||||
{t('Jami')}:{' '}
|
||||
<span className="font-bold text-lg">
|
||||
{(product.price * quantity).toLocaleString()} {"so'm"}
|
||||
{data && formatPrice(data.price * quantity, true)}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
@@ -288,49 +338,74 @@ const ProductDetail = () => {
|
||||
{/* Action Buttons */}
|
||||
<div className="flex gap-4 mb-6">
|
||||
<button
|
||||
onClick={addToCart}
|
||||
disabled={!product.inStock}
|
||||
className={`flex-1 py-4 rounded-lg cursor-pointer font-semibold text-white flex items-center justify-center gap-2 transition ${
|
||||
product.inStock
|
||||
? 'bg-green-600 hover:bg-green-700'
|
||||
: 'bg-gray-400 cursor-not-allowed'
|
||||
}`}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
const cart = cartItems?.data.cart_item.find(
|
||||
(e) => e.product_id === data?.id,
|
||||
);
|
||||
console.log(cart);
|
||||
|
||||
if (cart && data) {
|
||||
updateCartItem({
|
||||
body: {
|
||||
quantity: quantity,
|
||||
},
|
||||
cart_item_id: cart.id,
|
||||
});
|
||||
} else if (!cart && data) {
|
||||
mutate({
|
||||
product: data.id,
|
||||
cart: cart_id!,
|
||||
quantity: quantity,
|
||||
});
|
||||
}
|
||||
}}
|
||||
className={`flex-1 py-4 rounded-lg cursor-pointer font-semibold text-white flex items-center justify-center gap-2 transition ${'bg-green-600 hover:bg-green-700'}`}
|
||||
>
|
||||
<ShoppingCart className="w-5 h-5" />
|
||||
{'Savatga'}
|
||||
{t('Savatga')}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setLiked(!liked)}
|
||||
onClick={() => {
|
||||
if (product) {
|
||||
favouriteMutation.mutate(product.toString());
|
||||
}
|
||||
}}
|
||||
disabled={favouriteMutation.isPending}
|
||||
className={`p-4 rounded-lg border-2 transition ${
|
||||
liked
|
||||
data?.liked
|
||||
? 'border-red-500 bg-red-50'
|
||||
: 'border-gray-300 hover:border-red-500'
|
||||
}`}
|
||||
>
|
||||
<Heart
|
||||
className={`w-6 h-6 ${liked ? 'fill-red-500 text-red-500' : 'text-gray-600'}`}
|
||||
className={`w-6 h-6 ${
|
||||
data?.liked
|
||||
? 'fill-red-500 text-red-500'
|
||||
: 'text-gray-600'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Features */}
|
||||
<div className="grid grid-cols-3 gap-4 border-t pt-6">
|
||||
<div className="grid grid-cols-2 gap-4 border-t pt-6">
|
||||
<div className="flex flex-col items-center text-center">
|
||||
<Truck className="w-8 h-8 text-blue-600 mb-2" />
|
||||
<span className="text-sm text-gray-600">
|
||||
Bepul yetkazib berish
|
||||
{t('Bepul yetkazib berish')}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center text-center">
|
||||
<Shield className="w-8 h-8 text-blue-600 mb-2" />
|
||||
<span className="text-sm text-gray-600">Kafolat</span>
|
||||
<span className="text-sm text-gray-600">{t('Kafolat')}</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center text-center">
|
||||
{/* <div className="flex flex-col items-center text-center">
|
||||
<RotateCcw className="w-8 h-8 text-blue-600 mb-2" />
|
||||
<span className="text-sm text-gray-600">
|
||||
14 kun qaytarish
|
||||
</span>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -338,37 +413,72 @@ const ProductDetail = () => {
|
||||
|
||||
{/* Specifications */}
|
||||
<div className="bg-white rounded-lg shadow-md p-6 mb-8">
|
||||
<h2 className="text-2xl font-bold mb-4">Xususiyatlari</h2>
|
||||
<h2 className="text-2xl font-bold mb-4">{t('Xususiyatlari')}</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{Object.entries(product.specifications).map(([key, value]) => (
|
||||
<div
|
||||
key={key}
|
||||
className="flex justify-between border-b pb-2 gap-4"
|
||||
>
|
||||
<span className="text-gray-600">{key}:</span>
|
||||
<span className="font-semibold text-right">{value}</span>
|
||||
<div className="flex justify-between border-b pb-2 gap-4">
|
||||
<span className="text-gray-600">{t('Qadoq turi')}:</span>
|
||||
<span className="font-semibold text-right">
|
||||
{data?.unity.name}
|
||||
</span>
|
||||
</div>
|
||||
{data?.brand && (
|
||||
<div className="flex justify-between border-b pb-2 gap-4">
|
||||
<span className="text-gray-600">{t('Brandi')}:</span>
|
||||
<span className="font-semibold text-right">{data?.brand}</span>
|
||||
</div>
|
||||
))}
|
||||
)}
|
||||
{data?.manufacturer && (
|
||||
<div className="flex justify-between border-b pb-2 gap-4">
|
||||
<span className="text-gray-600">
|
||||
{t('Ishlab chiqaruvchi')}:
|
||||
</span>
|
||||
<span className="font-semibold text-right">
|
||||
{data?.manufacturer}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{data?.volume && (
|
||||
<div className="flex justify-between border-b pb-2 gap-4">
|
||||
<span className="text-gray-600">{t('Hajmi')}:</span>
|
||||
<span className="font-semibold text-right">{data?.volume}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Related Products */}
|
||||
<div className="bg-white rounded-lg shadow-md p-6">
|
||||
<h2 className="text-2xl font-bold mb-6">{"O'xshash mahsulotlar"}</h2>
|
||||
<h2 className="text-2xl font-bold mb-6">
|
||||
{t("O'xshash mahsulotlar")}
|
||||
</h2>
|
||||
<Carousel className="w-full">
|
||||
<CarouselContent className="pr-[12%] sm:pr-0">
|
||||
{relatedProducts.slice(0, 12).map((product) => (
|
||||
<CarouselItem
|
||||
key={product.id}
|
||||
className="basis-1/2 sm:basis-1/3 md:basis-1/4 lg:basis-1/6 pb-2"
|
||||
>
|
||||
<ProductCard
|
||||
product={product}
|
||||
handleRemove={handleRemove}
|
||||
handleLiked={handleLiked}
|
||||
/>
|
||||
</CarouselItem>
|
||||
))}
|
||||
{proLoad &&
|
||||
Array.from({ length: 6 }).map((__, index) => (
|
||||
<CarouselItem
|
||||
key={index}
|
||||
className="basis-1/2 sm:basis-1/3 md:basis-1/4 lg:basis-1/5 xl:basis-1/6 pb-2"
|
||||
>
|
||||
<Card className="p-3 space-y-3 rounded-xl">
|
||||
<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>
|
||||
</CarouselItem>
|
||||
))}
|
||||
{recomendation &&
|
||||
!proLoad &&
|
||||
recomendation
|
||||
.filter((product) => product.is_active)
|
||||
.map((product) => (
|
||||
<CarouselItem
|
||||
key={product.id}
|
||||
className="basis-1/2 sm:basis-1/3 md:basis-1/3 lg:basis-1/5 xl:basis-1/6 pb-2"
|
||||
>
|
||||
<ProductCard product={product} />
|
||||
</CarouselItem>
|
||||
))}
|
||||
</CarouselContent>
|
||||
|
||||
<CarouselPrevious className="hidden lg:flex -top-12 right-12 w-9 h-9 bg-blue-600 text-white border-0" />
|
||||
|
||||
Reference in New Issue
Block a user