104 lines
3.3 KiB
TypeScript
104 lines
3.3 KiB
TypeScript
"use client";
|
|
import { useEffect, useState } from "react";
|
|
import { ChevronLeftIcon, ChevronRightIcon } from "../icons";
|
|
import { getListArticle } from "@/services/article";
|
|
import { convertDateFormat, textEllipsis } from "@/utils/global";
|
|
import Link from "next/link";
|
|
|
|
export default function NewsTicker() {
|
|
const [article, setArticle] = useState<any>([]);
|
|
const [currentNewsIndex, setCurrentNewsIndex] = useState(0);
|
|
const [animate, setAnimate] = useState(false);
|
|
|
|
useEffect(() => {
|
|
async function getArticle() {
|
|
const req = {
|
|
page: 1,
|
|
search: "",
|
|
limit: "10",
|
|
sortBy: "created_at",
|
|
sort: "desc",
|
|
};
|
|
const response = await getListArticle(req);
|
|
setArticle(response?.data?.data);
|
|
}
|
|
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]);
|
|
|
|
return (
|
|
<div className="fixed bottom-0 z-50 flex flex-row h-[60px] gap-3 w-full justify-between dark:bg-stone-800 bg-gray-50">
|
|
<div className="relative px-4 py-2 font-semibold text-xs lg:text-sm flex items-center bg-[#bb3523] text-white w-[30%] lg:w-[10%]">
|
|
<span className="mr-2"></span> BREAKING NEWS
|
|
<div className="absolute right-0 top-0 h-full w-4 bg-[#bb3523] transform translate-x-full clipPath-triangle"></div>
|
|
</div>
|
|
{article && (
|
|
<div
|
|
className={`w-full px-5 py-1 flex flex-col justify-center gap-1 transition-transform duration-300 ${
|
|
animate ? "opacity-0 translate-y-5" : "opacity-100 translate-y-0"
|
|
}`}
|
|
>
|
|
<Link
|
|
href={`news/detail/${article[currentNewsIndex]?.id}-${article[currentNewsIndex]?.slug}`}
|
|
className="hidden lg:block"
|
|
>
|
|
<p className="text-sm lg:text-base">
|
|
{article[currentNewsIndex]?.title}
|
|
</p>
|
|
</Link>
|
|
<Link
|
|
href={`news/detail/${article[currentNewsIndex]?.id}-${article[currentNewsIndex]?.slug}`}
|
|
className="lg:hidden"
|
|
>
|
|
<p className="text-sm lg:text-base">
|
|
{textEllipsis(article[currentNewsIndex]?.title, 28)}
|
|
</p>
|
|
</Link>
|
|
<p className="text-xs">
|
|
{convertDateFormat(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()}
|
|
>
|
|
<ChevronLeftIcon />
|
|
</a>
|
|
<a
|
|
className="bg-[#bb3523] h-full flex items-center"
|
|
onClick={() => handleNext()}
|
|
>
|
|
<ChevronRightIcon />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|