update block

apps/insights.saladeaula.digital/app/routes/_app.orgs.$id.address/route.tsx

@@ -1,11 +1,165 @@
 import type { Route } from './+types/route'
 
-import { Card, CardContent } from '@repo/ui/components/ui/card'
+import { Controller, useForm } from 'react-hook-form'
+import { useOutletContext } from 'react-router'
+
+import { Button } from '@repo/ui/components/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from '@repo/ui/components/ui/card'
+import {
+  Field,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FieldSet
+} from '@repo/ui/components/ui/field'
+import { Input } from '@repo/ui/components/ui/input'
+
+import type { Org } from '../_app.orgs.$id/data'
 
 export default function Route({}: Route.ComponentProps) {
+  const { org } = useOutletContext() as { org: Org }
+  const { handleSubmit, control } = useForm({ defaultValues: org?.address })
+
+  const onSubmit = async () => {}
+
   return (
-    <Card>
-      <CardContent>address</CardContent>
-    </Card>
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Card>
+        <CardHeader>
+          <CardTitle className="font-semibold text-lg">
+            Editar endereço
+          </CardTitle>
+          <CardDescription>
+            Este endereço será usado automaticamente sempre que for necessário
+            informar um endereço.
+          </CardDescription>
+        </CardHeader>
+
+        <CardContent className="space-y-6">
+          <FieldSet disabled={true}>
+            <Controller
+              control={control}
+              name="address1"
+              defaultValue=""
+              render={({ field, fieldState }) => (
+                <Field data-invalid={fieldState.invalid}>
+                  <FieldLabel htmlFor={field.name}>Endereço</FieldLabel>
+                  <Input
+                    id={field.name}
+                    aria-invalid={fieldState.invalid}
+                    {...field}
+                  />
+
+                  {fieldState.invalid && (
+                    <FieldError errors={[fieldState.error]} />
+                  )}
+                </Field>
+              )}
+            />
+
+            <Controller
+              control={control}
+              name="address2"
+              defaultValue=""
+              render={({ field, fieldState }) => (
+                <Field data-invalid={fieldState.invalid}>
+                  <FieldLabel htmlFor={field.name}>
+                    Complemento{' '}
+                    <span className="text-muted-foreground">(opcional)</span>
+                  </FieldLabel>
+                  <Input
+                    id={field.name}
+                    aria-invalid={fieldState.invalid}
+                    {...field}
+                  />
+
+                  {fieldState.invalid && (
+                    <FieldError errors={[fieldState.error]} />
+                  )}
+                </Field>
+              )}
+            />
+
+            <FieldGroup className="grid grid-cols-3">
+              {/* Neighborhood */}
+              <Controller
+                control={control}
+                name="neighborhood"
+                defaultValue=""
+                render={({ field, fieldState }) => (
+                  <Field data-invalid={fieldState.invalid}>
+                    <FieldLabel htmlFor={field.name}>Bairro</FieldLabel>
+                    <Input
+                      id={field.name}
+                      aria-invalid={fieldState.invalid}
+                      {...field}
+                    />
+
+                    {fieldState.invalid && (
+                      <FieldError errors={[fieldState.error]} />
+                    )}
+                  </Field>
+                )}
+              />
+              {/* City */}
+              <Controller
+                control={control}
+                name="city"
+                defaultValue=""
+                render={({ field, fieldState }) => (
+                  <Field data-invalid={fieldState.invalid}>
+                    <FieldLabel htmlFor={field.name}>Cidade</FieldLabel>
+                    <Input
+                      id={field.name}
+                      aria-invalid={fieldState.invalid}
+                      {...field}
+                    />
+
+                    {fieldState.invalid && (
+                      <FieldError errors={[fieldState.error]} />
+                    )}
+                  </Field>
+                )}
+              />
+              {/* State */}
+              <Controller
+                control={control}
+                name="state"
+                defaultValue=""
+                render={({ field, fieldState }) => (
+                  <Field data-invalid={fieldState.invalid}>
+                    <FieldLabel htmlFor={field.name}>Estado</FieldLabel>
+                    <Input
+                      id={field.name}
+                      aria-invalid={fieldState.invalid}
+                      {...field}
+                    />
+
+                    {fieldState.invalid && (
+                      <FieldError errors={[fieldState.error]} />
+                    )}
+                  </Field>
+                )}
+              />
+            </FieldGroup>
+          </FieldSet>
+
+          <Button
+            type="submit"
+            className="cursor-pointer"
+            // disabled={formState.isSubmitting}
+            disabled={true}
+          >
+            Atualizar endereço
+          </Button>
+        </CardContent>
+      </Card>
+    </form>
   )
 }