1 files changed, 70 insertions, 0 deletions
diff --git a/src/lib/address/components/Addresses.jsx b/src/lib/address/components/Addresses.jsx
new file mode 100644
index 00000000..3ac06b6c
--- /dev/null
+++ b/src/lib/address/components/Addresses.jsx
@@ -0,0 +1,70 @@
+import Link from '@/core/components/elements/Link/Link'
+import Spinner from '@/core/components/elements/Spinner/Spinner'
+import useAuth from '@/core/hooks/useAuth'
+import { getItemAddress, updateItemAddress } from '@/core/utils/address'
+import { useRouter } from 'next/router'
+import useAddresses from '../hooks/useAddresses'
+
+const Addresses = () => {
+  const router = useRouter()
+  const { select = null } = router.query
+  const auth = useAuth()
+  const { addresses } = useAddresses()
+  const selectedAdress = getItemAddress(select || '')
+  const changeSelectedAddress = (id) => {
+    if (!select) return
+    updateItemAddress(select, id)
+    router.back()
+  }
+
+  if (addresses.isLoading) {
+    return (
+      <div className='flex justify-center my-6'>
+        <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
+      </div>
+    )
+  }
+
+  return (
+    <div className='p-4'>
+      <div className='text-right'>
+        <Link href='/my/address/create'>Tambah Alamat</Link>
+      </div>
+
+      <div className='grid gap-y-4 mt-4'>
+        {addresses.data?.map((address, index) => {
+          let type = address.type.charAt(0).toUpperCase() + address.type.slice(1) + ' Address'
+          return (
+            <div
+              key={index}
+              className={
+                'p-4 rounded-md border ' +
+                (selectedAdress && selectedAdress == address.id
+                  ? 'border-gray_r-7 bg-gray_r-4'
+                  : 'border-gray_r-7')
+              }
+            >
+              <div onClick={() => changeSelectedAddress(address.id)}>
+                <div className='flex gap-x-2'>
+                  <div className='badge-red'>{type}</div>
+                  {auth?.partnerId == address.id && <div className='badge-green'>Utama</div>}
+                </div>
+                <p className='font-medium mt-2'>{address.name}</p>
+                {address.mobile && <p className='mt-2 text-gray_r-11'>{address.mobile}</p>}
+                <p className='mt-1 leading-6 text-gray_r-11'>{address.street}</p>
+              </div>
+              <Link
+                href={`/my/address/${address.id}/edit`}
+                className='btn-light bg-white mt-3 w-full !text-gray_r-11'
+              >
+                Ubah Alamat
+              </Link>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+export default Addresses