Davron/spestexnika
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

connected to backend

Browse Source
This commit is contained in:
nabijonovdavronbek619@gmail.com
2026-02-04 10:01:25 +05:00
parent 1d0698573f
commit e7b838e3fe
21 changed files with 571 additions and 395 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/pageParts/hero.tsx
View File

@@ -48,7 +48,7 @@ export default function HeroSection() {
className={`${navigationPrevEl.replace(
".",
""
)} w-10 h-10 absolute z-10 left-[10%] top-50 p-0 bg-primary text-[30px] text-center text-white flex items-center justify-center hover:bg-secondary hover:cursor-pointer transition`}
)} w-10 h-10 absolute z-10 left-[10%] top-50 p-0 bg-primary text-[30px] text-center text-white lg:flex hidden items-center justify-center hover:bg-secondary hover:cursor-pointer transition`}
>
<ArrowLeft />
</button>
@@ -56,7 +56,7 @@ export default function HeroSection() {
className={`${navigationNextEl.replace(
".",
""
)} w-10 h-10 absolute z-10 right-[10%] top-50 bg-primary text-[30px] text-center text-white flex items-center justify-center hover:bg-secondary hover:cursor-pointer transition `}
)} w-10 h-10 absolute z-10 right-[10%] top-50 bg-primary text-[30px] text-center text-white lg:flex hidden items-center justify-center hover:bg-secondary hover:cursor-pointer transition `}
>
<ArrowRight />
</button>

2
components/pageParts/map.tsx
View File

@@ -14,7 +14,7 @@ export default function Map() {
</div>
{/* contact information */}
<div className="absolute flex flex-col gap-3 sm:top-20 top-5 sm:right-20 z-50 bg-white rounded-[15px] p-5 px-10 max-w-[400px] w-full text-left ">
<div className="absolute flex flex-col gap-3 sm:top-20 top-5 sm:right-20 z-30 bg-white rounded-[15px] p-5 px-10 max-w-[400px] w-full text-left ">
<div className="text-left flex w-full justify-start">
<Title text="contacts" />
</div>

63
components/pageParts/products.tsx
View File

@@ -1,63 +0,0 @@
"use client";
import React, { useEffect, useState } from "react";
import Title from "../lib_components/title";
import Text from "../lib_components/text";
import { Asphalt, Ekskavator, Forklift, Kran, Truck } from "@/assets";
import type { productFilterTypes, ProductTypes } from "@/types";
import {
allProducts,
} from "@/data";
import ProductCard from "../cards/productCard";
export default function Products() {
const [cars, setCars] = useState(allProducts);
return (
<div dir="ltr" className="max-w-[1200px] w-full mx-auto">
{/* title part */}
<div className="flex flex-col mb-10">
<div className="flex items-center justify-center w-full ">
<div className="text-secondary px-2 text-[18px] font-semibold ">
<Text txt="katalog" />
</div>
</div>
<Title text="pricing-h2" />
</div>
{/* product filters */}
{/* <div className="flex flex-wrap gap-1 gap-y-4 items-center justify-center mb-10 ">
{productFilterTypesMainPage.map((item, index) => (
<button
key={index}
onClick={() => setProductFilter(item.name)}
className={`${
productFilter === item.name ? "bg-secondary" : ""
} flex items-center gap-2 h-[58px] hover:bg-secondary border-gray-300 hover:border-secondary border-[1px] px-7 text-2xl rounded-tr-full rounded-bl-full `}
>
<Text txt={item.name} />
{item.image && (
<Image
src={item.image}
alt="Truck images"
width={50}
height={50}
className="object-cover"
/>
)}
</button>
))}
</div> */}
{/* products */}
<div className="px-4 grid gap-5 grid-cols-1 place-content-center min-[500px]:grid-cols-2 min-lg:grid-cols-4 min-[1210px]:grid-cols-4">
{cars.map((item: ProductTypes, index: number) => (
<div key={index}>
<ProductCard data={item} />
</div>
))}
</div>
</div>
);
}

95
components/pageParts/products/products.tsx Normal file
View File

@@ -0,0 +1,95 @@
"use client";
import React, { useEffect, useState } from "react";
import Title from "../../lib_components/title";
import Text from "../../lib_components/text";
import type { ProductTypes } from "@/types";
import { allProducts } from "@/data";
import ProductCard from "../../cards/productCard";
import { LoadingSkeleton } from "@/components/loadingProduct";
import { EmptyState } from "@/components/emptyState";
import { usePathname } from "next/navigation";
import { baseUrl } from "@/data/url";
export default function Products() {
const [cars, setCars] = useState<ProductTypes[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const pathname = usePathname();
const lang = pathname.split("/")[1];
useEffect(() => {
const fetchProducts = async () => {
try {
setLoading(true);
setError(null);
const response = await fetch(baseUrl, {
headers: {
"Accept-Language": lang,
},
});
if (!response.ok) {
throw new Error("Server xatosi");
}
const data = await response.json();
console.log("backend Data: ", data?.data);
if (data?.data && data.data.length > 0) {
setCars(data.data);
} else {
setCars([]);
}
} catch (error) {
console.log("Xatolik: ", error);
setError(error instanceof Error ? error.message : "Noma'lum xatolik");
// Xatolik bo'lsa ham local data'ni ko'rsatish
setCars(allProducts);
} finally {
setLoading(false);
}
};
fetchProducts();
}, [lang]); // Bo'sh array - faqat bitta marta ishlaydi
return (
<div dir="ltr" className="max-w-[1200px] w-full mx-auto">
{/* title part */}
<div className="flex flex-col mb-10">
<div className="flex items-center justify-center w-full">
<div className="text-[#f2a01c] px-2 text-[18px] font-semibold">
<Text txt="katalog" />
</div>
</div>
<Title text="pricing-h2" />
</div>
{/* Error message */}
{error && (
<div className="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg">
<p className="text-red-600 text-center">
<Text txt="downloadError" /> : {error}
</p>
</div>
)}
{/* products */}
<div className="px-4 grid gap-5 grid-cols-1 place-content-center min-[500px]:grid-cols-2 min-lg:grid-cols-4 min-[1210px]:grid-cols-4">
{loading ? (
<LoadingSkeleton />
) : cars.length > 0 ? (
cars.map((item: ProductTypes, index: number) => (
<div key={item.id || index}>
<ProductCard data={item} />
</div>
))
) : (
<EmptyState />
)}
</div>
</div>
);
}