feat: media component

Author: nevo-david

apps/frontend/src/components/media/media.component.tsx

@@ -45,7 +45,7 @@ export const Pagination: FC<{
   }, [totalPages]);
 
   return (
-    <ul className="flex flex-row items-center gap-1">
+    <ul className="flex flex-row items-center gap-1 justify-center mt-[15px]">
       <li className={clsx(current === 0 && 'opacity-20 pointer-events-none')}>
         <div
           className="cursor-pointer inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 h-10 px-4 py-2 gap-1 pl-2.5 text-gray-400 hover:text-white border-[#1F1F1F] hover:bg-forth"
@@ -421,14 +421,10 @@ export const MediaBox: FC<{
                     )}
                   </div>
                 ))}
-              {(pages || 0) > 1 && (
-                <Pagination
-                  current={page}
-                  totalPages={pages}
-                  setPage={setPage}
-                />
-              )}
             </div>
+            {(pages || 0) > 1 && (
+              <Pagination current={page} totalPages={pages} setPage={setPage} />
+            )}
           </div>
         </DropFiles>
       </div>