added backend

2025-12-24 14:17:04 +05:00
parent de12e23af1
commit c5d3b02737
11 changed files with 149 additions and 179 deletions
--- a/components/productSection/ProductCard.tsx
+++ b/components/productSection/ProductCard.tsx
@@ -3,62 +3,68 @@
 import Image from "next/image";
 import { motion } from "framer-motion";
 import { ExternalLink } from "lucide-react";
-import type { Product } from "@/lib/products";
+import { type Product } from "@/lib/products";
 import { useLanguage } from "@/context/language-context";

 interface ProductCardProps {
  product: Product;
-  onViewDetails: (slug: string) => void;
+  onViewDetails: (slug: number) => void;
 }

 export function ProductCard({ product, onViewDetails }: ProductCardProps) {
-  const {t} = useLanguage();
+  const { t, language } = useLanguage();
+  const languageIndex = language === "uz" ? true : false;
  return (
    <motion.div
-      whileHover={{ y: -8 }}
-      className="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow"
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.3 }}
+      className="group relative h-full flex flex-col bg-white rounded-2xl overflow-hidden shadow-md hover:shadow-2xl transition-all duration-300 border border-gray-100"
    >
-      {/* Image */}
-      <div className="relative h-48 bg-gray-100 overflow-hidden group">
-        <Image
-          src={product.images[0]}
-          alt={product.nameKey}
-          fill
-          className="object-contain group-hover:scale-110 transition-transform duration-300"
-        />
-        <div className="absolute inset-0 bg-black/0 group-hover:bg-black/30 transition-colors" />
+      {/* Image Container - Fixed Height */}
+      <div className="relative w-full h-64 overflow-hidden bg-linear-to-br from-gray-50 to-gray-100">
+        <motion.div
+          whileHover={{ scale: 1.05 }}
+          transition={{ duration: 0.4 }}
+          className="w-full h-full"
+        >
+          <img
+            src={`https://api.serenmebel.uz${product.image}`}
+            alt={languageIndex?product.name_uz:product.name_ru}
+            className="w-full h-full object-cover"
+          />
+        </motion.div>
+        
+        {/* Gradient Overlay */}
+        <div className="absolute inset-0 bg-linear-to-t from-black/20 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
      </div>

-      {/* Content */}
-      <div className="p-6">
-        <h3 className="text-xl font-bold text-gray-900 mb-2">
-          {product.nameKey}
+      {/* Content Container - Flex Grow */}
+      <div className="flex flex-col grow p-6">
+        {/* Product Name */}
+        <h3 className="text-xl font-bold text-gray-900 mb-3 line-clamp-2 group-hover:text-primary transition-colors duration-300">
+          {languageIndex?product.name_uz:product.name_ru}
        </h3>
-        <p className="text-gray-600 text-sm mb-4">
-          {product.shortDescriptionKey}
+
+        {/* Short Description - Fixed Height with Line Clamp */}
+        <p className="text-gray-600 text-sm leading-relaxed mb-4 line-clamp-3 grow">
+          {languageIndex?product.name_uz:product.name_ru}
        </p>

-        {/* Specs Preview */}
-        {/* <div className="mb-4 space-y-2">
-          {product.specs.slice(0, 2).map((spec, idx) => (
-            <div key={idx} className="flex justify-between text-sm">
-              <span className="text-gray-600">{spec.key}:</span>
-              <span className="font-semibold text-gray-900">{spec.value}</span>
-            </div>
-          ))}
-        </div> */}
-
-        {/* CTA Button */}
+        {/* CTA Button - Always at Bottom */}
        <motion.button
-          whileHover={{ scale: 1.05 }}
-          whileTap={{ scale: 0.95 }}
-          onClick={() => onViewDetails(product.slug)}
-          className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-primary/80 text-white rounded-lg font-medium hover:bg-primary transition-colors"
+          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"
        >
-          {t.details}
-          <ExternalLink size={16} />
+          <span>{t.details}</span>
+          <ExternalLink className="w-4 h-4 group-hover/button:translate-x-1 transition-transform duration-300" />
        </motion.button>
      </div>
+
+      {/* 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>
  );
 }
--- a/components/productSection/ProductModal.tsx
+++ b/components/productSection/ProductModal.tsx
@@ -2,11 +2,12 @@

 import { motion, AnimatePresence } from "framer-motion";
 import { X } from "lucide-react";
-import { ProductViewer } from "./ProductViewer";
 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;
@@ -14,8 +15,12 @@ interface ProductModalProps {
 }

 export function ProductModal({ product, onClose }: ProductModalProps) {
-  const { t } = useLanguage();
+  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>
@@ -34,9 +39,9 @@ export function ProductModal({ product, onClose }: ProductModalProps) {
          className="bg-white rounded-lg max-w-4xl w-full max-h-[90vh] overflow-y-auto"
        >
          {/* Header */}
-          <div className="sticky top-0 bg-white border-b border-gray-200 p-6 flex justify-between items-center">
-            <h2 className="text-2xl font-bold text-gray-900">
-              {product.nameKey}
+          <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 }}
@@ -49,39 +54,35 @@ export function ProductModal({ product, onClose }: ProductModalProps) {
          </div>

          {/* Content */}
-          <div className="p-6">
+          <div className="sm:p-6 p-2">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
-              {/* 3D Viewer / Gallery */}
-              <div>
-                <ProductViewer
-                  modelUrl={product.model3D}
-                  images={product.images}
-                  autoRotate={true}
+              {/* Image */}
+              <div className="relative max-sm:w-full max-md:h-50">
+                <Image
+                  src={`https://api.serenmebel.uz${product.image}`}
+                  alt="image"
+                  fill
+                  className="object-contain max-md:h-50"
                />
              </div>

-              {/* Details */}
+              {/* Specifications */}
              <div>
-                <p className="text-gray-600 mb-6">
-                  {product.longDescriptionKey
-                    ? product.longDescriptionKey
-                    : product.shortDescriptionKey}
-                </p>
-
-                {/* Specifications */}
                <div className="mb-8">
                  <h3 className="text-lg font-semibold text-gray-900 mb-4">
-                    Technical Specifications
+                    {t.features}
                  </h3>
                  <div className="space-y-3">
-                    {product.specs.map((spec, idx) => (
+                    {product.features.map((spec, idx) => (
                      <div
                        key={idx}
-                        className="flex justify-between py-2 border-b border-gray-100"
+                        className="flex max-sm:flex-col justify-between py-2 border-b border-gray-100"
                      >
-                        <span className="text-gray-600">{spec.key}:</span>
-                        <span className="font-semibold text-gray-900">
-                          {spec.value}
+                        <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>
                    ))}
@@ -90,15 +91,17 @@ export function ProductModal({ product, onClose }: ProductModalProps) {

                {/* CTA Buttons */}
                <div className="space-y-3">
-                  <Link href="#contact">
+                  <Link href={isPathName ? "/#contact" : "#contact"} >
                    <motion.button
                      onClick={() => {
                        onClose();
-                        setProductName(product.nameKey);
+                        setProductName(
+                          languageIndex ? product.name_uz : product.name_ru
+                        );
                      }}
                      whileHover={{ scale: 1.05 }}
                      whileTap={{ scale: 0.95 }}
-                      className="w-full px-6 py-3 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700 transition-colors"
+                      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>
@@ -106,6 +109,9 @@ export function ProductModal({ product, onClose }: ProductModalProps) {
                </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>
--- a/components/productSection/ProductsGrid.tsx
+++ b/components/productSection/ProductsGrid.tsx
@@ -1,8 +1,7 @@
 "use client";

-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { motion } from "framer-motion";
-import { getAllProducts } from "@/lib/products";
 import type { Product } from "@/lib/products";
 import Image from "next/image";
 import { useLanguage } from "@/context/language-context";
@@ -10,34 +9,33 @@ import Link from "next/link";
 import { ChevronsRight } from "lucide-react";
 import { ProductCard } from "./ProductCard";
 import { ProductModal } from "./ProductModal";
+import axios from "axios";

 // hello everyone

 export function ProductsGrid() {
  const { t } = useLanguage();
-  const products = getAllProducts();
  const [selectedProduct, setSelectedProduct] = useState<Product | null>(null);
+  const [allProducts, setAllProducts] = useState<any>([]);

-  const handleViewDetails = (slug: string) => {
-    const product = products.find((p) => p.slug === slug);
+  useEffect(() => {
+    async function getData() {
+      await axios.get("https://api.serenmebel.uz/api/products/").then((res) => {
+        console.log("all data main page: ", res?.data);
+        const allData = res?.data || [];
+        setAllProducts(allData.slice(0,3));
+      });
+    }
+    getData();
+  }, []);
+
+  const handleViewDetails = (slug: number) => {
+    const product = allProducts.find((p: any) => p.id === slug);
    if (product) {
      setSelectedProduct(product);
    }
  };

-  const containerVariants = {
-    hidden: { opacity: 0 },
-    visible: {
-      opacity: 1,
-      transition: { staggerChildren: 0.1 },
-    },
-  };
-
-  const itemVariants = {
-    hidden: { opacity: 0, y: 20 },
-    visible: { opacity: 1, y: 0 },
-  };
-
  return (
    <>
      <section id="products" className="relative py-20">
@@ -67,14 +65,13 @@ export function ProductsGrid() {

          {/* Product Grid */}
          <motion.div
-            variants={containerVariants}
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true }}
            className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
          >
-            {products.map((product) => (
-              <motion.div key={product.id} variants={itemVariants}>
+            {allProducts.map((product: any) => (
+              <motion.div key={product.id} >
                <ProductCard
                  product={product}
                  onViewDetails={handleViewDetails}
--- a/components/productsPage/emptyData.tsx
+++ b/components/productsPage/emptyData.tsx
@@ -55,12 +55,12 @@ export default function EmptyState() {
            </p>

            <div className="mt-6 flex flex-col sm:flex-row items-center sm:items-start gap-3 md:gap-4 justify-center md:justify-start">
-              <motion.a
+              <motion.div
                className="inline-flex items-center justify-center px-5 py-2.5 bg-primary/70 hover:bg-primary text-white rounded-lg shadow-md transition-colors text-sm font-medium"
                // @ts-ignore allow Link-like anchor
              >
                <Link href="/">{t.empty_data.back || "Bosh sahifa"}</Link>
-              </motion.a>
+              </motion.div>
            </div>
          </motion.div>
        </div>
--- a/components/productsPage/products.tsx
+++ b/components/productsPage/products.tsx
@@ -1,10 +1,10 @@
 "use client";
 import { useEffect, useState } from "react";
 import EmptyState from "./emptyData";
-import { GET } from "@/lib/allProducts";
 import { ProductModal } from "../productSection/ProductModal";
 import { motion } from "framer-motion";
 import { ProductCard } from "../productSection/ProductCard";
+import axios from "axios";

 const itemVariants = {
  hidden: { opacity: 0, y: 20 },
@@ -14,21 +14,26 @@ const itemVariants = {
 export default function Products() {
  const [allProducts, setAllProducts] = useState<any>(null);
  const [selectedProduct, setSelectedProduct] = useState<any>(null);
-  const all = GET();
+
  useEffect(() => {
-    all && Array.isArray(all) && all.length > 0
-      ? setAllProducts(all)
-      : setAllProducts([]);
-    setAllProducts;
-  }, [all]);
-  const handleViewDetails = (slug: string) => {
-    const product = allProducts.find((p: any) => p.slug === slug);
+    async function getData() {
+      await axios.get("https://api.serenmebel.uz/api/products/").then((res) => {
+        console.log("all data: ", res?.data);
+        const allData = res?.data || [];
+        setAllProducts(allData);
+      });
+    }
+    getData();
+  }, []);
+
+  const handleViewDetails = (id: number) => {
+    const product = allProducts.find((p: any) => p.id === id);
    if (product) {
      setSelectedProduct(product);
    }
  };
  return (
-    <div className="">
+    <div className="py-20 max-w-[1200px] w-full mx-auto px-2 ">
      {allProducts && allProducts.length > 0 ? (
        <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-4">
          {allProducts.map((product: any) => (