blob: 124c87c95d3977cf4d0b61d7dc4393c0abec2d81 (
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
import Divider from '@/core/components/elements/Divider/Divider'
import Link from '@/core/components/elements/Link/Link'
import AppLayout from '@/core/components/layouts/AppLayout'
import useAuth from '@/core/hooks/useAuth'
import { deleteAuth } from '@/core/utils/auth'
import IsAuth from '@/lib/auth/components/IsAuth'
import { ChevronRightIcon, UserIcon } from '@heroicons/react/24/solid'
import { useRouter } from 'next/router'
import ImageNext from 'next/image'
export default function Menu() {
const auth = useAuth()
const router = useRouter()
const logout = () => {
deleteAuth()
router.push('/login')
}
return (
<IsAuth>
<AppLayout title='Menu Utama'>
<Link href='/my/profile' className='p-4 flex items-center'>
<div className='rounded-full p-3 bg-gray_r-6 text-gray_r-12/80'>
<UserIcon className='w-5' />
</div>
<div className='ml-4'>
<div className='font-semibold text-gray_r-12'>{auth?.name}</div>
{auth?.company && <div className='badge-solid-red mt-1'>Akun Bisnis</div>}
{!auth?.company && <div className='badge-gray mt-1'>Akun Individu</div>}
</div>
<div className='ml-auto !text-gray_r-12'>
<ChevronRightIcon className='w-6' />
</div>
</Link>
<Divider />
<div className='flex flex-col gap-y-6 py-6'>
<div>
<MenuHeader>Aktivitas Pembelian</MenuHeader>
<div className='divide-y divide-gray_r-6 border-y border-gray_r-6 mt-4'>
<LinkItem href='/my/quotations'>
{' '}
<div className='flex gap-x-3 items-center'>
<ImageNext src='/images/icon/icon_daftar_quotation.svg' width={18} height={20} />
<p>Daftar Quotation</p>
</div>
</LinkItem>
<LinkItem href='/my/transactions'>
<div className='flex gap-x-3 items-center'>
<ImageNext src='/images/icon/icon_daftar_transaksi.svg' width={18} height={20} />
<p>Daftar Transaksi</p>
</div>
</LinkItem>
<LinkItem href='/my/shipments'>
<div className='flex gap-x-3 items-center'>
<ImageNext src='/images/icon/icon_pengiriman.svg' width={18} height={20} />
<p>Daftar Pengiriman</p>
</div>
</LinkItem>
<LinkItem href='/my/invoices'>
{' '}
<div className='flex gap-x-3 items-center'>
<ImageNext src='/images/icon/icon_invoice.svg' width={18} height={20} />
<p>Invoice & Faktur Pajak</p>
</div>
</LinkItem>
<LinkItem href='/my/wishlist'>
<div className='flex gap-x-3 items-center'>
<ImageNext src='/images/icon/icon_wishlist.svg' width={18} height={20} />
<p>Wishlist</p>
</div>
</LinkItem>
</div>
</div>
<div>
<MenuHeader>Pusat Bantuan</MenuHeader>
<div className='divide-y divide-gray_r-6 border-y border-gray_r-6 mt-4'>
<LinkItem href='/'>
{' '}
<div className='flex gap-x-3 items-center'>
<ImageNext src='/images/icon/icon_layanan_pelanggan.svg' width={18} height={20} />
<p>Layanan Pelanggan</p>
</div>
</LinkItem>
</div>
</div>
<div>
<MenuHeader>Pengaturan Akun</MenuHeader>
<div className='divide-y divide-gray_r-6 border-y border-gray_r-6 mt-4'>
<LinkItem href='/my/address'>
<div className='flex gap-x-3 items-center'>
<ImageNext src='/images/icon/icon_daftar_alamat.svg' width={18} height={20} />
<p>Daftar Alamat</p>
</div>
</LinkItem>
</div>
<div onClick={logout} className='p-4 mt-2'>
<button className='w-full btn-red'>Keluar Akun</button>
</div>
</div>
</div>
</AppLayout>
</IsAuth>
)
}
const MenuHeader = ({ children, ...props }) => (
<div {...props} className='font-medium px-4 flex'>
{children}
</div>
)
const LinkItem = ({ children, ...props }) => (
<Link {...props} className='!text-gray_r-12/70 !font-normal p-4 flex items-center'>
{children}
<div className='ml-auto !text-gray_r-11'>
<ChevronRightIcon className='w-5' />
</div>
</Link>
)
|
