Make some progress on the event creation form

components/FormEventList.tsx

@@ -14,48 +14,58 @@ export function FormEventList(props: HTMLProps<HTMLFormElement>) {
         "negative": error,
     })
     
-    let message: JSX.Element
     let contents: JSX.Element
 
     if(error) {
-        message = t("formEventListError")
-        contents = (
-            <div>
-                <code>
-                    {JSON.stringify(error)}
-                </code>
-            </div>
-        )
+        contents = <>
+            <p>
+                {t("eventListError")}
+            </p>
+            <code>
+                {JSON.stringify(error)}
+            </code>
+        </>
     }
     else if(!data) {
-        message = <Loading/>
-        contents = <></>
+        contents = <Loading/>
     }
     else {
-        console.debug(data)
         if(data.length === 0) {
-            message = t("formEventListFirst")
-            contents = (
-                <div>zzz</div>
-            )
+            contents = <>
+                <p>
+                    {t("eventListCreateFirst")}
+                </p>
+            </>
         }
         else {
-            message = t("formEventListAnother")
-            contents = (
+            contents = <>
+                <p>
+                    {t("eventListDescription")}
+                </p>
                 <div>
-                    {data.map((event: Event) => <div><a href={`/events/slug`}>{event.name}</a></div>)}
+                    {data.map((event: Event) => <div><a href={`/events/${event.slug}`}>{event.name}</a></div>)}
                 </div>
-            )
+                <p>
+                    {t("eventListCreateAnother")}
+                </p>
+                <form className="form-monorow">
+                    <input
+                        type="text"
+                        placeholder={t("eventListCreatePlaceholder")}
+                    />
+                    <input
+                        type="submit"
+                        className="positive square-40"
+                        value="→"
+                    />
+                </form>
+            </>
         }
     }
 
-
     return (
-        <form className={newClassName}>
-            <p>
-                {message}
-            </p>
+        <div className={newClassName}>
             {contents}
-        </form>
+        </div>
     )
 }

components/FormLoginTelegram.tsx

@@ -8,6 +8,7 @@ import { FestaLoginData, TelegramLoginData } from "../types/user"
 import { useDefinedContext } from "../utils/definedContext"
 import { TelegramLoginButton } from "./TelegramLoginButton"
 
+
 export function FormLoginTelegram({className, ...props}: HTMLProps<HTMLFormElement>) {
     const { t } = useTranslation("common")    
     const [_, setLogin] = useDefinedContext(LoginContext)
@@ -69,11 +70,11 @@ export function FormLoginTelegram({className, ...props}: HTMLProps<HTMLFormEleme
     }
     
     return (
-        <form className={newClassName}>
+        <div className={newClassName}>
             <p>
                 {message}
             </p>
             {contents}
-        </form>
+        </div>
     )
 }

public/locales/it-IT/common.json

@@ -12,7 +12,9 @@
     "eventsInputNamePlaceholder": "Festa a Festà",
     "eventsInputSubmitLabel": "Crea evento",
     "genericLoading": "Caricamento...",
-    "formEventListFirst": "Inserisci il nome del tuo primo evento qui sotto!",
-    "formEventListAnother": "Questi sono gli eventi che hai creato:",
-    "formEventListError": "Si è verificato il seguente errore durante il recupero dei tuoi eventi:"
+    "eventListError": "Si è verificato il seguente errore durante il recupero dei tuoi eventi:",
+    "eventListDescription": "Questi sono gli eventi che hai creato:",
+    "eventListCreateAnother": "Se vuoi crearne un altro, inserisci il suo nome qui sotto:",
+    "eventListCreateFirst": "Inserisci il nome del tuo primo evento qui sotto!",
+    "eventListCreatePlaceholder": "Nome evento"
 }

styles/globals.css

@@ -121,4 +121,13 @@ input.negative, button.negative {
 
 .icon.fa-pulse {
     filter: drop-shadow(1px 1px 1px var(--background));
+}
+
+.form-monorow {
+    display: flex;
+    flex-direction: row;
+    gap: 4px;
+
+    justify-content: center;
+    align-items: center;
 }

styles/page-tweaks.css

@@ -1,7 +1,7 @@
 #page-index {
     display: grid;
     grid-template-columns: 100%;
-    grid-template-rows: 1fr 1fr;
+    grid-template-rows: 2fr 3fr;
 
     justify-content: center;
     text-align: center;
@@ -34,27 +34,3 @@
     align-self: start;
     grid-row: 2;
 }
-
-.form-event-create {
-    display: flex;
-    flex-direction: row;
-
-    justify-content: space-evenly;
-    align-items: center;
-    text-align: center;
-    gap: 8px;
-
-    width: 100%;
-    max-width: 480px;
-
-    margin: 0 auto;
-}
-
-.form-event-create #input-name {
-    flex-grow: 1;
-    width: 100%;
-}
-
-.form-event-create #input-submit {
-    flex-shrink: 0;
-}