95 lines
4.9 KiB
TypeScript
95 lines
4.9 KiB
TypeScript
import { formatDateToIndonesian, textEllipsis } from "@/utils/globals";
|
|
import React, { useEffect, useState } from "react";
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
import "swiper/css/bundle";
|
|
import "swiper/css/navigation";
|
|
import { getHeroData } from "@/service/landing/landing";
|
|
import Link from "next/link";
|
|
import { useParams, usePathname, useRouter } from "next/navigation";
|
|
import { Navigation, Pagination } from "swiper/modules";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
|
|
|
|
const Hero: React.FC = () => {
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
const params = useParams();
|
|
const locale = params?.locale;
|
|
|
|
const [heroData, setHeroData] = useState<any>();
|
|
useEffect(() => {
|
|
initFetch();
|
|
}, []);
|
|
const initFetch = async () => {
|
|
const response = await getHeroData();
|
|
console.log(response);
|
|
setHeroData(response?.data?.data?.content);
|
|
};
|
|
return (
|
|
<div className="flex flex-col lg:flex-row items-start gap-8 px-4 lg:px-20 py-4 mx-auto">
|
|
{/* Section Gambar Utama */}
|
|
|
|
<Carousel className="lg:w-2/3 w-full lg:h-full">
|
|
<CarouselContent>
|
|
{heroData?.map((list: any) => (
|
|
<CarouselItem key={list?.id}>
|
|
<div className="relative h-[310px] lg:h-[420px]">
|
|
<img src={list?.thumbnailLink} alt="Gambar Utama" className="w-full h-[310px] lg:h-[420px] rounded-lg" />
|
|
<div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-black dark:text-white p-4 rounded-b-lg">
|
|
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{list?.categoryName}</span>
|
|
<Link href={`${locale}/image/detail/${list?.slug}`}>
|
|
<h2 className="text-lg font-bold mt-2">{list?.title}</h2>
|
|
</Link>
|
|
<p className="text-xs flex flex-row items-center gap-1 mt-1">
|
|
{formatDateToIndonesian(new Date(list?.createdAt))} {list?.timezone ? list?.timezone : "WIB"}|{" "}
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
|
|
<path
|
|
fill="currentColor"
|
|
d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
|
|
/>
|
|
</svg>{" "}
|
|
{list?.clickCount}{" "}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</CarouselItem>
|
|
))}
|
|
</CarouselContent>
|
|
<CarouselPrevious />
|
|
<CarouselNext />
|
|
</Carousel>
|
|
|
|
{/* Section Kanan */}
|
|
<div className="lg:w-1/3 w-full">
|
|
<ul className="py-4 lg:py-0 flex flex-row lg:flex-col gap-4 flex-nowrap w-full overflow-x-auto">
|
|
{heroData?.map((item: any) => (
|
|
<li key={item?.id} className="flex gap-4 flex-row lg:w-full ">
|
|
<div className="flex-shrink-0 w-24 rounded-lg">
|
|
<img src={item?.thumbnailLink} alt={item?.title} className="w-full max-h-14 object-cover rounded-lg" />
|
|
</div>
|
|
<div className="w-[280px] lg:w-auto">
|
|
<span className="text-white bg-[#bb3523] px-4 py-1 rounded-lg flex text-xs font-bold uppercase w-fit">{item?.categoryName}</span>
|
|
<Link href={`${locale}/image/detail/${item?.slug}`}>
|
|
<h3 className="text-sm font-bold mt-2">{textEllipsis(item?.title, 30)}</h3>
|
|
</Link>
|
|
<p className="text-[10px] flex flex-row items-center gap-1 text-gray-500 mt-1">
|
|
{formatDateToIndonesian(new Date(item?.createdAt))} {item?.timezone ? item?.timezone : "WIB"} |{" "}
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
|
|
<path
|
|
fill="currentColor"
|
|
d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
|
|
/>
|
|
</svg>{" "}
|
|
{item?.clickCount}
|
|
</p>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Hero;
|