dev #5

Merged
RizqiSyahrendra merged 8 commits from dev into main 2025-02-28 03:52:33 +00:00
8 changed files with 69 additions and 65 deletions
Showing only changes of commit f7b57bb959 - Show all commits

View File

@ -1,7 +1,7 @@
.theme-slick { .theme-slick {
--font-global: "Plus Jakarta Sans", sans-serif; --font-global: "Plus Jakarta Sans", sans-serif;
--font-alt: "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-1: #1e2432;
--color-dark-2: #282e3c; --color-dark-2: #282e3c;
--color-dark-3: #303747; --color-dark-3: #303747;

View File

@ -172,7 +172,7 @@ Primary use: Multipurpose Template
--font-serif: Georgia, "Times New Roman", Times, serif; --font-serif: Georgia, "Times New Roman", Times, serif;
--full-wrapper-margin-x: 30px; --full-wrapper-margin-x: 30px;
--container-width: 1350px; --container-width: 1350px;
--section-padding-y: 120px; --section-padding-y: 50px;
--menu-bar-height: 85px; --menu-bar-height: 85px;
--menu-bar-height-scrolled: 65px; --menu-bar-height-scrolled: 65px;
--color-dark-1: #010101; --color-dark-1: #010101;
@ -3105,7 +3105,6 @@ a.bg-video-button-pause {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
width: 90.1875%;
} }
.bg-shape-1 img { .bg-shape-1 img {
width: 100%; width: 100%;

View File

@ -7,17 +7,6 @@
@import "./splitting.css"; @import "./splitting.css";
@import "./modal.css"; @import "./modal.css";
@import "./YTPlayer.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-slick/demo-slick.css";
@import "./demo-strong/demo-strong.css";
@import "./custom.css"; @import "./custom.css";
@import "./style-responsive.css"; @import "./style-responsive.css";

View File

@ -1,8 +1,8 @@
import { BeforeFooterBlock } from "@/components/Blocks/BeforeFooter"; import { BeforeFooterBlock } from "@/components/Blocks/BeforeFooter";
import { BlogCardItemSkeleton } from "@/components/Blogs/BlogCardItem"; import { BlogCardItemSkeleton } from "@/components/Blogs/BlogCardItem";
import Blogs from "@/components/Blogs/Blogs"; import Blogs from "@/components/Blogs/Blogs";
import HeroOther from "@/components/HeroOther";
import { sanitizePageNumber } from "@/utils/sanitize"; import { sanitizePageNumber } from "@/utils/sanitize";
import Image from "next/image";
import { Suspense } from "react"; import { Suspense } from "react";
export const metadata = { export const metadata = {
@ -18,42 +18,28 @@ export default async function BlogPage({ searchParams }: { searchParams?: Promis
return ( return (
<> <>
<section className="page-section bg-dark-1 bg-gradient-gray-dark-1 light-content bg-scroll overflow-hidden"> <HeroOther title="Blog" />
{/* <!-- 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>
<section className="page-section" id="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 />}> <Suspense fallback={<Loading />}>
<Blogs page={page} search={paramsSearch} /> <Blogs page={page} search={paramsSearch} />
</Suspense> </Suspense>
@ -71,7 +57,6 @@ function Loading() {
<BlogCardItemSkeleton /> <BlogCardItemSkeleton />
<BlogCardItemSkeleton /> <BlogCardItemSkeleton />
<BlogCardItemSkeleton /> <BlogCardItemSkeleton />
<BlogCardItemSkeleton />
</div> </div>
</div> </div>
); );

View File

@ -21,12 +21,12 @@ export function BlogCardItem({ data }: BlogCardItemProps) {
return ( return (
<div className="post-prev-3 col-12 col-md-6 col-lg-4 col-xl-4 mt-50"> <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 className="post-prev-3-container flex flex-col">
<div> <div className="relative w-full h-[200px]">
<a href={`/${data.slug}/`}> <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> </a>
</div> </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"> <h2 className="text-lg text-center">
<a href={`/${data.slug}/`}>{data.title}</a> <a href={`/${data.slug}/`}>{data.title}</a>
</h2> </h2>

View File

@ -16,7 +16,7 @@ export default async function Blogs({ page, search }: BlogsProps) {
return ( return (
<div className="container position-relative"> <div className="container position-relative">
{/* Blog Posts Grid */} {/* Blog Posts Grid */}
<div className="row mt-n50 mb-50"> <div className="row">
{/* Post Item */} {/* Post Item */}
{data.formattedData.map((blog, i) => ( {data.formattedData.map((blog, i) => (
<BlogCardItem <BlogCardItem
@ -35,12 +35,14 @@ export default async function Blogs({ page, search }: BlogsProps) {
{/* End Blog Posts Grid */} {/* End Blog Posts Grid */}
{/* Pagination */} {/* Pagination */}
{data.totalPages > 1 && ( {data.totalPages > 1 && (
<Pagination <div className="mt-20">
page={data.page ?? 1} <Pagination
hasNextPage={data.hasNextPage} page={data.page ?? 1}
hasPreviousPage={data.hasPrevPage} hasNextPage={data.hasNextPage}
totalPages={data.totalPages} hasPreviousPage={data.hasPrevPage}
/> totalPages={data.totalPages}
/>
</div>
)} )}
{/* End Pagination */} {/* End Pagination */}
</div> </div>

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

View File

@ -1,7 +1,6 @@
"use client"; "use client";
import { usePathname, useRouter } from "next/navigation"; import { usePathname } from "next/navigation";
import React from "react";
interface PaginationProps { interface PaginationProps {
page: number; page: number;
@ -12,7 +11,6 @@ interface PaginationProps {
export default function Pagination({ page, hasPreviousPage, hasNextPage, totalPages }: PaginationProps) { export default function Pagination({ page, hasPreviousPage, hasNextPage, totalPages }: PaginationProps) {
const activePage = page; const activePage = page;
const router = useRouter();
const pathName = usePathname(); const pathName = usePathname();
// Function to handle page change // 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 url = new URL(window.location.href);
const searchParams = new URLSearchParams(url.search); const searchParams = new URLSearchParams(url.search);
searchParams.set("page", `${page}`); searchParams.set("page", `${page}`);
window.location.href = `${pathName}/?${searchParams}`;
router.push(`${pathName}/?${searchParams}`);
}; };
const getPageNumbers = () => { const getPageNumbers = () => {