feat: done supporters page

Author: fagundesjg

src/pages/Supporters/Supporters.tsx

@@ -1,29 +1,37 @@
 import { BurgerMenu, Header, LoadingScreen } from '@/components';
+import WithTooltip from '@/components/ui/with-tooltip';
 import { useSupporters } from '@/hooks';
+import { Link } from 'react-router-dom';
 
 const Supporters = () => {
   const { data: supporters, loading } = useSupporters();
 
   if (loading) return <LoadingScreen />;
 
   return (
-    <div className="flex flex-col h-screen items-center">
+    <div className="flex flex-col h-screen items-center bg-gray-50 overflow-auto">
       <Header title="SOS Rio Grande do Sul" startAdornment={<BurgerMenu />} />
-      <div className="flex flex-col gap-4 p-4 max-w-4xl pb-8 w-full">
-        <h3 className="text-4xl font-semibold">Apoiadores do projeto</h3>
-        <div className="flex flex-wrap">
-          {supporters.map((supporter, idx) => (
-            <div
-              key={idx}
-              className="flex flex-col justify-between p-4 w-full max-w-[30%] max-h-64 aspect-square border-2 border-border rounded-md hover:bg-zinc-200"
-            >
-              <h3 className="font-medium">{supporter.name}</h3>
-              <div
-                style={{ backgroundImage: `url('${supporter.imageUrl}')` }}
-                className="bg-center h-full w-full bg-contain bg-no-repeat"
-              />
-            </div>
-          ))}
+      <div className="flex flex-col gap-4 p-4 max-w-5xl pb-8 w-full">
+        <h2 className="text-4xl pt-4 font-semibold !text-zinc-900">
+          Apoiadores do projeto
+        </h2>
+        <div className="grid grid-cols-2 md:grid-cols-4 w-full gap-4 md:gap-8 mt-8">
+          {supporters
+            .sort((a, b) => a.createdAt.localeCompare(b.createdAt))
+            .map((supporter, idx) => (
+              <Link key={idx} to={supporter.link}>
+                <WithTooltip content={supporter.name}>
+                  <div className="bg-white flex flex-col gap-2 w-full aspect-square p-4 justify-between shadow-sm rounded-md hover:border-text hover:cursor-pointer">
+                    <div
+                      style={{
+                        backgroundImage: `url('${supporter.imageUrl}')`,
+                      }}
+                      className="flex-1 bg-center w-full bg-contain bg-no-repeat"
+                    />
+                  </div>
+                </WithTooltip>
+              </Link>
+            ))}
         </div>
       </div>
     </div>