88 lines
2.7 KiB
JavaScript
88 lines
2.7 KiB
JavaScript
|
|
import Link from "next/link";
|
|
import Layout from "@/components/layout/Layout";
|
|
import Blogs from "@/utils/constant.utils";
|
|
|
|
export const metadata = {
|
|
title: "Street-Food Stories from Sixty5 Street",
|
|
description: "Dive into the Sixty5 Street blog for behind-the-scenes stories, flavor experiments, new dish launches and street-food culture updates.",
|
|
};
|
|
|
|
const truncateWords = (text, limit) => {
|
|
const words = text.split(" ");
|
|
return words.length > limit ? words.slice(0, limit).join(" ") + " ..." : text;
|
|
};
|
|
|
|
const stripHtml = (html) => {
|
|
if (!html) return "";
|
|
return html.replace(/<[^>]*>/g, "");
|
|
};
|
|
|
|
const truncateTitle = (text, limit) => {
|
|
if (!text) return "";
|
|
return text.length > limit ? text.slice(0, limit) + "..." : text;
|
|
};
|
|
|
|
export default function Blog() {
|
|
return (
|
|
<Layout
|
|
headerStyle={2}
|
|
footerStyle={2}
|
|
breadcrumbTitle="Blog"
|
|
bgImage={"/assets/images/inner-banner/blog-banner.webp"}
|
|
>
|
|
<div className="sidebar-page-container">
|
|
<div className="auto-container">
|
|
<div className="sec-title mb-4 centered">
|
|
<div className="title">Our Blogs</div>
|
|
<h2>Explore Our Delicious Dishes</h2>
|
|
<div className="separate"></div>
|
|
</div>
|
|
|
|
<div className="row clearfix">
|
|
{Blogs.map((blog) => (
|
|
<div
|
|
key={blog.id}
|
|
className="col-lg-4 col-md-6 col-sm-12 mb-4"
|
|
>
|
|
<div className="blog-card rounded shadow-sm overflow-hidden">
|
|
{/* Blog Image */}
|
|
<div className="blog-image">
|
|
<img
|
|
src={blog.imageDetail}
|
|
alt={blog.title}
|
|
className="img-fluid w-100"
|
|
/>
|
|
</div>
|
|
|
|
{/* Blog Title */}
|
|
<div className="blog-content p-3">
|
|
<h3 className="mb-2 text-lg font-semibold blog-title-hover">
|
|
<Link href={`/blog/${blog.slug}`} className="blog-title-link">
|
|
{truncateTitle(stripHtml(blog.title), 40)}
|
|
</Link>
|
|
</h3>
|
|
|
|
{/* Blog Excerpt */}
|
|
<p className="text-gray-700 mb-3">
|
|
{truncateWords(stripHtml(blog.para))}
|
|
</p>
|
|
|
|
{/* Read More Button */}
|
|
<Link
|
|
href={`/blog/${blog.slug}`}
|
|
className="font-medium blog-title-link"
|
|
>
|
|
Read More
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Layout>
|
|
);
|
|
}
|