dev #5
@ -1,7 +1,7 @@
|
||||
.theme-slick {
|
||||
--font-global: "Plus Jakarta Sans", sans-serif;
|
||||
--font-alt: "Plus Jakarta Sans", sans-serif;
|
||||
--section-padding-y: 130px;
|
||||
--section-padding-y: 50px;
|
||||
--color-dark-1: #1e2432;
|
||||
--color-dark-2: #282e3c;
|
||||
--color-dark-3: #303747;
|
||||
|
@ -172,7 +172,7 @@ Primary use: Multipurpose Template
|
||||
--font-serif: Georgia, "Times New Roman", Times, serif;
|
||||
--full-wrapper-margin-x: 30px;
|
||||
--container-width: 1350px;
|
||||
--section-padding-y: 120px;
|
||||
--section-padding-y: 50px;
|
||||
--menu-bar-height: 85px;
|
||||
--menu-bar-height-scrolled: 65px;
|
||||
--color-dark-1: #010101;
|
||||
@ -3105,7 +3105,6 @@ a.bg-video-button-pause {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 90.1875%;
|
||||
}
|
||||
.bg-shape-1 img {
|
||||
width: 100%;
|
||||
|
@ -7,17 +7,6 @@
|
||||
@import "./splitting.css";
|
||||
@import "./modal.css";
|
||||
@import "./YTPlayer.css";
|
||||
@import "./demo-main/demo-main.css";
|
||||
@import "./demo-bold/demo-bold.css";
|
||||
@import "./demo-brutalist/demo-brutalist.css";
|
||||
|
||||
@import "./demo-corporate/demo-corporate.css";
|
||||
@import "./demo-elegant/demo-elegant.css";
|
||||
@import "./demo-fancy/demo-fancy.css";
|
||||
@import "./demo-gradient/demo-gradient.css";
|
||||
@import "./demo-modern/demo-modern.css";
|
||||
@import "./demo-slick/demo-slick.css";
|
||||
@import "./demo-strong/demo-strong.css";
|
||||
|
||||
@import "./custom.css";
|
||||
@import "./style-responsive.css";
|
||||
|
@ -1,8 +1,8 @@
|
||||
import { BeforeFooterBlock } from "@/components/Blocks/BeforeFooter";
|
||||
import { BlogCardItemSkeleton } from "@/components/Blogs/BlogCardItem";
|
||||
import Blogs from "@/components/Blogs/Blogs";
|
||||
import HeroOther from "@/components/HeroOther";
|
||||
import { sanitizePageNumber } from "@/utils/sanitize";
|
||||
import Image from "next/image";
|
||||
import { Suspense } from "react";
|
||||
|
||||
export const metadata = {
|
||||
@ -18,42 +18,28 @@ export default async function BlogPage({ searchParams }: { searchParams?: Promis
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className="page-section bg-dark-1 bg-gradient-gray-dark-1 light-content bg-scroll overflow-hidden">
|
||||
{/* <!-- Background Shape --> */}
|
||||
<div className="bg-shape-1 opacity-003">
|
||||
<Image src="/assets/images/demo-fancy/bg-shape-1.svg" width={1443} height={844} alt="" />
|
||||
</div>
|
||||
{/* <!-- End Background Shape --> */}
|
||||
|
||||
<div className="container position-relative pt-sm-40 text-center">
|
||||
<div className="row">
|
||||
<div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
|
||||
<h1 className="hs-title-10 mb-10 wow fadeInUp">Blog</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="px-3 md:px-4 mt-4 lg:w-2/3 lg:mx-auto">
|
||||
<form action="/blog" method="GET">
|
||||
<div className="input-group">
|
||||
<input
|
||||
type="text"
|
||||
name="s"
|
||||
defaultValue={paramsSearch ?? ""}
|
||||
placeholder="Search blog..."
|
||||
className="input-lg input-circle form-control"
|
||||
/>
|
||||
<div className="input-group-append">
|
||||
<button className="btn btn-info text-white" type="submit">
|
||||
Search
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<HeroOther title="Blog" />
|
||||
|
||||
<section className="page-section" id="blog">
|
||||
<div className="w-full px-[15px] md:px-[30px]">
|
||||
<form action="/blog" method="GET">
|
||||
<div className="input-group">
|
||||
<input
|
||||
type="text"
|
||||
name="s"
|
||||
defaultValue={paramsSearch ?? ""}
|
||||
placeholder="Search blog..."
|
||||
className="input-lg input-circle form-control h-12"
|
||||
/>
|
||||
<div className="input-group-append">
|
||||
<button className="btn btn-info text-white h-12" type="submit">
|
||||
Search
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<Suspense fallback={<Loading />}>
|
||||
<Blogs page={page} search={paramsSearch} />
|
||||
</Suspense>
|
||||
@ -71,7 +57,6 @@ function Loading() {
|
||||
<BlogCardItemSkeleton />
|
||||
<BlogCardItemSkeleton />
|
||||
<BlogCardItemSkeleton />
|
||||
<BlogCardItemSkeleton />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
@ -21,12 +21,12 @@ export function BlogCardItem({ data }: BlogCardItemProps) {
|
||||
return (
|
||||
<div className="post-prev-3 col-12 col-md-6 col-lg-4 col-xl-4 mt-50">
|
||||
<div className="post-prev-3-container flex flex-col">
|
||||
<div>
|
||||
<div className="relative w-full h-[200px]">
|
||||
<a href={`/${data.slug}/`}>
|
||||
<Image width={684} height={454} src={data?.img?.url ?? ""} alt={data?.img?.alt ?? ""} />
|
||||
<Image src={data?.img?.url ?? ""} alt={data?.img?.alt ?? ""} fill className="object-cover" />
|
||||
</a>
|
||||
</div>
|
||||
<div className="px-4 py-3 h-full flex flex-col justify-between">
|
||||
<div className="px-4 py-3 flex flex-col flex-1 justify-between">
|
||||
<h2 className="text-lg text-center">
|
||||
<a href={`/${data.slug}/`}>{data.title}</a>
|
||||
</h2>
|
||||
|
@ -16,7 +16,7 @@ export default async function Blogs({ page, search }: BlogsProps) {
|
||||
return (
|
||||
<div className="container position-relative">
|
||||
{/* Blog Posts Grid */}
|
||||
<div className="row mt-n50 mb-50">
|
||||
<div className="row">
|
||||
{/* Post Item */}
|
||||
{data.formattedData.map((blog, i) => (
|
||||
<BlogCardItem
|
||||
@ -35,12 +35,14 @@ export default async function Blogs({ page, search }: BlogsProps) {
|
||||
{/* End Blog Posts Grid */}
|
||||
{/* Pagination */}
|
||||
{data.totalPages > 1 && (
|
||||
<Pagination
|
||||
page={data.page ?? 1}
|
||||
hasNextPage={data.hasNextPage}
|
||||
hasPreviousPage={data.hasPrevPage}
|
||||
totalPages={data.totalPages}
|
||||
/>
|
||||
<div className="mt-20">
|
||||
<Pagination
|
||||
page={data.page ?? 1}
|
||||
hasNextPage={data.hasNextPage}
|
||||
hasPreviousPage={data.hasPrevPage}
|
||||
totalPages={data.totalPages}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{/* End Pagination */}
|
||||
</div>
|
||||
|
32
src/components/HeroOther.tsx
Normal file
32
src/components/HeroOther.tsx
Normal file
@ -0,0 +1,32 @@
|
||||
import Image from "next/image";
|
||||
|
||||
export interface HeroOtherProps {
|
||||
title: string;
|
||||
}
|
||||
|
||||
export default function HeroOther({ title }: HeroOtherProps) {
|
||||
return (
|
||||
<section
|
||||
className="page-section bg-dark-1 bg-gradient-gray-dark-1 light-content bg-scroll overflow-hidden !py-52 relative"
|
||||
// style={{ clipPath: "ellipse(50% 100% at 50% 100%)" }}
|
||||
>
|
||||
{/* <!-- Background Shape --> */}
|
||||
<div className="bg-shape-1 w-full h-full opacity-50">
|
||||
<Image src="/assets/images/hero-default.webp" fill alt="" />
|
||||
</div>
|
||||
{/* <!-- End Background Shape --> */}
|
||||
|
||||
<div className="container position-relative pt-sm-40 text-center">
|
||||
<div className="row">
|
||||
<div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
|
||||
<h1 className="hs-title-10 mb-10 wow fadeInUp">{title ?? ""}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<svg className="absolute bottom-0 left-0 w-full" viewBox="0 0 1440 50" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="white" d="M0,0 C480,40 960,40 1440,0 L1440,50 L0,50 Z"></path>
|
||||
</svg>
|
||||
</section>
|
||||
);
|
||||
}
|
@ -1,7 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { usePathname, useRouter } from "next/navigation";
|
||||
import React from "react";
|
||||
import { usePathname } from "next/navigation";
|
||||
|
||||
interface PaginationProps {
|
||||
page: number;
|
||||
@ -12,7 +11,6 @@ interface PaginationProps {
|
||||
|
||||
export default function Pagination({ page, hasPreviousPage, hasNextPage, totalPages }: PaginationProps) {
|
||||
const activePage = page;
|
||||
const router = useRouter();
|
||||
const pathName = usePathname();
|
||||
|
||||
// Function to handle page change
|
||||
@ -23,8 +21,7 @@ export default function Pagination({ page, hasPreviousPage, hasNextPage, totalPa
|
||||
const url = new URL(window.location.href);
|
||||
const searchParams = new URLSearchParams(url.search);
|
||||
searchParams.set("page", `${page}`);
|
||||
|
||||
router.push(`${pathName}/?${searchParams}`);
|
||||
window.location.href = `${pathName}/?${searchParams}`;
|
||||
};
|
||||
|
||||
const getPageNumbers = () => {
|
||||
|
Loading…
x
Reference in New Issue
Block a user