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

detail page added

Browse Source
This commit is contained in:
nabijonovdavronbek619@gmail.com
2026-01-09 11:39:58 +05:00
parent 01a89edfd5
commit e53d40bd61
7 changed files with 205 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
app/detail/page.tsx Normal file
View File

@@ -0,0 +1,14 @@
import { ContactForm } from "@/components/ContactForm";
import DetailInfo from "@/components/detailPage/detailInfo";
import React from "react";
export default function Page() {
return (
<div>
<DetailInfo />
<section id="contact">
<ContactForm />
</section>
</div>
);
}

88
components/detailPage/detailInfo.tsx Normal file
View File

@@ -0,0 +1,88 @@
"use client";
import { motion } from "framer-motion";
import { X } from "lucide-react";
import type { Product } from "@/lib/products";
import { useLanguage } from "@/context/language-context";
import Link from "next/link";
import { useProduct, useProductStore } from "@/lib/productZustand";
import Image from "next/image";
export default function DetailInfo() {
const { t, language } = useLanguage();
const languageIndex = language === "uz" ? true : false;
const product = useProduct((state) => state.product);
if (product === null) return null;
return (
<div className="bg-white">
<div className="max-w-[1200px] mx-auto">
{/* Header */}
<div className="sticky z-10 top-0 sm:p-6 p-2 flex justify-center items-center">
<h2 className="md:text-2xl text-lg font-bold text-gray-900">
{languageIndex ? product.name_uz : product.name_ru}
</h2>
</div>
{/* Content */}
<div className="sm:p-6 p-2">
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
{/* Image */}
<div className="relative max-sm:w-full max-md:h-50 w-150 h-96 mx-auto rounded-lg overflow-hidden">
<Image
src={`https://admin.promtechno.uz${product.image}`}
alt="image"
fill
className="object-contain max-md:h-50"
/>
</div>
<div className="space-y-6 pt-10">
{/* Description */}
<div className="text-gray-800 max-sm:text-[14px]">
{languageIndex
? product.description_uz
: product.description_ru}
</div>
{/* CTA Buttons */}
<div className="space-y-3">
<Link href={"#contact"}>
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
className="w-full px-6 py-3 bg-primary/80 text-white rounded-lg font-semibold hover:bg-primary transition-colors"
>
{t.contact.send}
</motion.button>
</Link>
</div>
</div>
</div>
{/* Specifications */}
<div>
<div className="mb-8">
<h3 className="text-lg font-semibold text-gray-900 mb-4">
{t.features}
</h3>
<div className="space-y-3 flex items-start justify-start gap-4 flex-wrap ">
{product.features.map((spec, idx) => (
<div
key={idx}
className="flex flex-col justify-between py-2 border border-gray-100 rounded-lg p-2"
>
<span className="text-gray-600">
{languageIndex ? spec.key_uz : spec.key_ru}:
</span>
<span className="text-gray-900">
{languageIndex ? spec.value_uz : spec.value_ru}
</span>
</div>
))}
</div>
</div>
</div>
</div>
</div>
</div>
);
}

16
components/loading.tsx Normal file
View File

@@ -0,0 +1,16 @@
import { useLanguage } from "@/context/language-context";
export default function Loading() {
const { language } = useLanguage();
const languageIndex = language === "uz" ? true : false;
return (
<div className="h-52 w-52 rounded-xl bg-linear-to-br from-primary via-primary/60 to-gray-300 backdrop-blur-md flex flex-col items-center justify-center gap-3">
<div className="w-8 h-8 border-4 border-gray-300 border-t-white rounded-full animate-spin" />
<span className="text-white text-lg text-center">
{languageIndex ? "Yuklanmoqda..." : "Загрузка..."}
</span>
</div>
);
}

21
components/productSection/ProductCard.tsx
View File

@@ -5,16 +5,26 @@ import { motion } from "framer-motion";
import { ExternalLink } from "lucide-react";
import { type Product } from "@/lib/products";
import { useLanguage } from "@/context/language-context";
import Link from "next/link";
import { useProduct, useProductStore } from "@/lib/productZustand";
interface ProductCardProps {
product: Product;
onViewDetails: (slug: number) => void;
}
export function ProductCard({ product, onViewDetails }: ProductCardProps) {
export function ProductCard({ product }: ProductCardProps) {
const { t, language } = useLanguage();
const languageIndex = language === "uz" ? true : false;
const setProductName = useProductStore((state) => state.setProductName);
const setProducts = useProduct((state) => state.setProducts);
return (
<Link
href={`/detail?${languageIndex ? product.name_uz : product.name_ru}`}
onClick={() => {
setProductName(languageIndex ? product.name_uz : product.name_ru);
setProducts(product);
}}
>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
@@ -26,11 +36,12 @@ export function ProductCard({ product, onViewDetails }: ProductCardProps) {
<motion.div
whileHover={{ scale: 1.05 }}
transition={{ duration: 0.4 }}
className="w-full h-full"
className="w-full h-full relative"
>
<img
<Image
src={`https://admin.promtechno.uz${product.image}`}
alt={languageIndex ? product.name_uz : product.name_ru}
fill
className="w-full h-full object-cover"
/>
</motion.div>
@@ -55,7 +66,6 @@ export function ProductCard({ product, onViewDetails }: ProductCardProps) {
<motion.button
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
onClick={() => onViewDetails(product.id)}
className="w-full flex items-center justify-center gap-2 px-6 py-3 bg-primary text-white rounded-xl font-semibold shadow-lg shadow-blue-500/30 hover:shadow-xl hover:shadow-primary/40 transition-all duration-300 group/button"
>
<span>{t.details}</span>
@@ -66,5 +76,6 @@ export function ProductCard({ product, onViewDetails }: ProductCardProps) {
{/* Decorative Corner */}
<div className="absolute top-0 right-0 w-20 h-20 bg-linear-to-br from-blue-500/10 to-transparent rounded-bl-full opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
</motion.div>
</Link>
);
}

122
components/productSection/ProductModal.tsx
View File

@@ -1,122 +0,0 @@
"use client";
import { motion, AnimatePresence } from "framer-motion";
import { X } from "lucide-react";
import type { Product } from "@/lib/products";
import { useLanguage } from "@/context/language-context";
import Link from "next/link";
import { useProductStore } from "@/lib/productZustand";
import Image from "next/image";
import { usePathname } from "next/navigation";
interface ProductModalProps {
product: Product;
onClose: () => void;
}
// for github firma repo
export function ProductModal({ product, onClose }: ProductModalProps) {
const { t, language } = useLanguage();
const setProductName = useProductStore((state) => state.setProductName);
const languageIndex = language === "uz" ? true : false;
const pathName = usePathname();
const isPathName = pathName === "/product";
return (
<AnimatePresence>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
onClick={onClose}
className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4"
>
<motion.div
initial={{ scale: 0.95, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
exit={{ scale: 0.95, opacity: 0 }}
onClick={(e) => e.stopPropagation()}
className="bg-white rounded-lg max-w-4xl w-full max-h-[90vh] overflow-y-auto"
>
{/* Header */}
<div className="sticky z-10 top-0 bg-white border-b border-gray-200 sm:p-6 p-2 flex justify-between items-center">
<h2 className="md:text-2xl text-lg font-bold text-gray-900">
{languageIndex ? product.name_uz : product.name_ru}
</h2>
<motion.button
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.95 }}
onClick={onClose}
className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
>
<X size={24} />
</motion.button>
</div>
{/* Content */}
<div className="sm:p-6 p-2">
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
{/* Image */}
<div className="relative max-sm:w-full max-md:h-50">
<Image
src={`https://admin.promtechno.uz${product.image}`}
alt="image"
fill
className="object-contain max-md:h-50"
/>
</div>
{/* Specifications */}
<div>
<div className="mb-8">
<h3 className="text-lg font-semibold text-gray-900 mb-4">
{t.features}
</h3>
<div className="space-y-3">
{product.features.map((spec, idx) => (
<div
key={idx}
className="flex max-sm:flex-col justify-between py-2 border-b border-gray-100"
>
<span className="text-gray-600">
{languageIndex ? spec.key_uz : spec.key_ru}:
</span>
<span className="text-gray-600">
{languageIndex ? spec.value_uz : spec.value_ru}
</span>
</div>
))}
</div>
</div>
{/* CTA Buttons */}
<div className="space-y-3">
<Link href={isPathName ? "/#contact" : "#contact"} >
<motion.button
onClick={() => {
onClose();
setProductName(
languageIndex ? product.name_uz : product.name_ru
);
}}
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
className="w-full px-6 py-3 bg-primary/80 text-white rounded-lg font-semibold hover:bg-primary transition-colors"
>
{t.contact.send}
</motion.button>
</Link>
</div>
</div>
</div>
<div className="text-gray-800 max-sm:text-[14px]">
{languageIndex ? product.description_uz : product.description_ru}
</div>
</div>
</motion.div>
</motion.div>
</AnimatePresence>
);
}

27
components/productSection/ProductsGrid.tsx
View File

@@ -8,37 +8,32 @@ import { useLanguage } from "@/context/language-context";
import Link from "next/link";
import { ChevronsRight } from "lucide-react";
import { ProductCard } from "./ProductCard";
import { ProductModal } from "./ProductModal";
import axios from "axios";
import EmptyState from "../productsPage/emptyData";
import Loading from "../loading";
// hello everyone
export function ProductsGrid() {
const { t } = useLanguage();
const [selectedProduct, setSelectedProduct] = useState<Product | null>(null);
const [allProducts, setAllProducts] = useState<any>([]);
const [loading, setLoading] = useState<boolean>(false);
useEffect(() => {
async function getData() {
setLoading(true);
await axios
.get("https://admin.promtechno.uz/api/products/")
.then((res) => {
console.log("all data main page: ", res?.data);
const allData = res?.data || [];
setAllProducts(allData.slice(0, 3));
setLoading(false);
});
}
getData();
}, []);
const handleViewDetails = (slug: number) => {
const product = allProducts.find((p: any) => p.id === slug);
if (product) {
setSelectedProduct(product);
}
};
return (
<>
<section id="products" className="relative py-20">
@@ -66,8 +61,11 @@ export function ProductsGrid() {
<div className="w-20 h-1 bg-primary mx-auto rounded-full" />
</motion.div>
{loading && <div className="w-full flex items-center justify-center">
<Loading /></div>}
{/* Product Grid */}
{allProducts && allProducts.length > 0 ? (
{ loading|| allProducts && allProducts.length > 0 ? (
<motion.div
initial="hidden"
whileInView="visible"
@@ -78,7 +76,6 @@ export function ProductsGrid() {
<motion.div key={product.id}>
<ProductCard
product={product}
onViewDetails={handleViewDetails}
/>
</motion.div>
))}
@@ -96,14 +93,6 @@ export function ProductsGrid() {
</Link>
</div>
</section>
{/* Product Modalll */}
{selectedProduct && (
<ProductModal
product={selectedProduct}
onClose={() => setSelectedProduct(null)}
/>
)}
</>
);
}

20
lib/productZustand.ts
View File

@@ -1,5 +1,6 @@
import { create } from "zustand";
import { devtools, persist } from "zustand/middleware";
import type { Product } from "@/lib/products";
interface ProductStore {
productName: string;
@@ -21,3 +22,22 @@ export const useProductStore = create<ProductStore>()(
)
)
);
interface ProductDetail {
product: Product | null;
setProducts: (product: Product) => void;
}
export const useProduct = create<ProductDetail>()(
devtools(
persist(
(set) => ({
product: null,
setProducts: (product: Product) => set({ product }),
}),
{
name: "product-detail-storage",
}
)
)
);