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'
import FormLocation from '../Components/FormLocation'
import { HiXCircle } from 'react-icons/hi'
const GuestBanner = () => {
const {
props: { setting, notification_count },
} = usePage()
return (
{/* user */}
{setting.OPEN_WEBSITE_NAME}
)
}
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
)}
)
}