281 lines
12 KiB
TypeScript
281 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { Instagram } from "lucide-react";
|
|
import Image from "next/image";
|
|
import { useState, useEffect } from "react";
|
|
import {
|
|
getPublicClients,
|
|
PublicClient,
|
|
} from "@/service/client/public-clients";
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
import { Navigation, Autoplay } from "swiper/modules";
|
|
import "swiper/css";
|
|
import "swiper/css/navigation";
|
|
import LocalSwitcher from "../partials/header/locale-switcher";
|
|
import { useTranslations } from "next-intl";
|
|
import { Reveal } from "./Reveal";
|
|
|
|
// Custom styles for Swiper
|
|
const swiperStyles = `
|
|
.client-swiper .swiper-button-next,
|
|
.client-swiper .swiper-button-prev {
|
|
background: white;
|
|
border-radius: 50%;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
width: 32px;
|
|
height: 32px;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.client-swiper .swiper-button-next:after,
|
|
.client-swiper .swiper-button-prev:after {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.client-swiper .swiper-button-disabled {
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.client-swiper.swiper-centered .swiper-button-next,
|
|
.client-swiper.swiper-centered .swiper-button-prev {
|
|
display: none;
|
|
}
|
|
|
|
.client-swiper.swiper-centered .swiper-wrapper {
|
|
justify-content: center;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.client-swiper .swiper-button-next,
|
|
.client-swiper .swiper-button-prev {
|
|
display: none;
|
|
}
|
|
}
|
|
`;
|
|
|
|
// const logos = [
|
|
// { src: "/mabes.png", href: "/in/public/publication/kl" },
|
|
// { src: "/saw.png", href: "/" },
|
|
// { src: "/mpr.png", href: "/" },
|
|
// { src: "/dpr.png", href: "/" },
|
|
// { src: "/ma.png", href: "/" },
|
|
// { src: "/badan.png", href: "/" },
|
|
// { src: "/kpk.png", href: "/" },
|
|
// { src: "/pln.png", href: "/" },
|
|
// ];
|
|
|
|
const logos = [
|
|
{ src: "/mabes.png", slug: "mabes" },
|
|
{ src: "/saw.png", slug: "kejaksaan-agung" },
|
|
{ src: "/mpr.png", slug: "mpr-ri" },
|
|
{ src: "/dpr.png", slug: "dpr-ri" },
|
|
{ src: "/ma.png", slug: "mahkamah-agung" },
|
|
{ src: "/badan.png", slug: "kemenkeu" },
|
|
{ src: "/kpk.png", slug: "kpk" },
|
|
{ src: "/pln.png", slug: "pupr" },
|
|
];
|
|
|
|
export default function Footer() {
|
|
const t = useTranslations("MediaUpdate");
|
|
const [clients, setClients] = useState<PublicClient[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
// Fetch public clients
|
|
useEffect(() => {
|
|
async function fetchClients() {
|
|
try {
|
|
const response = await getPublicClients();
|
|
if (response?.data?.success && response.data.data) {
|
|
setClients(response.data.data);
|
|
}
|
|
} catch (error) {
|
|
console.error("Error fetching public clients:", error);
|
|
setClients([]);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
fetchClients();
|
|
}, []);
|
|
|
|
return (
|
|
<Reveal>
|
|
<footer className="border-t bg-white dark:bg-default-50 text-center">
|
|
<style jsx>{swiperStyles}</style>
|
|
<div className="max-w-[1350px] mx-auto">
|
|
<div className="py-6">
|
|
<h2 className="text-2xl font-semibold mb-4 px-4 md:px-0">
|
|
{t("publication")}
|
|
</h2>
|
|
<div className="px-4 md:px-12">
|
|
<Swiper
|
|
modules={[Navigation, Autoplay]}
|
|
spaceBetween={24}
|
|
slidesPerView="auto"
|
|
centeredSlides={clients.length <= 4}
|
|
navigation={{
|
|
nextEl: ".swiper-button-next",
|
|
prevEl: ".swiper-button-prev",
|
|
}}
|
|
autoplay={{
|
|
delay: 3000,
|
|
disableOnInteraction: false,
|
|
}}
|
|
loop={clients.length > 4}
|
|
className={`client-swiper ${
|
|
clients.length <= 4 ? "swiper-centered" : ""
|
|
}`}
|
|
>
|
|
{loading
|
|
? // Loading skeleton
|
|
Array.from({ length: 8 }).map((_, idx) => (
|
|
<SwiperSlide key={idx} className="!w-auto">
|
|
<div className="w-[80px] h-[80px] md:w-[100px] md:h-[100px] bg-gray-200 rounded animate-pulse" />
|
|
</SwiperSlide>
|
|
))
|
|
: clients.length > 0
|
|
? // Dynamic clients from API
|
|
clients.map((client, idx) => (
|
|
<SwiperSlide key={idx} className="!w-auto">
|
|
<a
|
|
href={`/in/tenant/${client.slug}`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="group block"
|
|
>
|
|
{client.logoUrl ? (
|
|
<Image
|
|
src={client.logoUrl}
|
|
alt={client.name}
|
|
width={100}
|
|
height={100}
|
|
className="md:w-[100px] md:h-[100px] object-contain hover:opacity-80 transition"
|
|
/>
|
|
) : (
|
|
// Fallback when no logo - menggunakan placeholder image
|
|
<div className="w-[80px] h-[80px] md:w-[100px] md:h-[100px] rounded flex items-center justify-center hover:from-blue-200 hover:to-blue-300 transition-all duration-200">
|
|
<Image
|
|
src="/logo-netidhub.png"
|
|
alt={`${client.name} placeholder`}
|
|
width={100}
|
|
height={100}
|
|
className="md:w-[100px] md:h-[100px] object-contain opacity-70"
|
|
/>
|
|
</div>
|
|
)}
|
|
</a>
|
|
</SwiperSlide>
|
|
))
|
|
: // Fallback to static logos if API fails or no data
|
|
logos.map((logo, idx) => (
|
|
<SwiperSlide key={idx} className="!w-auto">
|
|
<a
|
|
href={`/in/tenant/${logo.slug}`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="block"
|
|
>
|
|
<Image
|
|
src={logo.src}
|
|
alt={`logo-${idx}`}
|
|
width={80}
|
|
height={80}
|
|
className="md:w-[100px] md:h-[100px] object-contain hover:opacity-80 transition"
|
|
/>
|
|
</a>
|
|
</SwiperSlide>
|
|
))}
|
|
</Swiper>
|
|
|
|
{/* Navigation Buttons */}
|
|
{/* <div className="swiper-button-prev !text-gray-600 !w-8 !h-8 !mt-0 !top-1/2 !left-0 !-translate-y-1/2"></div> */}
|
|
{/* <div className="swiper-button-next !text-gray-600 !w-8 !h-8 !mt-0 !top-1/2 !right-0 !-translate-y-1/2"></div> */}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border-t my-6 w-full max-w-6xl mx-auto" />
|
|
|
|
<div className="flex flex-col md:flex-row items-center justify-between gap-4 px-4 pb-6 max-w-6xl mx-auto text-sm text-gray-600 dark:text-white">
|
|
<div className="flex items-center gap-2">
|
|
<span>ver 1.0.0 @2025 - {t("netidhub")}</span>
|
|
<Image
|
|
src="/qudo.png"
|
|
alt="qudoco"
|
|
width={80}
|
|
height={80}
|
|
className="object-contain"
|
|
/>
|
|
</div>
|
|
|
|
{/* Social Media */}
|
|
<div className="flex gap-3 text-gray-800 dark:text-white">
|
|
<Instagram className="hover:text-black" />
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
fill="currentColor"
|
|
d="M14 13.5h2.5l1-4H14v-2c0-1.03 0-2 2-2h1.5V2.14c-.326-.043-1.557-.14-2.857-.14C11.928 2 10 3.657 10 6.7v2.8H7v4h3V22h4z"
|
|
/>
|
|
</svg>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<g fill="none">
|
|
<path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
|
|
<path
|
|
fill="currentColor"
|
|
d="M4.594 4.984a1 1 0 0 1 .941.429C7.011 7.572 8.783 8.47 10.75 8.674c.096-.841.323-1.672.75-2.404c.626-1.074 1.644-1.864 3.098-2.156c2.01-.404 3.54.324 4.427 1.215l1.792-.335a1 1 0 0 1 1.053 1.478l-1.72 3.022c.157 4.361-1.055 7.405-3.639 9.502c-1.37 1.112-3.332 1.743-5.485 1.938c-2.17.196-4.623-.041-7.061-.753a1 1 0 0 1 .007-1.922c1.226-.349 2.16-.65 3.003-1.177c-1.199-.636-2.082-1.468-2.707-2.416c-.868-1.318-1.19-2.788-1.254-4.113S3.141 8 3.343 7.115c.115-.505.249-1.011.434-1.495a1 1 0 0 1 .818-.636Z"
|
|
/>
|
|
</g>
|
|
</svg>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
fill="currentColor"
|
|
// fill-rule="evenodd"
|
|
d="M9.935 14.628v-5.62l5.403 2.82zM21.8 8.035s-.195-1.379-.795-1.986c-.76-.796-1.613-.8-2.004-.847C16.203 5 12.004 5 12.004 5h-.008s-4.198 0-6.997.202c-.391.047-1.243.05-2.004.847c-.6.607-.795 1.986-.795 1.986S2 9.653 2 11.272v1.517c0 1.618.2 3.237.2 3.237s.195 1.378.795 1.985c.76.797 1.76.771 2.205.855c1.6.153 6.8.2 6.8.2s4.203-.006 7.001-.208c.391-.047 1.244-.05 2.004-.847c.6-.607.795-1.985.795-1.985s.2-1.619.2-3.237v-1.517c0-1.619-.2-3.237-.2-3.237"
|
|
/>
|
|
</svg>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<g
|
|
fill="none"
|
|
// fill-rule="evenodd"
|
|
>
|
|
<path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
|
|
<path
|
|
fill="currentColor"
|
|
d="M14 2a2 2 0 0 1 2 2a3.004 3.004 0 0 0 2.398 2.94a2 2 0 0 1-.796 3.92A7 7 0 0 1 16 10.325V16a6 6 0 1 1-7.499-5.81a2 2 0 0 1 .998 3.873A2.002 2.002 0 0 0 10 18a2 2 0 0 0 2-2V4a2 2 0 0 1 2-2"
|
|
/>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
|
|
{/* button language */}
|
|
<div className={`relative text-left border rounded-lg`}>
|
|
<LocalSwitcher />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</Reveal>
|
|
);
|
|
}
|