ActiveCampaignCard: Use next/image to display card image

podkrepi-bg · Sep 4, 2023 · a1e73d6 · a1e73d6
1 parent 55eecae
commit a1e73d6
Showing 1 changed file with 19 additions and 18 deletions.
diff --git a/...ts/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx b/...ts/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx
@@ -1,14 +1,15 @@
 import { useTranslation, i18n } from 'next-i18next'
 import { CampaignResponse } from 'gql/campaigns'
 
-import { CardMedia } from '@mui/material'
+import { Box, CardMedia } from '@mui/material'
 
 import Link from 'components/common/Link'
 import CampaignProgress from 'components/client/campaigns/CampaignProgress'
 import theme from 'common/theme'
 import { routes } from 'common/routes'
 import { campaignListPictureUrl } from 'common/util/campaignImageUrls'
 import { moneyPublic } from 'common/util/money'
+import Image from 'next/image'
 
 import {
   CampaignTitle,
@@ -34,26 +35,26 @@ export default function ActiveCampaignCard({ campaign, index }: Props) {
 
   return (
     <Root data-testid={`completed-campaign-${index}`}>
-      <Link href={routes.campaigns.viewCampaignBySlug(slug)} sx={{ position: 'relative' }}>
-        <CardMedia
-          component="img"
-          height="100%"
-          image={campaignImagesUrl}
-          alt={title}
+      <Link href={routes.campaigns.viewCampaignBySlug(slug)}>
+        <Box
+          position={'relative'}
           sx={{
-            maxHeight: theme.spacing(42.5),
-
+            aspectRatio: 4 / 3,
             [theme.breakpoints.up('lg')]: {
-              aspectRatio: '2',
-              height: theme.spacing(22.3),
-              maxHeight: 'inherit',
-            },
-
-            [theme.breakpoints.up(1430)]: {
-              height: theme.spacing(27.9),
+              aspectRatio: 0,
+              height: index === 0 ? theme.spacing(71.6) : theme.spacing(27.85),
             },
-          }}
-        />
+          }}>
+          <Image
+            priority
+            src={campaignImagesUrl}
+            alt={title}
+            fill
+            sizes="(min-width: 2000px) 312px, (min-width: 1200px) calc(30vw - 38px), (min-width: 900px) calc(40.57vw - 29px), (min-width: 600px) calc(50vw - 28px), calc(100vw - 32px)"
+            quality={index === 0 ? 100 : 75}
+            style={{ objectFit: 'cover' }}
+          />
+        </Box>
         <StyledContent>
           <SumWrapper>
             <Sum>