import React, { useState } from 'react' import { Head, router, usePage } from '@inertiajs/react' import CustomerLayout from '@/Layouts/CustomerLayout' import { HiOutlineBell } from 'react-icons/hi2' import UserBanner from './UserBanner' import VoucherCard from './VoucherCard' const GuestBanner = () => { const { props: { app_name }, } = usePage() return (

{/* user */}

Welcome to {app_name}

0

) } export default function Index(props) { const { auth: { user }, infos, banners, locations, vouchers: { data, next_page_url }, _location_id, } = props const [locId, setLocId] = useState(_location_id) const [v, setV] = useState(data) const handleBanner = (banner) => { router.get(route('home.banner', banner)) } const handleSelectLoc = (loc) => { if (loc.id === locId) { setLocId('') fetch('') return } setLocId(loc.id) fetch(loc.id) } const handleNextPage = () => { router.get( next_page_url, { location_id: locId, }, { replace: true, preserveState: true, only: ['vouchers'], onSuccess: (res) => { setV(v.concat(res.props.vouchers.data)) }, } ) } const fetch = (locId) => { router.get( route(route().current()), { location_id: locId }, { replace: true, preserveState: true, onSuccess: (res) => { setV(res.props.vouchers.data) }, } ) } return (

{user !== null ? : }

{/* banner */}

{banners.map((banner) => ( handleBanner(banner)} key={banner.id} loading="lazy" src={banner.image_url} alt={banner.title} className={`rounded w-${ banners.length === 1 ? 'full' : '[80%]' } min-w-[340px] h-28 object-cover`} /> ))}

{/* info */}

{infos.map((info) => (

{info.title}

))}

{/* chips */}

{locations.map((location) => (

handleSelectLoc(location)} key={location.id} className={`px-2 py-1 rounded-2xl ${ location.id === locId ? 'text-white bg-blue-600 border border-blue-800' : 'bg-blue-100 border border-blue-200' }`} > {location.name}

))}

{/* voucher */}

{v.map((voucher) => ( ))} {next_page_url !== null && (

Load more

)}

) }