pdp response and check ck editor

main
حسین معصومی پور 2025-02-17 02:11:47 +03:30
parent 5b35dfacdd
commit 7a5bef0622
3 changed files with 96 additions and 5 deletions

View File

@ -1,12 +1,25 @@
import ProductData from "@comp/AppsComponent/ProductData/page";
import { notFound, redirect } from "next/navigation";
import Product from "src/view/Products";
const page = async ({ params, searchParams }) => {
const data = {
id: 1,
persianName: "Hydrating Cream",
englishName: "Hydrating Cream",
description:
"Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptates impedit officia eos quo aliquam soluta iste earum aliquid harum doloremque iure consectetur vel, cumque autem id, numquam quisquam mollitia velit. . Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptates impedit officia eos quo aliquam soluta iste earum aliquid harum doloremque iure consectetur vel, cumque autem id, numquam quisquam mollitia velit. . ",
cost: 250000,
costWithDiscount: 200000,
hasDiscount: true,
discountPercent: 20,
stock: 5,
mainImage: "4",
};
async function getData(id) {
return (
<>
<Product params={params} data={data} />
</>
);
}
};
export default Page;
export default page;

View File

@ -1,3 +1,4 @@
import Link from "next/link";
import React from "react";
import CardNormal from "src/components/Cards/CardNormal/page";
@ -220,6 +221,15 @@ const Products = () => {
</div>
))}
</div>
<div className="flex justify-center">
<Link href={"categories/Product-20Listing-Page"}>
<button className="btn btn-primary px-10 text-sm ">
{" "}
See All Products
</button>
</Link>
</div>
</div>
</div>
);

View File

@ -0,0 +1,68 @@
import React from "react";
import test from "../../assets/images/product/1.png";
import Navbar from "src/components/NavBar";
import Image from "next/image";
const Product = ({ data }) => {
const testDataCk =
'<h1 style="color:#ff6347;">Hydrating Cream - Ultimate Skincare Solution</h1><p style="color:#4682b4;">Discover the power of deep hydration with our <strong>premium Hydrating Cream</strong>. Designed to nourish and protect your skin, this cream is enriched with essential vitamins and natural extracts.</p><h2 style="color:#32cd32;">Why Choose Our Hydrating Cream?</h2><p style="color:#8a2be2;">Our formula ensures your skin remains <em>moisturized</em> and <em>rejuvenated</em> throughout the day. It absorbs quickly and leaves no greasy residue, making it perfect for all skin types.</p><ul><li style="color:#ff4500;"><strong>Deep Moisturization</strong> - Keeps your skin hydrated for 24 hours.</li><li style="color:#00ced1;"><strong>Natural Ingredients</strong> - Aloe vera, shea butter, and vitamin E.</li><li style="color:#daa520;"><strong>Non-Greasy Formula</strong> - Lightweight and easy to apply.</li><li style="color:#dc143c;"><strong>Suitable for All Skin Types</strong> - Works for dry, oily, and combination skin.</li></ul><h2 style="color:#ff69b4;">Key Benefits</h2><p style="color:#2e8b57;">✔ Restores skins natural glow<br>✔ Prevents dryness and flakiness<br>✔ Reduces fine lines and wrinkles<br>✔ Soothes irritation and redness</p><h2 style="color:#1e90ff;">How to Use?</h2><p style="color:#8b0000;">Apply a small amount of Hydrating Cream to your face and neck. Gently massage in circular motions until fully absorbed. Use morning and night for best results.</p><h2 style="color:#ff8c00;">Ingredients</h2><p style="color:#4b0082;">Water, Glycerin, Aloe Vera Extract, Shea Butter, Vitamin E, Hyaluronic Acid, Essential Oils, Antioxidants.</p><h2 style="color:#ff0000;">Customer Reviews</h2><p style="color:#006400;"><strong>⭐⭐⭐⭐⭐</strong> "Absolutely love this cream! My skin feels so soft and refreshed!" - Sarah K.</p><p style="color:#8b4513;"><strong>⭐⭐⭐⭐⭐</strong> "Best moisturizer Ive ever used. Highly recommended!" - David R.</p><h2 style="color:#800080;">Frequently Asked Questions</h2><p style="color:#191970;"><strong>Q: Is this suitable for sensitive skin?</strong> <br>A: Yes! Our formula is dermatologically tested and safe for sensitive skin.</p><p style="color:#a52a2a;"><strong>Q: Can I use this under makeup?</strong> <br>A: Absolutely! It creates a perfect base for smooth makeup application.</p><h2 style="color:#ff1493;">Final Thoughts</h2><p style="color:#008b8b;">Hydrating Cream is your go-to solution for lasting hydration and healthy skin. Experience the difference with our expertly crafted formula. </p><p style="color:#cd5c5c;"><strong>Get yours today and say hello to beautifully hydrated skin!</strong></p>';
return (
<>
<Navbar theme={1} />
<div className="flex flex-col md:flex-row lg:px-20 ">
<div className="lg:col-span-3 ">
<div className="w-full rounded-3xl">
<div className="flex justify-center xs:pb-[10px] ">
<div className="w-[500px]">
<Image
src={test}
width={350}
height={350}
className=" mx-auto !object-cover"
alt={data.persianName}
priority
loading="eager"
/>
</div>
</div>
</div>
</div>
<div className="lg:col-span-3 xs:px-5 lg:px-0 ">
<div className="text-left mt-7">
<h1 className="text-lg font-medium ">{data.englishName} </h1>
<p className="mb-0 text-sm text-gray-400">{data.englishName} </p>
</div>
<div className="flex my-4">
<div className="px-3 py-1 ml-2 rounded-full bg-primary-400">
<p className="mb-0 text-sm text-white ">orginal </p>
</div>
<div className="px-3 py-1 ml-2 rounded-full bg-danger-100">
<p className="mb-0 text-sm text-white ">off today </p>
</div>
<div className="px-3 py-1 ml-2 rounded-full bg-secondary-500">
<p className="mb-0 text-sm text-white ">no stock</p>
</div>
</div>
<div>
<div className="flex justify-between mt-3 text-left">
<h2 className="mb-0 text-sm text-gray-400">
{data?.description}
</h2>
</div>
</div>
</div>
</div>
<div className="xs:px-5 lg:px-20 pb-20">
<div dangerouslySetInnerHTML={{ __html: testDataCk }} />
</div>
</>
);
};
export default Product;