wip

src/components/BurgerMenu/BurgerMenu.tsx

@@ -3,6 +3,7 @@ import {
   CircleHelp,
   CirclePlus,
   DoorOpen,
+  HeartHandshake,
   Info,
   LinkIcon,
   Menu,
@@ -65,6 +66,11 @@ const BurgerMenu = () => {
             link="/politica-de-privacidade"
             icon={<Info className="w-4 h-4" />}
           />
+          <BurguerMenuItem
+            label="Apoiadores"
+            link="/apoiadores"
+            icon={<HeartHandshake className="w-4 h-4" />}
+          />
           <Separator />
           {partners.length > 0 && (
             <Fragment>

src/hooks/index.ts

@@ -11,6 +11,7 @@ import { useViaCep } from './useViaCep';
 import { usePartners } from './usePartners';
 import { useGithubContributors } from './useGithubContributors';
 import { useAuthRoles } from './useAuthRoles';
+import { useSupporters } from './useSupporters';
 
 export {
   useShelters,
@@ -26,4 +27,5 @@ export {
   usePartners,
   useGithubContributors,
   useAuthRoles,
+  useSupporters,
 };

src/hooks/useSupporters/index.ts

@@ -0,0 +1,3 @@
+import { useSupporters } from './useSupporters';
+
+export { useSupporters };

src/hooks/useSupporters/types.ts

@@ -0,0 +1,8 @@
+export interface ISupporter {
+  id: string;
+  name: string;
+  imageUrl: string;
+  link: string;
+  createdAt: string;
+  updatedAt?: string | null;
+}

src/hooks/useSupporters/useSupporters.tsx

@@ -0,0 +1,11 @@
+import { useFetch } from '../useFetch';
+import { ISupporter } from './types';
+
+const useSupporters = () => {
+  return useFetch<ISupporter[]>('/supporters', {
+    initialValue: [],
+    cache: true,
+  });
+};
+
+export { useSupporters };

src/pages/Supporters/Supporters.tsx

@@ -0,0 +1,33 @@
+import { BurgerMenu, Header, LoadingScreen } from '@/components';
+import { useSupporters } from '@/hooks';
+
+const Supporters = () => {
+  const { data: supporters, loading } = useSupporters();
+
+  if (loading) return <LoadingScreen />;
+
+  return (
+    <div className="flex flex-col h-screen items-center">
+      <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>
+      </div>
+    </div>
+  );
+};
+
+export { Supporters };

src/pages/Supporters/index.ts

@@ -0,0 +1,3 @@
+import { Supporters } from './Supporters';
+
+export { Supporters };

src/pages/index.ts

@@ -1,5 +1,4 @@
 import { SignIn } from './SignIn';
-
 import { Home } from './Home';
 import { Shelter } from './Shelter';
 import { EditShelterSupply } from './EditShelterSupply';
@@ -8,6 +7,7 @@ import { CreateShelter } from './CreateShelter';
 import { UpdateShelter } from './UpdateShelter';
 import { PrivacyPolicy } from './PrivacyPolicy';
 import { AboutUs } from './AboutUs';
+import { Supporters } from './Supporters';
 
 export {
   SignIn,
@@ -19,4 +19,5 @@ export {
   UpdateShelter,
   PrivacyPolicy,
   AboutUs,
+  Supporters,
 };

src/routes/Routes.tsx

@@ -10,6 +10,7 @@ import {
   UpdateShelter,
   PrivacyPolicy,
   AboutUs,
+  Supporters,
 } from '@/pages';
 
 const Routes = () => {
@@ -27,6 +28,7 @@ const Routes = () => {
       <Route path="/entrar" element={<SignIn />} />
       <Route path="/politica-de-privacidade" element={<PrivacyPolicy />} />
       <Route path="/sobre-nos" element={<AboutUs />} />
+      <Route path="/apoiadores" element={<Supporters />} />
       <Route path="*" element={<Navigate to="/" />} />
     </Switch>
   );