Chore: Update sponsors width and sort

OCA-UFCG · Sep 18, 2024 · 220a630 · 220a630
1 parent c55e529
commit 220a630
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 29 deletions.
diff --git a/src/components/Sponsor/Section/Sponsors.styles.ts b/src/components/Sponsor/Section/Sponsors.styles.ts
@@ -16,17 +16,7 @@ export const SponsorsContainer = styled.div`
   max-width: 1440px;
 
   @media screen and (max-width: 800px) {
-    position: relative;
-    justify-content: flex-start;
-    align-items: center;
-    max-width: calc(100vw);
-    padding: 0 1rem 0.5rem 1rem;
-    box-sizing: border-box;
-    height: fit-content;
-    flex-wrap: nowrap;
-    overflow: scroll;
-    -ms-overflow-style: none; /* IE and Edge */
-    overflow-y: hidden;
+    width: fit-content;
   }
 `;
 

diff --git a/src/components/Sponsor/Section/Sponsors.tsx b/src/components/Sponsor/Section/Sponsors.tsx
@@ -29,18 +29,20 @@ const SponsorsSection = ({
   return (
     <Wrapper id="sponsors">
       <SectionHeader id="sponsors" sectionHead={sectionHead} />
-      {Object.keys(tierSponsors).map((tier) => (
-        <TierContainer key={tier}>
-          {tier && tier !== "undefined" && <SubTitle>{tier}</SubTitle>}
-          <SponsorsContainer>
-            {tierSponsors[tier]
-              .sort((a, b) => a.name.localeCompare(b.name))
-              .map((sponsor, index) => (
-                <Sponsor key={index} data={sponsor} />
-              ))}
-          </SponsorsContainer>
-        </TierContainer>
-      ))}
+      {Object.keys(tierSponsors)
+        .sort((a, b) => b.localeCompare(a))
+        .map((tier) => (
+          <TierContainer key={tier}>
+            {tier && tier !== "undefined" && <SubTitle>{tier}</SubTitle>}
+            <SponsorsContainer>
+              {tierSponsors[tier]
+                .sort((a, b) => a.name.localeCompare(b.name))
+                .map((sponsor, index) => (
+                  <Sponsor key={index} data={sponsor} />
+                ))}
+            </SponsorsContainer>
+          </TierContainer>
+        ))}
     </Wrapper>
   );
 };

diff --git a/src/components/Sponsor/Sponsor.styles.ts b/src/components/Sponsor/Sponsor.styles.ts
@@ -10,6 +10,8 @@ export const Wrapper = styled.a`
   text-decoration: none;
   gap: 1rem;
   transition: 0.3s;
+  padding: 0.2rem;
+  box-shadow: 0 0 3px #cdcdcd;
 
   &:hover {
     transform: scale(0.95);
@@ -21,6 +23,14 @@ export const LogoImage = styled(Image)`
   border-radius: 4px;
   height: 100%;
   max-height: 8rem;
-  aspect-ratio: 1 / 1;
-  box-shadow: 0 0 3px #cdcdcd;
+  min-width: 4rem;
+  max-width: 100%;
+  width: fit-content;
+  object-fit: cover;
+
+  @media screen and (max-width: 800px) {
+    width: fit-content;
+    max-height: 6rem;
+    min-width: 3rem;
+  }
 `;
diff --git a/src/components/Sponsor/Sponsor.tsx b/src/components/Sponsor/Sponsor.tsx
@@ -4,14 +4,22 @@ import { Wrapper, LogoImage } from "./Sponsor.styles";
 const Sponsor = ({ data }: { data: ISponsor }) => {
   const { name, logo, link } = data;
 
+  console.log(logo);
+
   return (
     <Wrapper href={link} target="_blank">
       <LogoImage
         src={`https:${typeof logo === "object" ? logo?.fields?.file?.url : logo}`}
         alt={name}
         title={name}
-        width={125}
-        height={125}
+        width={
+          typeof logo === "object"
+            ? logo?.fields?.file?.details?.image?.width
+            : 125
+        }
+        height={
+          typeof logo === "object" ? logo.fields.file.details.image.width : 125
+        }
       />
     </Wrapper>
   );

diff --git a/src/utils/interfaces.ts b/src/utils/interfaces.ts
@@ -1,14 +1,32 @@
 export interface ISponsor {
   name: string;
-  logo: { fields: { file: { url: string } } } | string;
+  logo:
+    | {
+        fields: {
+          file: {
+            url: string;
+            details: { image: { width: number; height: number } };
+          };
+        };
+      }
+    | string;
   link: string;
   tier: string;
 }
 
 export interface ITeamMember {
   name: string;
   role: string;
-  avatar: { fields: { file: { url: string } } } | string;
+  avatar:
+    | {
+        fields: {
+          file: {
+            url: string;
+            details: { image: { width: number; height: number } };
+          };
+        };
+      }
+    | string;
   github?: string;
   linkedin?: string;
   lattes?: string;