import Reactm, { useState, useEffect } from 'react' import { Head, router, usePage } from '@inertiajs/react' import { HiOutlineBell } from 'react-icons/hi2' import { handleBanner, ALL, FAVORITE } from './utils' import CustomerLayout from '@/Layouts/CustomerLayout' import UserBanner from './Partials/UserBanner' import AllVoucher from './IndexPartials/AllVoucher' import FavoriteVoucher from './IndexPartials/FavoriteVoucher' const GuestBanner = () => { const { props: { setting, notification_count }, } = usePage() return (

{/* user */}

{setting.OPEN_WEBSITE_NAME}

{notification_count}

) } export default function Index(props) { const { auth: { user }, infos, banners, _status, } = props const [bannerIndex, setBannerIndex] = useState(0) const isStatus = (s) => { if (s === _status) { return 'px-2 py-1 rounded-2xl hover:bg-blue-800 text-white bg-blue-600 border border-blue-800' } return 'px-2 py-1 rounded-2xl hover:bg-blue-800 hover:text-white bg-blue-100 border border-blue-200' } const handleFavorite = () => { if (user === null) { router.visit(route('customer.login')) } router.visit(route('home.favorite')) } const handleAll = () => { router.visit(route('home.index')) } useEffect(() => { let tm = setTimeout( () => setBannerIndex((prevIndex) => prevIndex === banners.length - 1 ? 0 : prevIndex + 1 ), 3000 ) return () => clearTimeout(tm) }, [bannerIndex]) return ( {/* for test */} {/*

*/}

{/* guest or user banner */} {user !== null ? : } {/* banner */}

{banners.map((banner, index) => ( handleBanner(banner)} key={banner.id} loading="lazy" src={banner.image_url} alt={banner.title} className={`rounded w-${ banners.length === 1 || banners.length - 1 === index ? 'full' : '[80%]' } min-w-[340px] h-28 object-fill`} style={{ transform: `translate3d(${ -bannerIndex * 100 }%, 0, 0)`, transition: 'ease 1000ms', }} /> ))}

{/* info */}

{infos.map((info) => (

{info.title}

))}

{/* chips */}

Semua

Favorit

{_status === ALL && } {_status === FAVORITE && }

) }