Default Component - Copy this React, Tailwind Component to your project

"use client"; import React, { useEffect, useState } from "react"; import Image from "next/image"; import Link from "next/link"; import toast from "react hot toast"; import { ShoppingCart } from "lucide react"; import { useDispatch } from "react redux"; import { addToCart } from "../../../redux/slices/cartSlice"; // مكوّن عرض تفاصيل المنتج بتصميم متناوب مثل تصميم الشهادات const ProductItem = ({ product, index, customization, dispatch }) => { // تحديد ألوان التصميم بناءً على إعدادات التخصيص const primaryColor = customization.primaryColor || "#3B82F6"; const secondaryColor = customization.secondaryColor || "#1E293B"; const accentColor = customization.accentColor || "#F59E0B"; const lightBackground = customization.backgroundColor || "#F8FAFC"; return ( <div className="grid grid cols 12 items center"> {/* صورة المنتج */} <div className={`col span 12 lg:col span 5 ${ index % 2 !== 0 ? "lg:order 2 xl:col start 8" : "" }`} > <Link href={`/products/${product.slug}`}> <Image src={product.imageUrl || product.image} alt={product.title} width={200} height={100} className="w 1/2 h 1/2 rounded 2xl" /> </Link> </div> {/* تفاصيل المنتج */} <div className={`col span 12 lg:col span 7 xl:col span 6 ${ index % 2 === 0 ? "xl:col start 7" : "" } lg:mt 0 p 6 xl:px 12`} > <div className="flex flex col justify center h full"> <h4 className="text 2xl font medium mb 1" style={{ color: secondaryColor }} > {product.title} </h4> <p className="mb 1" style={{ color: secondaryColor }}> {product.description} </p> <p className="text xl font bold" style={{ color: accentColor }}> {product.salePrice} د.م </p> {product.originalPrice && ( <p className="text sm line through opacity 70" style={{ color: secondaryColor }} > {product.originalPrice} د.م </p> )} {product.discountPercentage && ( <p className="text sm text red 500"> خصم {product.discountPercentage}% </p> )} <button onClick={() => { dispatch(addToCart(product)); toast.success("تم إضافة المنتج بنجاح!"); }} className="mt 4 inline block bg teal 500 text white px 6 py 2 rounded hover:bg teal 600" > أضف إلى السلة </button> </div> </div> </div> ); }; // المكوّن الرئيسي لعرض المنتجات مع جلب البيانات من API export default function ProductDisplay({ customization = {} }) { const [products, setProducts] = useState([]); const dispatch = useDispatch(); useEffect(() => { // دالة لجلب بيانات المنتجات من نقطة النهاية const fetchProducts = async () => { try { const res = await fetch("/api/products"); // تأكد من تعديل نقطة النهاية إذا لزم الأمر if (!res.ok) { throw new Error("فشل جلب البيانات"); } const data = await res.json(); setProducts(data); } catch (error) { console.error("Error fetching products:", error); toast.error("حدث خطأ أثناء جلب المنتجات"); } }; fetchProducts(); }, []); return ( <section className="py 14 md:py 24 bg white dark:bg [#0b1727] text zinc 900 dark:text white"> <div className="container px 4 mx auto"> {/* عنوان القسم */} <div className="flex justify center text center mb 6 lg:mb 12"> <div className="max w md"> <h2 className="text 3xl md:text 4xl font bold mb 6">منتجاتنا</h2> <p>اكتشف أفضل المنتجات لدينا وتمتع بجودتها العالية.</p> </div> </div> {/* عرض المنتجات بتصميم متناوب */} <div className="flex flex col gap y 6 mt 12"> {products.map((product, i) => ( <div key={product.id} className="bg teal 100 rounded 2xl p 4"> <ProductItem product={product} index={i} customization={customization} dispatch={dispatch} /> </div> ))} </div> </div> </section> ); }