diff --git a/src/components/Ecosystem/Projects/ProjectCard.tsx b/src/components/Ecosystem/Projects/ProjectCard.tsx index 903c04a13..70030d2d8 100644 --- 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 ( -
+ const CardContent = ( +
  + + {item.project} + + + + {item.description} + + +
+ {categories.map((category, idx) => { + return + })} +
+
+ ) + + return ( +
{item.twitter && ( { )}
- - {item.project_website && ( - + {item.project_website ? ( + + {CardContent} + + ) : ( + CardContent )} - - - {item.project} - - - - {item.description} - - -
- {categories.map((category, idx) => { - return - })} -
) } diff --git a/src/components/Ecosystem/Projects/Projects.tsx b/src/components/Ecosystem/Projects/Projects.tsx index 2576246b1..93681c28f 100644 --- 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 => { {' '} {uniquePrimaryCategories.map((primaryCategory, idx, { length }) => { return ( - <> - - {idx !== length - 1 && <>, } - + + + {idx !== length - 1 && ', '} + ) })} diff --git a/src/components/Ecosystem/Projects/styles.module.css b/src/components/Ecosystem/Projects/styles.module.css index 200ad5a06..e72d31347 100644 --- 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 {