88 lines
3.2 KiB
TypeScript
88 lines
3.2 KiB
TypeScript
|
|
|
|
import Layout from "@/components/layout/Layout"
|
|
import Link from "next/link"
|
|
import { recipesList } from "../../../utility/constant.utils";
|
|
export default function Recipes() {
|
|
|
|
return (
|
|
<>
|
|
|
|
<Layout headerStyle={1} footerStyle={1}>
|
|
<div>
|
|
<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/community/recipes/recipes-banner.webp)' }}>
|
|
<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>
|
|
{/*===== HERO AREA ENDS =======*/}
|
|
{/*===== BLOG AREA STARTS =======*/}
|
|
<div className="bloginner-section-area sp1">
|
|
<div className="container">
|
|
<div className="row">
|
|
{recipesList.map((post) => (
|
|
|
|
<div key= {post.id} className="col-lg-4 col-md-6" data-aos="zoom-in" data-aos-duration={800}>
|
|
<div className="blog4-boxarea">
|
|
<div className="img1">
|
|
<img src={post.image} alt={post.title} />
|
|
</div>
|
|
<div className="content-area">
|
|
<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}</Link>
|
|
</li>
|
|
</ul>
|
|
<div className="space20" />
|
|
<Link href={`/community/single-recipes?slug=${post?.slug}`}> {post.title.length > 40 ? `${post.title.slice(0, 40)}...` : post?.title}</Link>
|
|
<div className="space24" />
|
|
<Link href={`/community/single-recipes?slug=${post?.slug}`} className="readmore">read more <i className="fa-solid fa-arrow-right" /></Link>
|
|
<div className="arrow">
|
|
<Link href={`/community/single-recipes?slug=${post?.slug}`}><i className="fa-solid fa-arrow-right" /></Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
<div className="space30" />
|
|
{/* <div className="pagination-area">
|
|
<nav aria-label="Page navigation example">
|
|
<ul className="pagination">
|
|
<li className="page-item">
|
|
<Link className="page-link" href="/#" aria-label="Previous">
|
|
<i className="fa-solid fa-angle-left" />
|
|
</Link>
|
|
</li>
|
|
<li className="page-item"><Link className="page-link active" href="/#">1</Link></li>
|
|
<li className="page-item"><Link className="page-link" href="/#">2</Link></li>
|
|
<li className="page-item"><Link className="page-link" href="/#">...</Link></li>
|
|
<li className="page-item"><Link className="page-link" href="/#">12</Link></li>
|
|
<li className="page-item">
|
|
<Link className="page-link" href="/#" aria-label="Next">
|
|
<i className="fa-solid fa-angle-right" />
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div> */}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</Layout>
|
|
</>
|
|
)
|
|
} |