import React 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}
)
}
export default function Index(props) {
const {
auth: { user },
infos,
banners,
_status,
} = props
const isStatus = (s) => {
if (s === _status) {
return 'px-2 py-1 rounded-2xl text-white bg-blue-600 border border-blue-800'
}
return 'px-2 py-1 rounded-2xl bg-blue-100 border border-blue-200'
}
const handleFavorite = () => {
if (user === null) {
router.visit(route('customer.login'))
}
router.visit(route('customer.home.favorite'))
}
const handleAll = () => {
router.visit(route('home.index'))
}
return (
{/* guest or user banner */}
{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}
))}
{_status === ALL &&
}
{_status === FAVORITE &&
}
)
}