feat: improve image upload component

lib/atomic_web/components/image_uploader.ex

@@ -4,6 +4,8 @@ defmodule AtomicWeb.Components.ImageUploader do
   The component attributes are:
     @uploads - the uploads object
     @target - the target to send the event to
+    @width - the width of the uploader area
+    @height - the height of the uploader area
 
   The component events the parent component should define are:
     cancel-image - cancels the upload of an image. This event should be defined in the component that you passed in the @target attribute.
@@ -18,26 +20,20 @@ defmodule AtomicWeb.Components.ImageUploader do
         <div class={
             "#{if length(@uploads.image.entries) != 0 do
               "hidden"
-            end} border-2 border-gray-300 border-dashed rounded-md"
+            end} #{@class} border-2 border-gray-300 border-dashed rounded-md"
           } phx-drop-target={@uploads.image.ref}>
-          <div class="mx-auto sm:col-span-6 lg:w-full">
-            <div class="my-[140px] flex justify-center px-6">
-              <div class="space-y-1 text-center">
-                <svg class="size-12 mx-auto text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
-                  <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
-                </svg>
-                <div class="flex text-sm text-gray-600">
-                  <label for="file-upload" class="relative cursor-pointer rounded-md font-medium text-orange-500 hover:text-red-800">
-                    <a onclick={"document.getElementById('#{@uploads.image.ref}').click()"}>
-                      Upload a file
-                    </a>
-                  </label>
-                  <p class="pl-1">or drag and drop</p>
-                </div>
-                <p class="text-xs text-gray-500">
-                  PNG, JPG, GIF up to 10MB
-                </p>
+          <div class="flex h-full items-center justify-center px-6">
+            <div class="flex flex-col items-center justify-center space-y-1">
+              <svg class="size-12 mx-auto text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
+                <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+              </svg>
+              <div class="flex flex-col items-center text-sm text-gray-600">
+                <label for="file-upload" class="relative cursor-pointer rounded-md font-medium text-orange-500 hover:text-red-800">
+                  <a onclick={"document.getElementById('#{@uploads.image.ref}').click()"}>Upload a file</a>
+                </label>
+                <p class="pl-1">or drag and drop</p>
               </div>
+              <p class="text-xs text-gray-500">PNG, JPG, GIF up to 10MB</p>
             </div>
           </div>
         </div>