From 4de312e8252268841b5b78937a568a064a6d88f9 Mon Sep 17 00:00:00 2001
From: William Moraes <willmoraes.ev@gmail.com>
Date: Tue, 14 May 2024 19:45:49 -0300
Subject: [PATCH 1/2] feat: :sparkles: improve address input sort

---
 src/app/shelter/page.tsx | 159 +++++++++++++++++++++------------------
 1 file changed, 84 insertions(+), 75 deletions(-)

diff --git a/src/app/shelter/page.tsx b/src/app/shelter/page.tsx
index 4975300..b606ae0 100644
--- a/src/app/shelter/page.tsx
+++ b/src/app/shelter/page.tsx
@@ -223,57 +223,92 @@ function Shelter() {
               <CardContent>
                 <h2 className="my-4 text-xl">Endereço</h2>
                 <div className="flex flex-col gap-3">
+                  <div className="flex gap-5">
+                    <div className="w-32 flex-none">
+                      <FormField
+                        control={form.control}
+                        name="address.cep"
+                        render={({ field, fieldState }) => (
+                          <FormItem>
+                            <FormLabel>CEP</FormLabel>
+                            <FormControl>
+                              <Input
+                                placeholder="xxxxx-xxx"
+                                {...field}
+                                onChange={(e) => {
+                                  field.onChange(cepMask(e.target.value));
+                                }}
+                                onBlur={() => {
+                                  if (fieldState.invalid) return;
+                                  fetch(
+                                    `https://viacep.com.br/ws/${field.value}/json/`,
+                                  )
+                                    .then((response) => response.json())
+                                    .then(populateAddressWithViaCepData)
+                                    .catch((error) => {
+                                      console.log(error);
+                                    });
+                                }}
+                              />
+                            </FormControl>
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
+                    </div>
+                    <div className="flex-1">
+                      <FormField
+                        control={form.control}
+                        name="address.street"
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel>Logradouro</FormLabel>
+                            <FormControl>
+                              <Input placeholder="Nome da rua" {...field} />
+                            </FormControl>
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
+                    </div>
+                  </div>
+                  <div className="grid grid-cols-2 gap-5">
+                    <FormField
+                      control={form.control}
+                      name="address.neighborhood"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>Bairro</FormLabel>
+                          <FormControl>
+                            <Input placeholder="Bairro" {...field} />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name="address.number"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>Número</FormLabel>
+                          <FormControl>
+                            <Input placeholder="Número" {...field} />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </div>
                   <FormField
                     control={form.control}
-                    name="address.cep"
-                    render={({ field, fieldState }) => (
-                      <FormItem>
-                        <FormLabel>CEP</FormLabel>
-                        <FormControl>
-                          <Input
-                            placeholder="XXXXX-XXX"
-                            {...field}
-                            onChange={(e) => {
-                              field.onChange(cepMask(e.target.value));
-                            }}
-                            onBlur={() => {
-                              if (fieldState.invalid) return;
-                              fetch(
-                                `https://viacep.com.br/ws/${field.value}/json/`,
-                              )
-                                .then((response) => response.json())
-                                .then(populateAddressWithViaCepData)
-                                .catch((error) => {
-                                  console.log(error);
-                                });
-                            }}
-                          />
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-                  <FormField
-                    control={form.control}
-                    name="address.street"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>Rua</FormLabel>
-                        <FormControl>
-                          <Input placeholder="Nome da rua" {...field} />
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-                  <FormField
-                    control={form.control}
-                    name="address.neighborhood"
+                    name="address.complement"
                     render={({ field }) => (
                       <FormItem>
-                        <FormLabel>Bairro</FormLabel>
+                        <FormLabel>Complemento (opcional)</FormLabel>
                         <FormControl>
-                          <Input placeholder="Bairro" {...field} />
+                          <Input placeholder="Complemento" {...field} />
                         </FormControl>
                         <FormMessage />
                       </FormItem>
@@ -282,12 +317,12 @@ function Shelter() {
                   <div className="grid grid-cols-2 gap-5">
                     <FormField
                       control={form.control}
-                      name="address.number"
+                      name="address.city"
                       render={({ field }) => (
                         <FormItem>
-                          <FormLabel>Número</FormLabel>
+                          <FormLabel>Cidade</FormLabel>
                           <FormControl>
-                            <Input placeholder="Número" {...field} />
+                            <Input placeholder="Cidade" {...field} />
                           </FormControl>
                           <FormMessage />
                         </FormItem>
@@ -315,32 +350,6 @@ function Shelter() {
                       )}
                     />
                   </div>
-                  <FormField
-                    control={form.control}
-                    name="address.city"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>Cidade</FormLabel>
-                        <FormControl>
-                          <Input placeholder="Cidade" {...field} />
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-                  <FormField
-                    control={form.control}
-                    name="address.complement"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>Complemento (opcional)</FormLabel>
-                        <FormControl>
-                          <Input placeholder="Complemento" {...field} />
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
                 </div>
               </CardContent>
             </CardBase>

From b05796af522bacaa1af7fd01970cbcab7d60b4c9 Mon Sep 17 00:00:00 2001
From: William Moraes <willmoraes.ev@gmail.com>
Date: Tue, 14 May 2024 20:09:43 -0300
Subject: [PATCH 2/2] fix: :bug: adjust mobile address form

---
 src/app/shelter/page.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/shelter/page.tsx b/src/app/shelter/page.tsx
index b606ae0..47d1034 100644
--- a/src/app/shelter/page.tsx
+++ b/src/app/shelter/page.tsx
@@ -223,8 +223,8 @@ function Shelter() {
               <CardContent>
                 <h2 className="my-4 text-xl">Endereço</h2>
                 <div className="flex flex-col gap-3">
-                  <div className="flex gap-5">
-                    <div className="w-32 flex-none">
+                  <div className="flex flex-col gap-5 lg:flex-row">
+                    <div className="flex-none lg:w-32">
                       <FormField
                         control={form.control}
                         name="address.cep"
@@ -256,7 +256,7 @@ function Shelter() {
                         )}
                       />
                     </div>
-                    <div className="flex-1">
+                    <div className="lg:flex-1">
                       <FormField
                         control={form.control}
                         name="address.street"
@@ -272,7 +272,7 @@ function Shelter() {
                       />
                     </div>
                   </div>
-                  <div className="grid grid-cols-2 gap-5">
+                  <div className="grid gap-5 lg:grid-cols-2">
                     <FormField
                       control={form.control}
                       name="address.neighborhood"
@@ -314,7 +314,7 @@ function Shelter() {
                       </FormItem>
                     )}
                   />
-                  <div className="grid grid-cols-2 gap-5">
+                  <div className="grid gap-5 lg:grid-cols-2">
                     <FormField
                       control={form.control}
                       name="address.city"