web/components/Blog/BlogData/page.jsx

60 lines
1.8 KiB
JavaScript

"use client";
import Image from "next/image";
import React, { useContext, useEffect, useState } from "react";
import Footer from "@comp/Footer/page";
import Navbar from "@comp/Navbar/page";
import "../BlogComponents/styleBlog.css";
import TimerDown from "@comp/TimerDown/TimerDown";
import TimerDownBlog from "@comp/TimerDown/TimerDown";
import PersianNumber from "plugins/PersianNumber";
import SliderProductsOffer from "../BlogComponents/SliderProductsOffer/page";
import AppContext from "@ctx/AppContext";
const BlogData = ({ data }) => {
const CTX = useContext(AppContext);
const specialOfferData = CTX.state.specialOfferData;
useEffect(() => {
if (specialOfferData.length <= 0) {
CTX.fetchSpecialOffer();
}
}, []);
return (
<div>
<Navbar />
<div className="mb-10 xs:px-3 md:px-5 md:container md:mx-auto">
<div className="grid xs:grid-cols-1 lg:grid-cols-6 gap-7 rtl">
<div className="mt-10 lg:col-span-4 rtl">
<div className="mt-10 ">
<Image
src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/Images/Med/${data?.mainImage}`}
width={500}
height={500}
className="mb-3 xs:w-full lg:w-6/12 rounded-3xl"
/>
<h1 className=" font-bold text-right xs:text-[20px] lg:text-[40px]">
{data.title}
</h1>
<div></div>
<div
id="blog-content"
dangerouslySetInnerHTML={{ __html: data.content }}
/>
</div>
</div>
<div className="mt-10 lg:col-span-2 rtl ">
<SliderProductsOffer data={specialOfferData} />
</div>
</div>
</div>
<Footer />
</div>
);
};
export default BlogData;