120 lines
3.9 KiB
TypeScript
120 lines
3.9 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, DialogTrigger } from "@/components/ui/dialog";
|
|
import { getPrivacy } from "@/service/landing/landing";
|
|
import parse from "html-react-parser";
|
|
import { useTranslations } from "next-intl";
|
|
import NewsTicker from "./news-tickers";
|
|
|
|
const Footer = () => {
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
const params = useParams();
|
|
const locale = params?.locale;
|
|
const [privacy, setPrivacy] = useState();
|
|
const t = useTranslations("LandingPage");
|
|
|
|
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 space-y-3 lg:space-y-0 h-">
|
|
<div className="mx-auto flex flex-col md:flex-row justify-between items-center px-4 gap-3">
|
|
{/* Hak Cipta */}
|
|
<div className="text-center md:text-left">
|
|
{t("copyright")} © {new Date().getFullYear()}{" "}
|
|
{t("publicRelation")} {t("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"
|
|
>
|
|
{t("feedback")}
|
|
</Link>
|
|
<span className="hidden md:inline-block ">|</span>
|
|
<Link
|
|
href={generateLocalizedPath("/contact", String(locale))}
|
|
className="hover:underline"
|
|
>
|
|
{t("contact")}
|
|
</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">
|
|
{t("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">{t("privacy")}</p>
|
|
</div>
|
|
<div className="container text-black dark:text-white space-y-2">
|
|
{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;
|