TamilCulturalAssociation/app/community/single-recipes/page.tsx

'use client'
import Layout from "@/components/layout/Layout"
import { recipesList } from "@/utility/constant.utils";
import PageLoader from "@/components/common-component/PageLoader";
import Link from "next/link"
import { useSearchParams } from 'next/navigation';
import { useEffect, useState } from "react";
import { Suspense } from "react";

const Page = () => {
	// const { slug } = params;
	 const searchParams = useSearchParams();
	 const slug = searchParams.get('slug');
	console.log("slug", slug)
	const post = recipesList.find((post) => post.slug === slug);
	const [mounted, setMounted] = useState(false);

	useEffect(() => {
		setMounted(true);
	}, []);

	if (!post) {
		return <p>post not found!</p>;
	}

	return (
		<>

			<Layout headerStyle={1} footerStyle={1}>
				<div>
					<div className="inner-page-header" style={{ backgroundImage: 'url(../../assets/img/bg/header-bg13.png)' }}>
						<div className="container">
							<div className="row">
								<div className="col-lg-6 m-auto">
									<div className="heading1 text-center">
										<h1>Recipes</h1>
										<div className="space20" />
										<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Recipes</span></Link>
									</div>
								</div>
							</div>
						</div>
					</div>

					{/*===== BLOG AREA STARTS =======*/}
					<div className="blog-details-section sp8">
						<div className="container">
							<div className="row">
								<div className="col-lg-12">
									<div className="blog-deatils-content heading2">
										<div className="img1">
											<img src={post?.image} alt="recipe" />
										</div>
										<div className="space32" />
										<ul>
											<li>
												<Link href="/#"><img src="/assets/img/icons/calender1.svg" alt="" />{post?.date} <span> | </span></Link>
											</li>
											<li>
												<Link href="/#"><img src="/assets/img/icons/user1.svg" alt="" />{post?.user}<span> | </span></Link>
											</li>

										</ul>
										<div className="space18" />
										{mounted && <div dangerouslySetInnerHTML={{ __html: post?.description || "" }} />}

										<div className="space32" />
										<div className="tags-social-area">
											<div className="tags">
												{mounted && <div dangerouslySetInnerHTML={{ __html: post?.tags || "" }} />}
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					{/*===== BLOG AREA ENDS =======*/}
					{/*===== BLOG AREA STARTS =======*/}
					<div className="bloginner-section-area sp1">
						<div className="container">
							<div className="row">
								<div className="col-lg-5 m-auto">
									<div className="heading2 text-center space-margin60">
										<h2>Read More Recipes</h2>
									</div>
								</div>
							</div>
							<div className="row">
								<div className="col-lg-4 col-md-6" data-aos="zoom-in" data-aos-duration={800}>
									<div className="blog4-boxarea">
										<div className="img1">
											<img src="/assets/img/all-images/memory/memory-img7.png" alt="" />
										</div>
										<div className="content-area">
											<ul>
												<li>
													<Link href="/#"><img src="/assets/img/icons/calender1.svg" alt="" />26 Jan 2025 <span> | </span></Link>
												</li>
												<li>
													<Link href="/#"><img src="/assets/img/icons/user1.svg" alt="" />Beverly</Link>
												</li>
											</ul>
											<div className="space20" />
											<Link href="/blog-single">Eventify 2024: Unlock the Future of Business</Link>
											<div className="space24" />
											<Link href="/blog-single" className="readmore">read more <i className="fa-solid fa-arrow-right" /></Link>
											<div className="arrow">
												<Link href="/blog-single"><i className="fa-solid fa-arrow-right" /></Link>
											</div>
										</div>
									</div>
								</div>
								<div className="col-lg-4 col-md-6" data-aos="zoom-in" data-aos-duration={1000}>
									<div className="blog4-boxarea">
										<div className="img1">
											<img src="/assets/img/all-images/memory/memory-img8.png" alt="" />
										</div>
										<div className="content-area">
											<ul>
												<li>
													<Link href="/#"><img src="/assets/img/icons/calender1.svg" alt="" />26 Jan 2025 <span> | </span></Link>
												</li>
												<li>
													<Link href="/#"><img src="/assets/img/icons/user1.svg" alt="" />Gisselle</Link>
												</li>
											</ul>
											<div className="space20" />
											<Link href="/blog-single">Where Vision Meetup Connect: Eventify 2024</Link>
											<div className="space24" />
											<Link href="/blog-single" className="readmore">read more <i className="fa-solid fa-arrow-right" /></Link>
											<div className="arrow">
												<Link href="/blog-single"><i className="fa-solid fa-arrow-right" /></Link>
											</div>
										</div>
									</div>
								</div>
								<div className="col-lg-4 col-md-6" data-aos="zoom-in" data-aos-duration={1200}>
									<div className="blog4-boxarea">
										<div className="img1">
											<img src="/assets/img/all-images/memory/memory-img9.png" alt="" />
										</div>
										<div className="content-area">
											<ul>
												<li>
													<Link href="/#"><img src="/assets/img/icons/calender1.svg" alt="" />26 Jan 2025 <span> | </span></Link>
												</li>
												<li>
													<Link href="/#"><img src="/assets/img/icons/user1.svg" alt="" />Mertie</Link>
												</li>
											</ul>
											<div className="space20" />
											<Link href="/blog-single">Fuel Your Business Growth at Eventify</Link>
											<div className="space24" />
											<Link href="/blog-single" className="readmore">read more <i className="fa-solid fa-arrow-right" /></Link>
											<div className="arrow">
												<Link href="/blog-single"><i className="fa-solid fa-arrow-right" /></Link>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					{/*===== Recipe AREA ENDS =======*/}

				</div>
			</Layout>
		</>
	)
}

const RecipePage = (() => {
    return (
       <Layout headerStyle={1} footerStyle={1}>
            
            <Suspense fallback={<PageLoader />}>
                <Page />
            </Suspense>
        </Layout>
    )
})

export default RecipePage;