From 743780443fce5e7402e38456c852b82db2d40e6c Mon Sep 17 00:00:00 2001
From: JaneMoroz <moroz.jane@yahoo.com>
Date: Thu, 29 Aug 2024 22:49:09 +0300
Subject: [PATCH] fix: fix spacing and validation issues

---
 .../components/ResourceInput.tsx              |  9 ++----
 .../components/ResourcesContainer.tsx         | 32 ++++++++++---------
 2 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/src/app/(main)/my-voyage/[teamId]/voyage-resources/components/ResourceInput.tsx b/src/app/(main)/my-voyage/[teamId]/voyage-resources/components/ResourceInput.tsx
index 242cfc30..586f4fbc 100644
--- a/src/app/(main)/my-voyage/[teamId]/voyage-resources/components/ResourceInput.tsx
+++ b/src/app/(main)/my-voyage/[teamId]/voyage-resources/components/ResourceInput.tsx
@@ -70,16 +70,12 @@ export default function ResourceInput() {
       className="flex w-full items-center rounded-xl bg-base-200 p-1 shadow-lg"
       onSubmit={handleSubmit(onSubmit)}
     >
-      <div className="m-4 flex w-3/4 flex-col">
+      <div className="mx-4 mb-1 mt-3 flex w-3/4 flex-col">
         <TextInput
           id="url"
           placeholder="Paste your resource link here."
           ariaLabel="link"
-          errorMessage={
-            errors.url?.type === "invalid_string"
-              ? "Must start with https://"
-              : ""
-          }
+          errorMessage={errors.url?.message}
           {...register("url")}
           inputGroupContent={<LinkIcon />}
         />
@@ -87,6 +83,7 @@ export default function ResourceInput() {
           id="title"
           placeholder="Name your resource here."
           ariaLabel="resource name"
+          errorMessage={errors.title?.message}
           {...register("title")}
         />
       </div>
diff --git a/src/app/(main)/my-voyage/[teamId]/voyage-resources/components/ResourcesContainer.tsx b/src/app/(main)/my-voyage/[teamId]/voyage-resources/components/ResourcesContainer.tsx
index 78e3632d..b8a4cb1d 100644
--- a/src/app/(main)/my-voyage/[teamId]/voyage-resources/components/ResourcesContainer.tsx
+++ b/src/app/(main)/my-voyage/[teamId]/voyage-resources/components/ResourcesContainer.tsx
@@ -49,21 +49,23 @@ export default function ResourcesContainer({ data }: ResourceContainerProps) {
           isDisabled={!voyageResources?.length}
         />
       </div>
-      {formattedResources?.length ? (
-        formattedResources.map((item) => (
-          <ResourceCard
-            key={item.id}
-            resourceId={item.id}
-            title={item.title}
-            user={item.addedBy.member}
-            date={item.date}
-            userId={item.addedBy.member.id}
-            url={item.url}
-          />
-        ))
-      ) : (
-        <EmptyBanner />
-      )}
+      <div className="flex flex-col gap-y-6">
+        {formattedResources?.length ? (
+          formattedResources.map((item) => (
+            <ResourceCard
+              key={item.id}
+              resourceId={item.id}
+              title={item.title}
+              user={item.addedBy.member}
+              date={item.date}
+              userId={item.addedBy.member.id}
+              url={item.url}
+            />
+          ))
+        ) : (
+          <EmptyBanner />
+        )}
+      </div>
     </>
   );
 }