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

108
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,78 +204,37 @@ 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
<div className="blog4-boxarea"> .filter(post => post.slug !== currentSlug)
<div className="img1"> .slice(0, 3)
<img src="/assets/img/all-images/memory/memory-img7.png" alt="" /> .map((post) => (
</div>
<div className="content-area"> <div key={post.id} className="col-lg-4 col-md-6" data-aos="zoom-in" data-aos-duration={800}>
<ul> <div className="blog4-boxarea">
<li> <div className="img1">
<Link href="/#"><img src="/assets/img/icons/calender1.svg" alt="" />26 Jan 2025 <span> | </span></Link> <img src={post.image} alt={post.title} />
</li> </div>
<li> <div className="content-area">
<Link href="/#"><img src="/assets/img/icons/user1.svg" alt="" />Beverly</Link> <ul>
</li> <li>
</ul> <Link href="/#"><img src="/assets/img/icons/calender1.svg" alt="" />{post.date}<span> | </span></Link>
<div className="space20" /> </li>
<Link href="/blog-single">Eventify 2024: Unlock the Future of Business</Link> <li>
<div className="space24" /> <Link href="/#"><img src="/assets/img/icons/user1.svg" alt="" />{post.user}</Link>
<Link href="/blog-single" className="readmore">read more <i className="fa-solid fa-arrow-right" /></Link> </li>
<div className="arrow"> </ul>
<Link href="/blog-single"><i className="fa-solid fa-arrow-right" /></Link> <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> ))
</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> </div>
</div> </div>
@ -282,7 +246,7 @@ export default function BlogSingle() {
<div className="col-lg-10 m-auto"> <div className="col-lg-10 m-auto">
<div className="cta1-main-boxarea"> <div className="cta1-main-boxarea">
<div className="timer-btn-area"> <div className="timer-btn-area">
<Countdown /> <Countdown />
<div className="btn-area1"> <div className="btn-area1">
<Link href="/pricing-plan" className="vl-btn1">Buy Ticket</Link> <Link href="/pricing-plan" className="vl-btn1">Buy Ticket</Link>
</div> </div>
@ -308,7 +272,7 @@ export default function BlogSingle() {
<div className="col-lg-10 m-auto"> <div className="col-lg-10 m-auto">
<div className="cta1-main-boxarea"> <div className="cta1-main-boxarea">
<div className="timer-btn-area"> <div className="timer-btn-area">
<Countdown /> <Countdown />
<div className="btn-area1"> <div className="btn-area1">
<Link href="/pricing-plan" className="vl-btn1">Buy Ticket</Link> <Link href="/pricing-plan" className="vl-btn1">Buy Ticket</Link>
</div> </div>

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

@ -9,8 +9,8 @@ import { Suspense } from "react";
const Page = () => { const Page = () => {
// const { slug } = params; // const { slug } = params;
const searchParams = useSearchParams(); const searchParams = useSearchParams();
const slug = searchParams.get('slug'); const slug = searchParams.get('slug');
console.log("slug", slug) console.log("slug", slug)
const post = recipesList.find((post) => post.slug === slug); const post = recipesList.find((post) => post.slug === slug);
const [mounted, setMounted] = useState(false); const [mounted, setMounted] = useState(false);
@ -87,31 +87,36 @@ 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
<div className="blog4-boxarea"> .filter(p => p.slug !== slug)
<div className="img1"> .slice(0, 3)
<img src="/assets/img/all-images/memory/memory-img7.png" alt="" /> .map((relatedPost) => (
</div> <div key={relatedPost.id} className="col-lg-4 col-md-6" data-aos="zoom-in" data-aos-duration={800}>
<div className="content-area"> <div className="blog4-boxarea">
<ul> <div className="img1">
<li> <img src={relatedPost.image} alt={relatedPost.title} />
<Link href="/#"><img src="/assets/img/icons/calender1.svg" alt="" />26 Jan 2025 <span> | </span></Link> </div>
</li> <div className="content-area">
<li> <ul>
<Link href="/#"><img src="/assets/img/icons/user1.svg" alt="" />Beverly</Link> <li>
</li> <Link href="/#"><img src="/assets/img/icons/calender1.svg" alt="" />{relatedPost.date}<span> | </span></Link>
</ul> </li>
<div className="space20" /> <li>
<Link href="/blog-single">Eventify 2024: Unlock the Future of Business</Link> <Link href="/#"><img src="/assets/img/icons/user1.svg" alt="" />{relatedPost.user}</Link>
<div className="space24" /> </li>
<Link href="/blog-single" className="readmore">read more <i className="fa-solid fa-arrow-right" /></Link> </ul>
<div className="arrow"> <div className="space20" />
<Link href="/blog-single"><i className="fa-solid fa-arrow-right" /></Link> <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> ))}
</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>
@ -171,14 +176,14 @@ const Page = () => {
} }
const RecipePage = (() => { const RecipePage = (() => {
return ( return (
<Layout headerStyle={1} footerStyle={1}> <Layout headerStyle={1} footerStyle={1}>
<Suspense fallback={<PageLoader />}> <Suspense fallback={<PageLoader />}>
<Page /> <Page />
</Suspense> </Suspense>
</Layout> </Layout>
) )
}) })
export default RecipePage; export default RecipePage;

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;
} }