1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
import { useMemo } from 'react'
import { useQuery } from 'react-query'
import { Swiper, SwiperProps, SwiperSlide } from 'swiper/react'
import { getVoucher } from '~/services/voucher'
import style from '../styles/voucher.module.css'
import Image from 'next/image'
import { useToast } from '@chakra-ui/react'
const swiperVoucher: SwiperProps = {
autoplay: {
delay: 6000,
disableOnInteraction: false
},
loop: false,
className: 'h-[160px] w-full',
slidesPerView: 3,
spaceBetween: 16
}
const Voucher = () => {
const toast = useToast();
const voucherQuery = useQuery({
queryKey: ['voucher.all-voucher'],
queryFn: getVoucher
})
const vouchers = useMemo(() => voucherQuery.data || [], [voucherQuery.data]);
const copyText = (text: string) => {
navigator.clipboard.writeText(text)
toast({
title: 'Salin ke papan klip',
description: 'Kode voucher berhasil disalin',
status: 'success',
duration: 3000,
isClosable: true,
position: 'bottom',
})
}
return (
<>
<div className={style['title']}>Pakai Voucher Belanja</div>
<div className='h-6' />
{voucherQuery.isLoading && (
<div className='grid grid-cols-3 gap-x-4 animate-pulse'>
{Array.from({ length: 3 }).map((_, index) => (
<div key={index} className='w-full h-[160px] bg-gray-200 rounded-xl' />
))}
</div>
)}
{!voucherQuery.isLoading && (
<div className={style['voucher-section']}>
<Swiper {...swiperVoucher}>
{vouchers.map((voucher) => (
<SwiperSlide key={voucher.id} className='pb-2'>
<div className={style['voucher-card']}>
<Image src={voucher.image} alt={voucher.name} width={128} height={128} className={style['voucher-image']} />
<div className={style['voucher-content']}>
<div className={style['voucher-title']}>{voucher.name}</div>
<div className={style['voucher-desc']}>{voucher.description}</div>
<div className={style['voucher-bottom']}>
<div>
<div className={style['voucher-code-desc']}>Kode Promo</div>
<div className={style['voucher-code']}>{voucher.code}</div>
</div>
<button className={style['voucher-copy']} onClick={() => copyText(voucher.code)}>Salin</button>
</div>
</div>
</div>
</SwiperSlide>
))}
</Swiper>
</div>
)}
</>
)
}
export default Voucher
|
