MetatroncubeSoftwareSolutions/TamilCulturalAssociation
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update: Read more section in single-recipes & blog-single page

Browse Source
This commit is contained in:
srividya 2025-07-05 20:46:13 +05:30
parent 516db5f4b6
commit 271ea28942
3 changed files with 79 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
app/blog-single/page.tsx
View File

@ -1,13 +1,18 @@
'use client' 'use client'
import { useState } from 'react' import { useState } from 'react'
import { useSearchParams } from 'next/navigation'
import ModalVideo from 'react-modal-video' import ModalVideo from 'react-modal-video'
import "@/node_modules/react-modal-video/css/modal-video.css" import "@/node_modules/react-modal-video/css/modal-video.css"
import Countdown from '@/components/elements/Countdown' import Countdown from '@/components/elements/Countdown'
import Layout from "@/components/layout/Layout" import Layout from "@/components/layout/Layout"
import { recipesList } from "@/utility/constant.utils";
import Link from "next/link" import Link from "next/link"
export default function BlogSingle() { export default function BlogSingle() {
const [isOpen, setOpen] = useState(false) const [isOpen, setOpen] = useState(false)
const searchParams = useSearchParams();
const currentSlug = searchParams.get('slug');
return ( return (
<> <>
@ -199,70 +204,27 @@ export default function BlogSingle() {
</div> </div>
</div> </div>
<div className="row"> <div className="row">
<div className="col-lg-4 col-md-6" data-aos="zoom-in" data-aos-duration={800}> {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="blog4-boxarea">
<div className="img1"> <div className="img1">
<img src="/assets/img/all-images/memory/memory-img7.png" alt="" /> <img src={post.image} alt={post.title} />
</div> </div>
<div className="content-area"> <div className="content-area">
<ul> <ul>
<li> <li>
<Link href="/#"><img src="/assets/img/icons/calender1.svg" alt="" />26 Jan 2025 <span> | </span></Link> <Link href="/#"><img src="/assets/img/icons/calender1.svg" alt="" />{post.date}<span> | </span></Link>
</li> </li>
<li> <li>
<Link href="/#"><img src="/assets/img/icons/user1.svg" alt="" />Beverly</Link> <Link href="/#"><img src="/assets/img/icons/user1.svg" alt="" />{post.user}</Link>
</li> </li>
</ul> </ul>
<div className="space20" /> <div className="space20" />
<Link href="/blog-single">Eventify 2024: Unlock the Future of Business</Link> <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 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" /> <div className="space24" />
<Link href="/blog-single" className="readmore">read more <i className="fa-solid fa-arrow-right" /></Link> <Link href="/blog-single" className="readmore">read more <i className="fa-solid fa-arrow-right" /></Link>
<div className="arrow"> <div className="arrow">
@ -271,6 +233,8 @@ export default function BlogSingle() {
</div> </div>
</div> </div>
</div> </div>
))
}
</div> </div>
</div> </div>
</div> </div>

19
app/community/single-recipes/page.tsx
View File

@ -87,22 +87,26 @@ const Page = () => {
</div> </div>
</div> </div>
<div className="row"> <div className="row">
<div className="col-lg-4 col-md-6" data-aos="zoom-in" data-aos-duration={800}> {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="blog4-boxarea">
<div className="img1"> <div className="img1">
<img src="/assets/img/all-images/memory/memory-img7.png" alt="" /> <img src={relatedPost.image} alt={relatedPost.title} />
</div> </div>
<div className="content-area"> <div className="content-area">
<ul> <ul>
<li> <li>
<Link href="/#"><img src="/assets/img/icons/calender1.svg" alt="" />26 Jan 2025 <span> | </span></Link> <Link href="/#"><img src="/assets/img/icons/calender1.svg" alt="" />{relatedPost.date}<span> | </span></Link>
</li> </li>
<li> <li>
<Link href="/#"><img src="/assets/img/icons/user1.svg" alt="" />Beverly</Link> <Link href="/#"><img src="/assets/img/icons/user1.svg" alt="" />{relatedPost.user}</Link>
</li> </li>
</ul> </ul>
<div className="space20" /> <div className="space20" />
<Link href="/blog-single">Eventify 2024: Unlock the Future of Business</Link> <Link href={`/community/single-recipes?slug=${relatedPost?.slug}`}> {relatedPost.title.length > 40 ? `${relatedPost.title.slice(0, 40)}...` : relatedPost?.title}</Link>
<div className="space24" /> <div className="space24" />
<Link href="/blog-single" className="readmore">read more <i className="fa-solid fa-arrow-right" /></Link> <Link href="/blog-single" className="readmore">read more <i className="fa-solid fa-arrow-right" /></Link>
<div className="arrow"> <div className="arrow">
@ -111,7 +115,8 @@ const Page = () => {
</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="blog4-boxarea">
<div className="img1"> <div className="img1">
<img src="/assets/img/all-images/memory/memory-img8.png" alt="" /> <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> */}
</div> </div>
</div> </div>
</div> </div>

8
public/assets/css/main.css
View File

@ -6659,7 +6659,7 @@ Location:
} }
.blog-details-section .blog-deatils-content .tags-social-area .tags ul li a:hover { .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; transition: all 0.4s;
} }
@ -6700,7 +6700,7 @@ Location:
} }
.blog-details-section .blog-deatils-content .tags-social-area .social ul li a:hover { .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; transition: all 0.4s;
} }
@ -6837,7 +6837,7 @@ Location:
} }
.blog-details-section .blog-auhtor-details .tags-area ul li a:hover { .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; transition: all 0.4s;
} }
@ -20047,7 +20047,7 @@ html {
} }
.cta1-section-area .cta1-main-boxarea { .cta1-section-area .cta1-main-boxarea {
background: var(--ztc-bg-bg-3); background: var(--ztc-bg-bg-15);
border-radius: 8px; border-radius: 8px;
padding: 44px; padding: 44px;
} }