FEAT: hecho el arreglo de los botones y empecé con el registro de propiedades

Front/src/Componentes/FormPostCli.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+    import { Form, FormGroup, Input, Button} from "@sveltestrap/sveltestrap";
+
+    interface Props {
+        url: string;
+    }
+
+    let { url }: Props = $props();
+
+    let showAlert: boolean = $state(false);
+    let errorMessage: string = $state("")
+
+    let dni: number = $state(0)
+    let email: string = $state("")
+    let contraseña: string = $state("")
+    let nombre: string = $state("") 
+    let apellido: string = $state("")
+    let domicilio: string = $state("") 
+    let celular: string = $state("") 
+
+    async function submitForm(event: any) {
+        event.preventDefault();
+        try {
+            let response = await fetch(url, {
+                method: 'POST',
+                headers: {
+                    'Content-Type' : 'application/json',
+                },
+                body: JSON.stringify({dni, nombre, apellido, domicilio, celular, email, contraseña})
+            });
+            if (!response.ok) {
+                const errorData = await response.json();
+                errorMessage = errorData.message;
+                showAlert = true;
+            }
+        } catch (e) {
+            throw new Error("Fallo al enviar el formulario para crear un inquilino");
+        }
+    }
+</script>
+<div class="card">
+    <div class="card-body">
+        <Form on:submit={submitForm}>
+            <FormGroup floating label="Dni*">
+                <Input type="number" min='1' bind:value={dni} required />
+            </FormGroup>
+
+            <div class="row">
+                <div class="col">
+                    <FormGroup floating label="Nombre*">
+                        <Input type="text" bind:value={nombre} required />
+                    </FormGroup>
+                </div>
+                <div class="col">
+                    <FormGroup floating label="Apellido*">
+                        <Input type="text" bind:value={apellido} required />
+                    </FormGroup>
+                </div>
+            </div>
+
+            <FormGroup floating label="Email*">
+                <Input type="email" placeholder="ejemplo@mail.com" bind:value={email} required />
+            </FormGroup>
+            <FormGroup floating label="Contraseña*">
+                <Input type="password" placeholder="*********" bind:value={contraseña} required />
+            </FormGroup>     
+
+            <div class="row">
+                <div class="col">
+                    <FormGroup floating label="Domicilio*">
+                        <Input type="text" bind:value={domicilio} required />
+                    </FormGroup>
+                </div>
+                <div class="col">
+                    <FormGroup floating label="Celular*">
+                        <Input type="tel" bind:value={celular} required />
+                    </FormGroup>
+                </div>
+            </div>
+
+            <FormGroup>
+                <Button color="primary" type="submit">Crear</Button>
+            </FormGroup>
+        </Form>
+    </div>
+</div>
+{#if showAlert}
+<div class='alert alert-warning alert-dismissible fade show' role='alert'>
+    <strong>{errorMessage}</strong> 
+    <button type="button" class="btn-close close" aria-label="Close" data-bs-dismiss="alert"></button>
+</div>
+{/if}