From bc04e721d51e149709ab3cfaf5e77ef034511860 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Mon, 27 Mar 2023 10:17:49 +0700
Subject: invoice, invoice detail, address, create address, edit address,
 wishlist

---
 src/lib/address/components/CreateAddress.jsx | 237 +++++++++++++--------------
 1 file changed, 112 insertions(+), 125 deletions(-)

(limited to 'src/lib/address/components/CreateAddress.jsx')

diff --git a/src/lib/address/components/CreateAddress.jsx b/src/lib/address/components/CreateAddress.jsx
index 849b4c01..475d8548 100644
--- a/src/lib/address/components/CreateAddress.jsx
+++ b/src/lib/address/components/CreateAddress.jsx
@@ -10,6 +10,7 @@ import { useEffect, useState } from 'react'
 import createAddressApi from '../api/createAddressApi'
 import { toast } from 'react-hot-toast'
 import { yupResolver } from '@hookform/resolvers/yup'
+import Menu from '@/lib/auth/components/Menu'
 
 const CreateAddress = () => {
   const auth = useAuth()
@@ -88,133 +89,119 @@ const CreateAddress = () => {
   }
 
   return (
-    <form
-      className='p-4 flex flex-col gap-y-4'
-      onSubmit={handleSubmit(onSubmitHandler)}
-    >
-      <div>
-        <label className='form-label mb-2'>Label Alamat</label>
-        <Controller
-          name='type'
-          control={control}
-          render={(props) => (
-            <HookFormSelect
-              {...props}
-              isSearchable={false}
-              options={types}
-            />
-          )}
-        />
-        <div className='text-caption-2 text-red_r-11 mt-1'>{errors.type?.message}</div>
+    <div className='max-w-none md:container mx-auto flex p-0 md:py-10'>
+      <div className='hidden md:block w-3/12 pr-4'>
+        <Menu />
       </div>
-
-      <div>
-        <label className='form-label mb-2'>Nama</label>
-        <input
-          {...register('name')}
-          placeholder='John Doe'
-          type='text'
-          className='form-input'
-        />
-        <div className='text-caption-2 text-red_r-11 mt-1'>{errors.name?.message}</div>
-      </div>
-
-      <div>
-        <label className='form-label mb-2'>Email</label>
-        <input
-          {...register('email')}
-          placeholder='contoh@email.com'
-          type='email'
-          className='form-input'
-        />
-        <div className='text-caption-2 text-red_r-11 mt-1'>{errors.email?.message}</div>
-      </div>
-
-      <div>
-        <label className='form-label mb-2'>Mobile</label>
-        <input
-          {...register('mobile')}
-          placeholder='08xxxxxxxx'
-          type='tel'
-          className='form-input'
-        />
-        <div className='text-caption-2 text-red_r-11 mt-1'>{errors.mobile?.message}</div>
-      </div>
-
-      <div>
-        <label className='form-label mb-2'>Alamat</label>
-        <input
-          {...register('street')}
-          placeholder='Jl. Bandengan Utara 85A'
-          type='text'
-          className='form-input'
-        />
-        <div className='text-caption-2 text-red_r-11 mt-1'>{errors.street?.message}</div>
-      </div>
-
-      <div>
-        <label className='form-label mb-2'>Kode Pos</label>
-        <input
-          {...register('zip')}
-          placeholder='10100'
-          type='number'
-          className='form-input'
-        />
-        <div className='text-caption-2 text-red_r-11 mt-1'>{errors.zip?.message}</div>
-      </div>
-
-      <div>
-        <label className='form-label mb-2'>Kota</label>
-        <Controller
-          name='city'
-          control={control}
-          render={(props) => (
-            <HookFormSelect
-              {...props}
-              options={cities}
-            />
-          )}
-        />
-        <div className='text-caption-2 text-red_r-11 mt-1'>{errors.city?.message}</div>
-      </div>
-
-      <div>
-        <label className='form-label mb-2'>Kecamatan</label>
-        <Controller
-          name='district'
-          control={control}
-          render={(props) => (
-            <HookFormSelect
-              {...props}
-              options={districts}
-              disabled={!watchCity}
-            />
-          )}
-        />
-      </div>
-
-      <div>
-        <label className='form-label mb-2'>Kelurahan</label>
-        <Controller
-          name='subDistrict'
-          control={control}
-          render={(props) => (
-            <HookFormSelect
-              {...props}
-              options={subDistricts}
-              disabled={!watchDistrict}
-            />
-          )}
-        />
+      <div className='w-full md:w-9/12 p-4 bg-white border border-gray_r-6 rounded'>
+        <form onSubmit={handleSubmit(onSubmitHandler)}>
+          <div className='grid grid-cols-1 md:grid-cols-2 gap-4'>
+            <div>
+              <label className='form-label mb-2'>Label Alamat</label>
+              <Controller
+                name='type'
+                control={control}
+                render={(props) => (
+                  <HookFormSelect {...props} isSearchable={false} options={types} />
+                )}
+              />
+              <div className='text-caption-2 text-red_r-11 mt-1'>{errors.type?.message}</div>
+            </div>
+
+            <div>
+              <label className='form-label mb-2'>Nama</label>
+              <input
+                {...register('name')}
+                placeholder='John Doe'
+                type='text'
+                className='form-input'
+              />
+              <div className='text-caption-2 text-red_r-11 mt-1'>{errors.name?.message}</div>
+            </div>
+
+            <div>
+              <label className='form-label mb-2'>Email</label>
+              <input
+                {...register('email')}
+                placeholder='contoh@email.com'
+                type='email'
+                className='form-input'
+              />
+              <div className='text-caption-2 text-red_r-11 mt-1'>{errors.email?.message}</div>
+            </div>
+
+            <div>
+              <label className='form-label mb-2'>Mobile</label>
+              <input
+                {...register('mobile')}
+                placeholder='08xxxxxxxx'
+                type='tel'
+                className='form-input'
+              />
+              <div className='text-caption-2 text-red_r-11 mt-1'>{errors.mobile?.message}</div>
+            </div>
+
+            <div>
+              <label className='form-label mb-2'>Alamat</label>
+              <input
+                {...register('street')}
+                placeholder='Jl. Bandengan Utara 85A'
+                type='text'
+                className='form-input'
+              />
+              <div className='text-caption-2 text-red_r-11 mt-1'>{errors.street?.message}</div>
+            </div>
+
+            <div>
+              <label className='form-label mb-2'>Kode Pos</label>
+              <input
+                {...register('zip')}
+                placeholder='10100'
+                type='number'
+                className='form-input'
+              />
+              <div className='text-caption-2 text-red_r-11 mt-1'>{errors.zip?.message}</div>
+            </div>
+
+            <div>
+              <label className='form-label mb-2'>Kota</label>
+              <Controller
+                name='city'
+                control={control}
+                render={(props) => <HookFormSelect {...props} options={cities} />}
+              />
+              <div className='text-caption-2 text-red_r-11 mt-1'>{errors.city?.message}</div>
+            </div>
+
+            <div>
+              <label className='form-label mb-2'>Kecamatan</label>
+              <Controller
+                name='district'
+                control={control}
+                render={(props) => (
+                  <HookFormSelect {...props} options={districts} disabled={!watchCity} />
+                )}
+              />
+            </div>
+
+            <div>
+              <label className='form-label mb-2'>Kelurahan</label>
+              <Controller
+                name='subDistrict'
+                control={control}
+                render={(props) => (
+                  <HookFormSelect {...props} options={subDistricts} disabled={!watchDistrict} />
+                )}
+              />
+            </div>
+          </div>
+
+          <button type='submit' className='btn-yellow w-full md:w-fit mt-6 ml-0 md:ml-auto'>
+            Simpan
+          </button>
+        </form>
       </div>
-
-      <button
-        type='submit'
-        className='btn-yellow mt-2 w-full'
-      >
-        Simpan
-      </button>
-    </form>
+    </div>
   )
 }
 
-- 
cgit v1.2.3