1 files changed, 90 insertions, 35 deletions

diff --git a/src/lib/address/components/Addresses.jsx b/src/lib/address/components/Addresses.jsx
index 3ac06b6c..a2adecb1 100644
--- a/src/lib/address/components/Addresses.jsx
+++ b/src/lib/address/components/Addresses.jsx
@@ -4,13 +4,15 @@ import useAuth from '@/core/hooks/useAuth'
 import { getItemAddress, updateItemAddress } from '@/core/utils/address'
 import { useRouter } from 'next/router'
 import useAddresses from '../hooks/useAddresses'
+import MobileView from '@/core/components/views/MobileView'
+import DesktopView from '@/core/components/views/DesktopView'
+import Menu from '@/lib/auth/components/Menu'
 
 const Addresses = () => {
   const router = useRouter()
   const { select = null } = router.query
-  const auth = useAuth()
   const { addresses } = useAddresses()
-  const selectedAdress = getItemAddress(select || '')
+  const selectedAddress = getItemAddress(select || '')
   const changeSelectedAddress = (id) => {
     if (!select) return
     updateItemAddress(select, id)
@@ -26,43 +28,96 @@ const Addresses = () => {
   }
 
   return (
-    <div className='p-4'>
-      <div className='text-right'>
-        <Link href='/my/address/create'>Tambah Alamat</Link>
-      </div>
+    <>
+      <MobileView>
+        <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) => {
+              const type = address.type.charAt(0).toUpperCase() + address.type.slice(1) + ' Address'
+              return (
+                <AddressCard
+                  key={index}
+                  address={address}
+                  type={type}
+                  changeSelectedAddress={changeSelectedAddress}
+                  selectedAddress={selectedAddress}
+                  select={select}
+                />
+              )
+            })}
+          </div>
+        </div>
+      </MobileView>
 
-      <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
+      <DesktopView>
+        <div className='container mx-auto flex py-10'>
+          <div className='w-3/12 pr-4'>
+            <Menu />
+          </div>
+          <div className='w-9/12 p-4 bg-white border border-gray_r-6 rounded'>
+            <div className='flex items-center mb-6'>
+              <h1 className='text-title-sm font-semibold'>Daftar Alamat</h1>
+              <Link href='/my/address/create' className='btn-solid-red py-2 px-3 text-gray_r-1 h-fit ml-auto'>
+                Tambah Alamat
               </Link>
             </div>
-          )
-        })}
+
+            <div className='grid grid-cols-2 gap-4'>
+              {addresses.data?.map((address, index) => {
+                const type =
+                  address.type.charAt(0).toUpperCase() + address.type.slice(1) + ' Address'
+                return (
+                  <AddressCard
+                    key={index}
+                    address={address}
+                    type={type}
+                    changeSelectedAddress={changeSelectedAddress}
+                    selectedAddress={selectedAddress}
+                    select={select}
+                  />
+                )
+              })}
+            </div>
+          </div>
+        </div>
+      </DesktopView>
+    </>
+  )
+}
+
+const AddressCard = ({ address, selectedAddress, changeSelectedAddress, type, select }) => {
+  const auth = useAuth()
+
+  return (
+    <div
+      className={`p-4 rounded-md border 
+        ${
+          (selectedAddress && selectedAddress == address.id
+            ? 'border-gray_r-7 bg-gray_r-4'
+            : 'border-gray_r-7') +
+          ' ' +
+          (select && 'cursor-pointer hover:bg-gray_r-4 transition')
+        }`}
+    >
+      <div onClick={() => changeSelectedAddress(address.id)} className={select && 'cursor-pointer'}>
+        <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>
   )
 }