136 lines
3.8 KiB
TypeScript
136 lines
3.8 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import {
|
|
Carousel,
|
|
CarouselContent,
|
|
CarouselItem,
|
|
CarouselNext,
|
|
CarouselPrevious,
|
|
} from "@/components/ui/carousel";
|
|
import { Button } from "@/components/ui/button";
|
|
import { motion } from "framer-motion";
|
|
import Link from "next/link";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from "../ui/dialog";
|
|
import { Input } from "../ui/input";
|
|
import { Textarea } from "../ui/textarea";
|
|
import { useEffect, useState } from "react";
|
|
import Autoplay from "embla-carousel-autoplay"; // ✅ Import plugin autoplay
|
|
import { useRef } from "react";
|
|
import { getBannerData } from "@/service/banner";
|
|
|
|
const heroImages = [
|
|
"/Hero.png",
|
|
// "/Carousell-01.png",
|
|
"/Carousell-02.png",
|
|
"/Carousell-03.png",
|
|
"/Carousell-04.png",
|
|
"/Carousell-05.png",
|
|
];
|
|
type Banner = {
|
|
id: number;
|
|
title: string;
|
|
description: string;
|
|
status_id: number;
|
|
position: string;
|
|
thumbnail_url: string;
|
|
created_at: string;
|
|
};
|
|
|
|
export default function Header() {
|
|
const [open, setOpen] = useState(false);
|
|
const [banners, setBanners] = useState<Banner[]>([]);
|
|
|
|
useEffect(() => {
|
|
const fetchBanners = async () => {
|
|
try {
|
|
const req = {
|
|
limit: "10",
|
|
page: 1,
|
|
search: "",
|
|
};
|
|
|
|
const res = await getBannerData(req);
|
|
|
|
const bannerData: Banner[] = res?.data?.data || [];
|
|
|
|
const activeBanners = bannerData
|
|
.filter((banner) => banner.status_id === 2) // ✅ approved only
|
|
.sort((a, b) => {
|
|
const posA = Number(a.position);
|
|
const posB = Number(b.position);
|
|
|
|
if (posA !== posB) return posA - posB;
|
|
|
|
return (
|
|
new Date(b.created_at).getTime() -
|
|
new Date(a.created_at).getTime()
|
|
);
|
|
});
|
|
|
|
setBanners(activeBanners);
|
|
} catch (err) {
|
|
console.error("Failed to fetch banners:", err);
|
|
}
|
|
};
|
|
|
|
fetchBanners();
|
|
}, []);
|
|
|
|
const plugin = useRef(Autoplay({ delay: 4000, stopOnInteraction: false }));
|
|
|
|
return (
|
|
<section className="relative w-full overflow-hidden bg-white">
|
|
<Carousel className="w-full relative" plugins={[plugin.current]}>
|
|
<CarouselContent>
|
|
{banners.map((banner, index) => (
|
|
<CarouselItem key={banner.id}>
|
|
<div className="relative w-full h-[400px] sm:h-[500px] md:h-[810px]">
|
|
<Image
|
|
src={banner.thumbnail_url}
|
|
alt={banner.title}
|
|
fill
|
|
priority={index === 0}
|
|
className="object-cover"
|
|
/>
|
|
|
|
{/* {index === 0 && (
|
|
<div className="absolute inset-0 flex flex-col justify-center items-start px-4 sm:px-8 md:px-28 z-10">
|
|
<motion.h1
|
|
initial={{ opacity: 0, y: 40 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
className="text-2xl sm:text-3xl md:text-5xl font-bold text-black mb-4"
|
|
>
|
|
{banner.title}
|
|
</motion.h1>
|
|
|
|
{banner.description && (
|
|
<motion.p
|
|
initial={{ opacity: 0, y: 40 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.9, delay: 0.2 }}
|
|
className="text-sm sm:text-base md:text-lg text-black mb-6"
|
|
>
|
|
{banner.description}
|
|
</motion.p>
|
|
)}
|
|
|
|
|
|
</div>
|
|
)} */}
|
|
</div>
|
|
</CarouselItem>
|
|
))}
|
|
</CarouselContent>
|
|
</Carousel>
|
|
</section>
|
|
);
|
|
}
|