CLASSROOMIO-T-210: Add Photographer Link

Merge branch 'main' of https://gitlab.com/thenextgreat/classroomio into CLASSROOMIO-T-210

CLASSROOMIO-T-210: Resolved Feedbacks

CLASSROOMIO-T-210: Add Photographer Link


Co-authored-by: Rotimi Best <[email protected]>
Co-authored-by: Tunji Adeyemi <[email protected]>


Merge-request: CLASSROOMIO-MR-101
Merged-by: Best Admin <[email protected]>

src/lib/components/UploadWidget/index.svelte

@@ -20,6 +20,10 @@
   let searchQuery = '';
   let unsplashImages: {
     id: string | number;
+    user: {
+      name: string;
+      username: string;
+    };
     urls: {
       regular: string;
     };
@@ -94,7 +98,7 @@
       <slot:fragment slot="content">
         <TabContent value={tabs[1].value} index={currentTab}>
           <!-- Your Upload content here -->
-          <div class="w-full mt-2">
+          <div class="w-full">
             <input
               type="file"
               style="display: none;"
@@ -113,14 +117,14 @@
         </TabContent>
         <TabContent value={tabs[0].value} index={currentTab}>
           <!-- Your Images content here -->
-          <div class="h-full py-5 overflow-y-scroll">
+          <div class="h-full overflow-y-scroll">
-            <form on:submit|preventDefault={handleSubmit} class="flex gap-2">
+            <form on:submit|preventDefault={handleSubmit} class="flex gap-2 pb-3 mt-1">
               <input
                 type="text"
                 bind:value={searchQuery}
                 name=""
                 id=""
-                class="rounded-lg w-[87%] ml-2 dark:text-black"
+                class="rounded-lg w-[85%] ml-2 dark:text-black"
               />
               <button
                 type="submit"
@@ -129,16 +133,29 @@
               >
             </form>
             {#if unsplashImages && unsplashImages.length > 0}
-              <div class="flex flex-row items-center flex-wrap gap-2 py-4 px-[10px] max-h-[300px]">
+              <div
+                class="flex flex-row items-center flex-wrap gap-2 px-[10px] max-h-[300px] hide-scrollbar"
+              >
                 {#each unsplashImages as unsplashImages (unsplashImages.id)}
-                  <div class="w-[190px] h-[130px] overflow-hidden relative">
+                  <div>
-                    <button on:click={() => handleImageClick(unsplashImages.urls.regular)}>
+                    <div class="w-[195px] h-[130px] overflow-hidden relative">
-                      <img
+                      <button on:click={() => handleImageClick(unsplashImages.urls.regular)}>
-                        src={unsplashImages.urls.regular}
+                        <img
-                        alt={unsplashImages.alt_description}
+                          src={unsplashImages.urls.regular}
-                        class="w-full h-full object-cover rounded-md hover:opacity-80 cursor-pointer"
+                          alt={unsplashImages.alt_description}
-                      />
+                          class="w-full h-full object-cover rounded-md hover:opacity-80 cursor-pointer"
-                    </button>
+                        />
+                      </button>
+                    </div>
+                    {#if unsplashImages.user.name}
+                      <p class="text-center text-xs mt-1 text-gray-500 font-light">
+                        By <a
+                          href={`https://unsplash.com/@${unsplashImages.user.username}`}
+                          target="_blank"
+                          class="hover:text-red-700">{unsplashImages.user.name}</a
+                        >
+                      </p>
+                    {/if}
                   </div>
                 {/each}
               </div>
@@ -151,3 +168,16 @@
     </Tabs>
   </div>
 </Modal>
+
+<style>
+  .hide-scrollbar {
+    width: 100%;
+    overflow: auto;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+  .hide-scrollbar::-webkit-scrollbar {
+    width: 0;
+    background: transparent;
+  }
+</style>