fix: unique key prop warning in ecosystem project cards (#261)

* fix: move key attribute to the mapped result * fix: project card categories overflow * fix: Move social links out of the inner card and wrap card content with an a * fix: Remove redundant key --------- Co-authored-by: Usame Algan <[email protected]>
safe-global · Jan 3, 2024 · 771a345 · 771a345
1 parent a94bfaa
commit 771a345
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 38 deletions.
diff --git a/src/components/Ecosystem/Projects/ProjectCard.tsx b/src/components/Ecosystem/Projects/ProjectCard.tsx
@@ -6,17 +6,35 @@ import GithubIcon from '@/public/images/github-icon.svg'
 import css from './styles.module.css'
 import { ECOSYSTEM_DATA_URL } from '@/config/constants'
 import { type EcosystemProjectWithCategories } from '@/hooks/useEcosystemData'
-import Link from 'next/link'
+import clsx from 'clsx'
 
 export const ProjectCard = (item: EcosystemProjectWithCategories) => {
   const categories = item.categories_list
 
-  return (
-    <div className={css.card}>
+  const CardContent = (
+    <div className={clsx(css.card, { [css.outline]: item.project_website })}>
       <Avatar className={css.image} src={ECOSYSTEM_DATA_URL + item.logo}>
         &nbsp;
       </Avatar>
 
+      <Typography fontWeight="500" mb={0.5}>
+        {item.project}
+      </Typography>
+
+      <Typography variant="body2" className={css.description}>
+        {item.description}
+      </Typography>
+
+      <div className={css.categories}>
+        {categories.map((category, idx) => {
+          return <Chip key={category + idx} className={css.chip} label={category} />
+        })}
+      </div>
+    </div>
+  )
+
+  return (
+    <div className={css.cardWrapper}>
       <div className={css.socials}>
         {item.twitter && (
           <IconButton
@@ -44,24 +62,13 @@ export const ProjectCard = (item: EcosystemProjectWithCategories) => {
           </IconButton>
         )}
       </div>
-
-      {item.project_website && (
-        <Link className={css.cardLink} href={item.project_website} target="_blank" rel="noreferrer" />
+      {item.project_website ? (
+        <a href={item.project_website} target="_blank" rel="noreferrer">
+          {CardContent}
+        </a>
+      ) : (
+        CardContent
       )}
-
-      <Typography fontWeight="500" mb={0.5}>
-        {item.project}
-      </Typography>
-
-      <Typography variant="body2" className={css.description}>
-        {item.description}
-      </Typography>
-
-      <div className={css.categories}>
-        {categories.map((category, idx) => {
-          return <Chip key={category + idx} className={css.chip} label={category} />
-        })}
-      </div>
     </div>
   )
 }
diff --git a/src/components/Ecosystem/Projects/Projects.tsx b/src/components/Ecosystem/Projects/Projects.tsx
@@ -16,7 +16,7 @@ import {
   CircularProgress,
 } from '@mui/material'
 import clsx from 'clsx'
-import { useMemo, useState } from 'react'
+import { Fragment, useMemo, useState } from 'react'
 import { useRouter } from 'next/router'
 import NextLink from 'next/link'
 import type { NextRouter } from 'next/router'
@@ -267,14 +267,10 @@ export const Projects = ({ items }: BaseBlock): ReactElement => {
               </Typography>{' '}
               {uniquePrimaryCategories.map((primaryCategory, idx, { length }) => {
                 return (
-                  <>
-                    <SpecificCategoryFilter
-                      key={primaryCategory + idx}
-                      category={primaryCategory}
-                      onClick={toggleSpecificCategory}
-                    />
-                    {idx !== length - 1 && <>, </>}
-                  </>
+                  <Fragment key={primaryCategory + idx}>
+                    <SpecificCategoryFilter category={primaryCategory} onClick={toggleSpecificCategory} />
+                    {idx !== length - 1 && ', '}
+                  </Fragment>
                 )
               })}
             </Typography>

diff --git a/src/components/Ecosystem/Projects/styles.module.css b/src/components/Ecosystem/Projects/styles.module.css
@@ -2,6 +2,10 @@
   margin-top: 0 !important;
 }
 
+.cardWrapper {
+  position: relative;
+}
+
 .searchField :global .MuiInputBase-root {
   background: white;
 }
@@ -20,18 +24,10 @@
   height: 300px;
 }
 
-.card:hover {
+.outline:hover {
   box-shadow: inset 0 0 0 1px var(--mui-palette-primary-main);
 }
 
-.cardLink {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-}
-
 .image {
   width: 48px;
   height: 48px;
@@ -56,12 +52,19 @@
   gap: 8px;
   flex-wrap: wrap;
   margin-top: 16px;
+  overflow-y: auto;
+  scrollbar-width: none; /* Firefox */
+}
+
+.categories::-webkit-scrollbar {
+  display: none;
 }
 
 .chip {
   border-radius: 4px;
   height: 23px;
   font-size: 14px;
+  cursor: pointer;
 }
 
 .reset {
@@ -128,6 +131,7 @@
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
+  flex-shrink: 0;
 }
 
 .filterButton {