Blog.js 4.24 KB
import React from "react";
import Link from "next/link";
import BlogSidebar from "./BlogSidebar";
import PageBanner from "@/components/reuseables/PageBanner";
import Image from "next/image";
import { Col, Container, Row } from "react-bootstrap";
const banners = [
  {
    imageSrc: "/images/page-title-bg.jpg",
    pageTitle: "Blogs",
    homePageUrl: "/",
    homePageText: "Home",
    activePageText: "Blogs",
  },
];
const posts = [
  {
    id: 1,
    image: "/images/blog/blogs1.jpeg",
    altText: "Blog Image",
    date: "Jan 22, 2024",
    author: "Lords Evans",
    authorLink: "/blog/author",
    title: "Tax Deducted at Source under Income Tax Act",
    shortDesc:
      "Lorem ipsum dolor sit amet, conseteturants atal into sadipscing elitr, sed diam nonumy eirmod nsa ada tempor invidunt ut.",
    btnText: "Read More",
    detailsUrl: "/blogs/details",
  },
  {
    id: 2,
    image: "/images/blog/blog-2.jpeg",
    altText: "Blog Image",
    date: "Jan 22, 2024",
    author: "Sarah Taylor",
    authorLink: "/blog/author",
    title: "Reporting on Fraudulent Activities by Auditors",
    shortDesc:
      "Lorem ipsum dolor sit amet, conseteturants atal into sadipscing elitr, sed diam nonumy eirmod nsa ada tempor invidunt ut.",
    btnText: "Read More",
    detailsUrl: "/blogs/details",
  },
  {
    id: 3,
    image: "/images/blog/blogs3.jpeg",
    altText: "Blog Image",
    date: "Jan 22, 2024",
    author: "James Andy",
    authorLink: "/blog/author",
    title: "Start-up and Angel Tax",
    shortDesc:
      "Lorem ipsum dolor sit amet, conseteturants atal into sadipscing elitr, sed diam nonumy eirmod nsa ada tempor invidunt ut.eirmod nsa ada tempor invidunt ut.",
    btnText: "Read More",
    detailsUrl: "/blogs/details",
  },
  {
    id: 4,
    image: "/images/blog/blog4.jpg",
    altText: "Blog Image",
    date: "Jan 16, 2024",
    author: "James Andy",
    authorLink: "/blog/author",
    title: "Business Has Become a Good in the Global World",
    shortDesc:
      "Lorem ipsum dolor sit amet, conseteturants atal into sadipscing elitr, sed diam nonumy eirmod nsa ada tempor invidunt ut.",
    btnText: "Read More",
    detailsUrl: "/blogs/details",
  },
];

const Blogs = () => {
  return (
    <>
      <PageBanner banners={banners} />
      <div className="blog-area ptb-100">
        <Container>
          <Row>
            <Col lg={8} md={12}>
              <div className="row justify-content-center">
                {posts &&
                  posts.map((post) => (
                    <Col lg={6} md={6} key={post.id}>
                      <div className="single-blog-post">
                        <div className="post-image">
                          <Link href={post.detailsUrl} className="d-block">
                            <Image
                              src={post.image}
                              alt={post.altText}
                              layout="fill"
                              className="img-fluid image"
                            />
                          </Link>
                        </div>
                        <div className="post-content">
                          <ul className="meta">
                            <li>
                              <i className="ri-calendar-2-line"></i> {post.date}
                            </li>
                            <li>
                              <i className="ri-user-voice-line"></i>
                              <Link href={post.authorLink}>{post.author}</Link>
                            </li>
                          </ul>
                          <h3>
                            <Link href={post.detailsUrl}>{post.title}</Link>
                          </h3>

                          <p>{post.shortDesc}</p>

                          <Link href={post.detailsUrl} className="default-btn">
                            {post.btnText}{" "}
                            <i className="ri-arrow-right-line"></i>
                          </Link>
                        </div>
                      </div>
                    </Col>
                  ))}
              </div>
            </Col>

            <div className="col-lg-4 col-md-12">
              <BlogSidebar />
            </div>
          </Row>
        </Container>
      </div>
    </>
  );
};

export default Blogs;