file name and location updayed for better be
This commit is contained in:
nabijonovdavronbek619@gmail.com
122
pages/products/product/mianProduct.tsx
Normal file
122
pages/products/product/mianProduct.tsx
Normal file
@@ -0,0 +1,122 @@
|
||||
"use client";
|
||||
import httpClient from "@/request/api";
|
||||
import { endPoints } from "@/request/links";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import ProductCard from "./productCard";
|
||||
import { useCategory } from "@/zustand/useCategory";
|
||||
import { useFilter } from "@/lib/filter-zustand";
|
||||
import { useMemo, useState } from "react";
|
||||
import { useProductPageInfo } from "@/zustand/useProduct";
|
||||
import { useSubCategory } from "@/zustand/useSubCategory";
|
||||
import { useTranslations } from "next-intl";
|
||||
import PaginationLite from "@/components/paginationUI";
|
||||
|
||||
export default function MainProduct() {
|
||||
const t = useTranslations();
|
||||
const category = useCategory((s) => s.category);
|
||||
const subCategory = useSubCategory((s) => s.subCategory);
|
||||
const filter = useFilter((s) => s.filter);
|
||||
const getFiltersByType = useFilter((s) => s.getFiltersByType);
|
||||
const setProduct = useProductPageInfo((s) => s.setProducts);
|
||||
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
|
||||
const queryParams = useMemo(() => {
|
||||
const catalog = getFiltersByType("catalog");
|
||||
const size = getFiltersByType("size");
|
||||
const catalogParams = catalog.map((i) => `catalog=${i.id}`).join("&");
|
||||
const sizeParams = size.map((i) => `size=${i.id}`).join("&");
|
||||
const allParams = [catalogParams, sizeParams].filter(Boolean).join("&");
|
||||
setCurrentPage(1);
|
||||
return allParams ? `&${allParams}` : "";
|
||||
}, [filter]);
|
||||
|
||||
const requestLink = useMemo(() => {
|
||||
const baseLink = category.have_sub_category
|
||||
? endPoints.product.bySubCategory({ id: subCategory.id, currentPage })
|
||||
: endPoints.product.byCategory({ id: category.id, currentPage });
|
||||
return `${baseLink}${queryParams}`;
|
||||
}, [
|
||||
category.id,
|
||||
category.have_sub_category,
|
||||
queryParams,
|
||||
subCategory.id,
|
||||
currentPage,
|
||||
]);
|
||||
|
||||
const { data, isLoading, error } = useQuery({
|
||||
queryKey: [
|
||||
"products",
|
||||
subCategory.id,
|
||||
category.id,
|
||||
queryParams,
|
||||
currentPage,
|
||||
],
|
||||
queryFn: () => httpClient(requestLink),
|
||||
placeholderData: (prev) => prev, // ✅ pagination da flicker yo'q
|
||||
select: (res) => ({
|
||||
results: res?.data?.data?.results ?? [],
|
||||
totalPages: res?.data?.data?.total_pages ?? 1,
|
||||
}),
|
||||
});
|
||||
|
||||
// ✅ To'g'ridan select dan olamiz — useEffect + let emas
|
||||
const results = useMemo(() => {
|
||||
return data?.results ?? [];
|
||||
}, [data]);
|
||||
const totalPages = useMemo(() => {
|
||||
return data?.totalPages ?? 1;
|
||||
}, [data]);
|
||||
|
||||
if (isLoading && !data) {
|
||||
// ✅ placeholderData bor — faqat birinchi yuklanishda
|
||||
return (
|
||||
<div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="h-96 bg-gray-800 animate-pulse rounded-2xl" />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="text-center text-red-500 py-10">{t("loadingError")}</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!results.length) {
|
||||
return (
|
||||
<div className="text-center text-gray-400 py-10">
|
||||
{t("productsNotFound")}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* ✅ isLoading da overlay — list o'rnini saqlab, ustidan opacity */}
|
||||
<div
|
||||
className={`grid lg:grid-cols-4 sm:grid-cols-2 grid-cols-1 gap-5 transition-opacity ${isLoading ? "opacity-50 pointer-events-none" : "opacity-100"}`}
|
||||
>
|
||||
{results.map((item: any) => (
|
||||
<ProductCard
|
||||
key={item.id}
|
||||
getProduct={() => setProduct(item)}
|
||||
title={item.name}
|
||||
image={item?.images?.[0]?.image || ""}
|
||||
slug="special_product"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{totalPages > 1 && (
|
||||
<PaginationLite
|
||||
currentPage={currentPage}
|
||||
totalPages={totalPages}
|
||||
onChange={(p) => setCurrentPage(p)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
161
pages/products/product/productCard.tsx
Normal file
161
pages/products/product/productCard.tsx
Normal file
@@ -0,0 +1,161 @@
|
||||
"use client";
|
||||
|
||||
import { useLocale, useTranslations } from "next-intl";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
interface ProductCardProps {
|
||||
title: string;
|
||||
image: string;
|
||||
slug: string;
|
||||
getProduct: () => void;
|
||||
}
|
||||
|
||||
export default function ProductCard({
|
||||
title,
|
||||
image,
|
||||
slug,
|
||||
getProduct,
|
||||
}: ProductCardProps) {
|
||||
const locale = useLocale();
|
||||
const t = useTranslations();
|
||||
|
||||
return (
|
||||
<Link
|
||||
href={`/${locale}/catalog_page/products/${slug}`}
|
||||
onClick={getProduct}
|
||||
className="group block"
|
||||
>
|
||||
<article className="
|
||||
relative
|
||||
bg-neutral-900
|
||||
border border-zinc-800
|
||||
rounded-xl
|
||||
overflow-hidden
|
||||
transition-all duration-300
|
||||
hover:border-red-600/60
|
||||
hover:shadow-[0_0_24px_0_rgba(220,38,38,0.15)]
|
||||
max-sm:max-w-100 max-sm:mx-auto max-sm:w-full
|
||||
h-95 flex flex-col
|
||||
">
|
||||
|
||||
{/* Top accent line */}
|
||||
<div className="
|
||||
absolute top-0 left-0 right-0 h-0.5
|
||||
bg-linear-to-r from-transparent via-red-600 to-transparent
|
||||
opacity-0 group-hover:opacity-100
|
||||
transition-opacity duration-300
|
||||
z-10
|
||||
" />
|
||||
|
||||
{/* Image Container */}
|
||||
<div className="
|
||||
relative
|
||||
h-48 sm:h-56 md:h-64
|
||||
bg-zinc-900
|
||||
border-b border-zinc-800
|
||||
overflow-hidden
|
||||
">
|
||||
{/* Background pattern */}
|
||||
<div className="
|
||||
absolute inset-0
|
||||
bg-[radial-gradient(circle_at_center,_rgba(39,39,42,0.8)_0%,_rgba(9,9,11,1)_100%)]
|
||||
" />
|
||||
|
||||
<Image
|
||||
src={image || "/placeholder.svg"}
|
||||
alt={title}
|
||||
fill
|
||||
className="
|
||||
object-contain
|
||||
p-4
|
||||
transition-transform duration-500
|
||||
group-hover:scale-105
|
||||
drop-shadow-[0_4px_12px_rgba(0,0,0,0.5)]
|
||||
"
|
||||
sizes="(max-width: 640px) 90vw, (max-width: 1024px) 45vw, 30vw"
|
||||
/>
|
||||
|
||||
{/* Hover overlay */}
|
||||
<div className="
|
||||
absolute inset-0
|
||||
bg-red-600/5
|
||||
opacity-0 group-hover:opacity-100
|
||||
transition-opacity duration-300
|
||||
" />
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-5">
|
||||
{/* Decorative line */}
|
||||
<div className="
|
||||
w-8 h-0.5
|
||||
bg-red-600
|
||||
mb-3
|
||||
transition-all duration-300
|
||||
group-hover:w-16
|
||||
" />
|
||||
|
||||
<h3 className="
|
||||
text-sm sm:text-base
|
||||
font-bold
|
||||
text-zinc-100
|
||||
line-clamp-3
|
||||
leading-snug
|
||||
tracking-wide
|
||||
transition-colors duration-300
|
||||
group-hover:text-white
|
||||
">
|
||||
{title}
|
||||
</h3>
|
||||
|
||||
{/* Bottom row */}
|
||||
<div className="
|
||||
flex items-center justify-between
|
||||
mt-4 pt-4
|
||||
border-t border-zinc-800
|
||||
">
|
||||
<span className="
|
||||
text-xs
|
||||
text-zinc-500
|
||||
tracking-widest
|
||||
uppercase
|
||||
font-medium
|
||||
">
|
||||
{ t("home.services.learnmore")}
|
||||
</span>
|
||||
|
||||
{/* Arrow */}
|
||||
<div className="
|
||||
flex items-center justify-center
|
||||
w-7 h-7
|
||||
rounded-full
|
||||
border border-zinc-700
|
||||
text-zinc-500
|
||||
transition-all duration-300
|
||||
group-hover:border-red-600
|
||||
group-hover:text-red-500
|
||||
group-hover:bg-red-600/10
|
||||
">
|
||||
<svg
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 12 12"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M2 6H10M10 6L7 3M10 6L7 9"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
18
pages/products/product/products.tsx
Normal file
18
pages/products/product/products.tsx
Normal file
@@ -0,0 +1,18 @@
|
||||
import Filter from "../filter/filter";
|
||||
import MainProduct from "./mianProduct";
|
||||
|
||||
export function Products() {
|
||||
return (
|
||||
<div className="bg-[#1e1d1c] pb-10 pt-5 px-2">
|
||||
<div className="max-w-300 mx-auto w-full z-20 relative">
|
||||
<div className="flex flex-col items-start gap-5">
|
||||
{/* filter part */}
|
||||
<Filter />
|
||||
|
||||
{/* main products */}
|
||||
<MainProduct />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user