Update: Read more section in single-recipes & blog-single page
This commit is contained in:
parent
516db5f4b6
commit
271ea28942
@ -1,13 +1,18 @@
|
||||
'use client'
|
||||
import { useState } from 'react'
|
||||
import { useSearchParams } from 'next/navigation'
|
||||
import ModalVideo from 'react-modal-video'
|
||||
import "@/node_modules/react-modal-video/css/modal-video.css"
|
||||
import Countdown from '@/components/elements/Countdown'
|
||||
import Layout from "@/components/layout/Layout"
|
||||
import { recipesList } from "@/utility/constant.utils";
|
||||
import Link from "next/link"
|
||||
export default function BlogSingle() {
|
||||
|
||||
const [isOpen, setOpen] = useState(false)
|
||||
|
||||
const searchParams = useSearchParams();
|
||||
const currentSlug = searchParams.get('slug');
|
||||
return (
|
||||
<>
|
||||
|
||||
@ -199,78 +204,37 @@ export default function BlogSingle() {
|
||||
</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>
|
||||
{recipesList
|
||||
.filter(post => post.slug !== currentSlug)
|
||||
.slice(0, 3)
|
||||
.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="/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 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>
|
||||
@ -282,7 +246,7 @@ export default function BlogSingle() {
|
||||
<div className="col-lg-10 m-auto">
|
||||
<div className="cta1-main-boxarea">
|
||||
<div className="timer-btn-area">
|
||||
<Countdown />
|
||||
<Countdown />
|
||||
<div className="btn-area1">
|
||||
<Link href="/pricing-plan" className="vl-btn1">Buy Ticket</Link>
|
||||
</div>
|
||||
@ -308,7 +272,7 @@ export default function BlogSingle() {
|
||||
<div className="col-lg-10 m-auto">
|
||||
<div className="cta1-main-boxarea">
|
||||
<div className="timer-btn-area">
|
||||
<Countdown />
|
||||
<Countdown />
|
||||
<div className="btn-area1">
|
||||
<Link href="/pricing-plan" className="vl-btn1">Buy Ticket</Link>
|
||||
</div>
|
||||
|
||||
@ -9,8 +9,8 @@ import { Suspense } from "react";
|
||||
|
||||
const Page = () => {
|
||||
// const { slug } = params;
|
||||
const searchParams = useSearchParams();
|
||||
const slug = searchParams.get('slug');
|
||||
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);
|
||||
@ -87,31 +87,36 @@ const Page = () => {
|
||||
</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>
|
||||
{recipesList
|
||||
.filter(p => p.slug !== slug)
|
||||
.slice(0, 3)
|
||||
.map((relatedPost) => (
|
||||
<div key={relatedPost.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={relatedPost.image} alt={relatedPost.title} />
|
||||
</div>
|
||||
<div className="content-area">
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/#"><img src="/assets/img/icons/calender1.svg" alt="" />{relatedPost.date}<span> | </span></Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/#"><img src="/assets/img/icons/user1.svg" alt="" />{relatedPost.user}</Link>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="space20" />
|
||||
<Link href={`/community/single-recipes?slug=${relatedPost?.slug}`}> {relatedPost.title.length > 40 ? `${relatedPost.title.slice(0, 40)}...` : relatedPost?.title}</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 className="col-lg-4 col-md-6" data-aos="zoom-in" data-aos-duration={1000}>
|
||||
))}
|
||||
{/* <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="" />
|
||||
@ -158,7 +163,7 @@ const Page = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -171,14 +176,14 @@ const Page = () => {
|
||||
}
|
||||
|
||||
const RecipePage = (() => {
|
||||
return (
|
||||
<Layout headerStyle={1} footerStyle={1}>
|
||||
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Page />
|
||||
</Suspense>
|
||||
</Layout>
|
||||
)
|
||||
return (
|
||||
<Layout headerStyle={1} footerStyle={1}>
|
||||
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Page />
|
||||
</Suspense>
|
||||
</Layout>
|
||||
)
|
||||
})
|
||||
|
||||
export default RecipePage;
|
||||
@ -6659,7 +6659,7 @@ Location:
|
||||
}
|
||||
|
||||
.blog-details-section .blog-deatils-content .tags-social-area .tags ul li a:hover {
|
||||
background: var(--ztc-bg-bg-3);
|
||||
background: var(--ztc-bg-bg-15);
|
||||
transition: all 0.4s;
|
||||
}
|
||||
|
||||
@ -6700,7 +6700,7 @@ Location:
|
||||
}
|
||||
|
||||
.blog-details-section .blog-deatils-content .tags-social-area .social ul li a:hover {
|
||||
background: var(--ztc-bg-bg-3);
|
||||
background: var(--ztc-bg-bg-15);
|
||||
transition: all 0.4s;
|
||||
}
|
||||
|
||||
@ -6837,7 +6837,7 @@ Location:
|
||||
}
|
||||
|
||||
.blog-details-section .blog-auhtor-details .tags-area ul li a:hover {
|
||||
background: var(--ztc-bg-bg-3);
|
||||
background: var(--ztc-bg-bg-15);
|
||||
transition: all 0.4s;
|
||||
}
|
||||
|
||||
@ -20047,7 +20047,7 @@ html {
|
||||
}
|
||||
|
||||
.cta1-section-area .cta1-main-boxarea {
|
||||
background: var(--ztc-bg-bg-3);
|
||||
background: var(--ztc-bg-bg-15);
|
||||
border-radius: 8px;
|
||||
padding: 44px;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user