feat: improve UI for AddGuestbookForm

ixartz · Aug 22, 2023 · 153abfc · 153abfc
1 parent ac48e38
commit 153abfc
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 10 deletions.
diff --git a/src/app/guestbook/page.tsx b/src/app/guestbook/page.tsx
@@ -17,11 +17,14 @@ const Guestbook = async () => {
     <Main>
       <AddGuestbookForm />
 
-      {guestbook.map((elt) => (
-        <div key={elt.id} className="mb-1">
-          <span className="font-semibold">{elt.username}</span>: {elt.body}
-        </div>
-      ))}
+      <div className="mt-5">
+        {guestbook.map((elt) => (
+          <div key={elt.id} className="mb-1">
+            <span className="text-gray-500">{elt.username}:</span>{' '}
+            <span className="text-gray-800">{elt.body}</span>
+          </div>
+        ))}
+      </div>
     </Main>
   );
 };

diff --git a/src/components/AddGuestbookForm.tsx b/src/components/AddGuestbookForm.tsx
@@ -35,13 +35,46 @@ const AddGuestbookForm = () => {
 
   return (
     <form onSubmit={handleCreate}>
-      <input {...register('username')} />
-      {errors.username?.message && <div>{errors.username?.message}</div>}
+      <div>
+        <label className="text-sm font-bold text-gray-700" htmlFor="username">
+          Username
+          <input
+            id="username"
+            className="mt-2 w-full appearance-none rounded border px-3 py-2 leading-tight text-gray-700 focus:outline-none focus:ring focus:ring-blue-300/50"
+            {...register('username')}
+          />
+        </label>
+        {errors.username?.message && (
+          <div className="my-2 text-xs italic text-red-500">
+            {errors.username?.message}
+          </div>
+        )}
+      </div>
 
-      <input {...register('body')} />
-      {errors.body?.message && <div>{errors.body?.message}</div>}
+      <div className="mt-3">
+        <label className="text-sm font-bold text-gray-700" htmlFor="body">
+          Body
+          <input
+            id="body"
+            className="mt-2 w-full appearance-none rounded border px-3 py-2 leading-tight text-gray-700 focus:outline-none focus:ring focus:ring-blue-300/50"
+            {...register('body')}
+          />
+        </label>
+        {errors.body?.message && (
+          <div className="my-2 text-xs italic text-red-500">
+            {errors.body?.message}
+          </div>
+        )}
+      </div>
 
-      <button type="submit">Create</button>
+      <div className="mt-5">
+        <button
+          className="rounded bg-blue-500 px-5 py-1 font-bold text-white hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-300/50"
+          type="submit"
+        >
+          Send
+        </button>
+      </div>
     </form>
   );
 };