88 lines
3.4 KiB
TypeScript
88 lines
3.4 KiB
TypeScript
|
"use client";
|
||
|
|
import { Link } from "@/i18n/routing";
|
||
|
|
import { getHeroData, listCarousel } from "@/service/landing/landing";
|
||
|
|
import { formatDateToIndonesian, textEllipsis } from "@/utils/globals";
|
||
|
|
import { useEffect, useState } from "react";
|
||
|
|
import { useTranslations } from "next-intl";
|
||
|
|
import { Icon } from "@/components/ui/icon";
|
||
|
|
|
||
|
|
export default function NewsTickerKaltara() {
|
||
|
|
const [article, setArticle] = useState<any>([]);
|
||
|
|
const [currentNewsIndex, setCurrentNewsIndex] = useState(0);
|
||
|
|
const [animate, setAnimate] = useState(false);
|
||
|
|
const [tanggal, setTanggal] = useState("");
|
||
|
|
const t = useTranslations("LandingPage");
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const options: Intl.DateTimeFormatOptions = {
|
||
|
|
weekday: "long",
|
||
|
|
day: "2-digit",
|
||
|
|
month: "long",
|
||
|
|
year: "numeric",
|
||
|
|
};
|
||
|
|
const today = new Date().toLocaleDateString("id-ID", options);
|
||
|
|
setTanggal(today);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
async function getArticle() {
|
||
|
|
const response = await getHeroData();
|
||
|
|
setArticle(response?.data?.data?.content);
|
||
|
|
}
|
||
|
|
getArticle();
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const triggerAnimation = (newIndex: number) => {
|
||
|
|
setAnimate(true);
|
||
|
|
setTimeout(() => {
|
||
|
|
setCurrentNewsIndex(newIndex);
|
||
|
|
setAnimate(false);
|
||
|
|
}, 300);
|
||
|
|
};
|
||
|
|
|
||
|
|
const handlePrev = () => {
|
||
|
|
const newIndex = (currentNewsIndex - 1 + article.length) % article.length;
|
||
|
|
triggerAnimation(newIndex);
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleNext = () => {
|
||
|
|
const newIndex = (currentNewsIndex + 1) % article.length;
|
||
|
|
triggerAnimation(newIndex);
|
||
|
|
};
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const interval = setInterval(() => {
|
||
|
|
triggerAnimation((currentNewsIndex + 1) % article.length);
|
||
|
|
}, 7000);
|
||
|
|
|
||
|
|
return () => clearInterval(interval);
|
||
|
|
}, [article?.length]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="fixed bottom-0 z-50 flex flex-row h-[60px] gap-3 w-full justify-between dark:bg-stone-800 bg-[#bb3523]">
|
||
|
|
<div className="relative px-4 py-2 text-xs lg:text-sm flex items-center bg-[#bb3523] text-white w-[30%] lg:w-[300px]">
|
||
|
|
<span className="mr-2"></span> {tanggal}
|
||
|
|
<div className="absolute right-0 top-0 h-full w-4 bg-[#bb3523] transform translate-x-full clip-path-triangle"></div>
|
||
|
|
</div>
|
||
|
|
<div className="text-sm lg:text-base w-full lg:w-[200px] text-white font-semibold ml-5 flex items-center">{t("breakingNews")} :</div>
|
||
|
|
<div className={`w-full px-5 py-1 flex flex-col gap-1 transition-transform duration-300 ${animate ? "opacity-0 translate-y-5" : "opacity-100 translate-y-0"}`}>
|
||
|
|
<Link href={`news/detail/${article[currentNewsIndex]?.id}`} className="hidden lg:block">
|
||
|
|
<p className="text-sm text-white lg:text-base">{article[currentNewsIndex]?.title}</p>
|
||
|
|
</Link>
|
||
|
|
<Link href={`news/detail/${article[currentNewsIndex]?.id}`} className="lg:hidden">
|
||
|
|
<p className="text-sm text-white lg:text-base">{textEllipsis(article[currentNewsIndex]?.title, 28)}</p>
|
||
|
|
</Link>
|
||
|
|
<p className="text-xs">{formatDateToIndonesian(article[currentNewsIndex]?.createdAt)}</p>
|
||
|
|
</div>
|
||
|
|
<div className="flex flex-row text-white h-full gap-[1px]">
|
||
|
|
<a className="bg-[#bb3523] h-full flex items-center" onClick={() => handlePrev()}>
|
||
|
|
<Icon icon="ic:twotone-arrow-left" fontSize={30} />
|
||
|
|
</a>
|
||
|
|
<a className="bg-[#bb3523] h-full flex items-center" onClick={() => handleNext()}>
|
||
|
|
<Icon icon="ic:twotone-arrow-right" fontSize={30} />
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|