88 lines
3.4 KiB
TypeScript
88 lines
3.4 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import React, { useEffect, useState } from "react";
|
|
import { generateLocalizedPath } from "@/utils/globals";
|
|
import { useParams, usePathname, useRouter } from "next/navigation";
|
|
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
|
|
import { getPrivacy } from "@/service/landing/landing";
|
|
import parse from "html-react-parser";
|
|
|
|
const Footer = () => {
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
const params = useParams();
|
|
const locale = params?.locale;
|
|
const [privacy, setPrivacy] = useState();
|
|
|
|
useEffect(() => {
|
|
async function initState() {
|
|
const response = await getPrivacy();
|
|
setPrivacy(response?.data?.data.htmlContent);
|
|
}
|
|
initState();
|
|
}, []);
|
|
|
|
return (
|
|
<footer className="bg-[#bb3523] text-white text-xs lg:text-sm py-4">
|
|
<div className="container mx-auto flex flex-col md:flex-row justify-between items-center space-y-2 md:space-y-0 px-4">
|
|
{/* Hak Cipta */}
|
|
<div className="text-center md:text-left">Hak Cipta © {new Date().getFullYear()} Divisi Humas Polri. All Right Reserved.</div>
|
|
|
|
{/* Menu Links */}
|
|
<div className="flex flex-wrap justify-center items-center space-x-3">
|
|
<Link href={generateLocalizedPath("/feedback", String(locale))} className="hover:underline">
|
|
FeedBack
|
|
</Link>
|
|
<span className="hidden md:inline-block ">|</span>
|
|
<Link href={generateLocalizedPath("/contact", String(locale))} className="hover:underline">
|
|
Hubungi Kami
|
|
</Link>
|
|
<span className="hidden md:inline-block">|</span>
|
|
<Link href={generateLocalizedPath("/faqs", String(locale))} className="hover:underline">
|
|
FAQ
|
|
</Link>
|
|
|
|
<Dialog>
|
|
<DialogTrigger>
|
|
<span className="hidden md:inline-block">|</span>
|
|
<a href="#" className="hover:underline px-2">
|
|
Privacy
|
|
</a>
|
|
</DialogTrigger>
|
|
<DialogContent className="flex flex-col overflow-y-scroll h-[80%]" size="md">
|
|
<div className="flex flex-row items-center justify-center gap-4">
|
|
<img src="/assets/icon-privacy.png" alt="Privacy" />
|
|
<p className="font-semibold text-lg">Kebijakan Privacy</p>
|
|
</div>
|
|
<div className="container text-dark">{parse(String(privacy))}</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
|
|
{/* Social Media Icons */}
|
|
<div className="flex justify-center items-center space-x-3">
|
|
<span className="text-sm">Follow Us:</span>
|
|
<a href="#" aria-label="Facebook">
|
|
<img src="/assets/facebook.svg" alt="Facebook" className="w-5 h-5" />
|
|
</a>
|
|
<a href="#" aria-label="Instagram">
|
|
<img src="/assets/instagram.svg" alt="Instagram" className="w-5 h-5" />
|
|
</a>
|
|
<a href="#" aria-label="Twitter">
|
|
<img src="/assets/twitter.svg" alt="Instagram" className="w-5 h-5" />
|
|
</a>
|
|
<a href="#" aria-label="TikTok">
|
|
<img src="/assets/tiktok.svg" alt="TikTok" className="w-5 h-5" />
|
|
</a>
|
|
<a href="#" aria-label="YouTube">
|
|
<img src="/assets/youtube.svg" alt="YouTube" className="w-5 h-5" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
};
|
|
|
|
export default Footer;
|