blob: 4b3bd5fb0d491998483672df52638e75dddb1020 (
plain)
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
|
import { useState } from 'react';
import toast from 'react-hot-toast';
const InformationSection = ({ manifests }) => {
const [copied, setCopied] = useState(false);
const handleCopyClick = () => {
const textToCopy = manifests?.waybillNumber;
navigator.clipboard.writeText(textToCopy);
setCopied(true);
toast.success('No Resi Berhasil di Copy');
setTimeout(() => setCopied(false), 2000); // Reset copied state after 2 seconds
};
return (
<div className=''>
<div className='grid gap-y-4 p-4'>
<div className='grid grid-cols-[150px_auto] mb-4'>
<span className='font-semibold '>Nomor Resi</span>
<div className='flex gap-x-3'>
<span className='font-semibold'>: {manifests?.waybillNumber} </span>
<button
className={`${copied ? 'text-gray-400' : 'text-red-600 '}`}
onClick={() => handleCopyClick()}
>
<svg
aria-hidden='true'
fill='none'
stroke='currentColor'
stroke-width='1.5'
viewBox='0 0 24 24'
className='w-5 h-6'
>
<path
d='M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75'
stroke-linecap='round'
stroke-linejoin='round'
></path>
</svg>
</button>
</div>
</div>
{/*<div className='grid grid-cols-[150px_auto]'>*/}
{/* <span>Barang</span>*/}
{/* <span className='font-semibold'>: {manifests?.products}</span>*/}
{/*</div>*/}
<div className='grid grid-cols-[150px_auto]'>
<span>Kurir</span>
<span className='font-semibold'>
{' '}
: {manifests?.deliveryOrder?.carrier}
</span>
</div>
<div className='grid grid-cols-[150px_auto]'>
<span>Jenis Service</span>
<span className='font-semibold'>
{' '}
: {manifests?.deliveryOrder?.service}
</span>
</div>
<div className='grid grid-cols-[150px_auto]'>
<span>Tanggal Dikirim</span>
<span className='font-semibold'> : {manifests?.deliveredDate}</span>
</div>
<div className='grid grid-cols-[150px_auto]'>
<span>Estimasi Tiba</span>
<span className='font-semibold'>
:{' '}
<span className='text-red-600 font-semibold'>{manifests?.eta}</span>
</span>
</div>
<div className='grid grid-cols-[150px_auto]'>
<span>Total Product</span>
<span className='font-semibold'> : {Array.isArray(manifests?.products) ? manifests.products.length : 0} Product</span>
</div>
</div>
</div>
);
};
export default InformationSection;
|
