add slide banner

dev
Aji Kamaludin 1 year ago
parent 177edeb8bd
commit 0bdecf7720
No known key found for this signature in database
GPG Key ID: 19058F67F0083AD3

@ -1,4 +1,4 @@
import React from 'react' import Reactm, { useState, useEffect } from 'react'
import { Head, router, usePage } from '@inertiajs/react' import { Head, router, usePage } from '@inertiajs/react'
import { HiOutlineBell } from 'react-icons/hi2' import { HiOutlineBell } from 'react-icons/hi2'
@ -40,6 +40,8 @@ export default function Index(props) {
_status, _status,
} = props } = props
const [bannerIndex, setBannerIndex] = useState(0)
const isStatus = (s) => { const isStatus = (s) => {
if (s === _status) { 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 text-white bg-blue-600 border border-blue-800'
@ -58,6 +60,18 @@ export default function Index(props) {
router.visit(route('home.index')) router.visit(route('home.index'))
} }
useEffect(() => {
let tm = setTimeout(
() =>
setBannerIndex((prevIndex) =>
prevIndex === banners.length - 1 ? 0 : prevIndex + 1
),
3000
)
return () => clearTimeout(tm)
}, [bannerIndex])
return ( return (
<CustomerLayout> <CustomerLayout>
{/* for test */} {/* for test */}
@ -70,7 +84,7 @@ export default function Index(props) {
{/* banner */} {/* banner */}
<div className="w-full"> <div className="w-full">
<div className="flex flex-row overflow-y-scroll space-x-2 py-3 px-2"> <div className="flex flex-row overflow-y-scroll space-x-2 py-3 px-2">
{banners.map((banner) => ( {banners.map((banner, index) => (
<img <img
onClick={() => handleBanner(banner)} onClick={() => handleBanner(banner)}
key={banner.id} key={banner.id}
@ -78,8 +92,17 @@ export default function Index(props) {
src={banner.image_url} src={banner.image_url}
alt={banner.title} alt={banner.title}
className={`rounded w-${ className={`rounded w-${
banners.length === 1 ? 'full' : '[80%]' banners.length === 1 ||
} min-w-[340px] h-28 object-cover`} banners.length - 1 === index
? 'full'
: '[80%]'
} min-w-[340px] h-28 object-fill`}
style={{
transform: `translate3d(${
-bannerIndex * 100
}%, 0, 0)`,
transition: 'ease 1000ms',
}}
/> />
))} ))}
</div> </div>

Loading…
Cancel
Save