CompletedCampaignsSection: Use next/image component for card image

podkrepi-bg · Sep 5, 2023 · 56672bc · 56672bc
1 parent f61ed20
commit 56672bc
Showing 1 changed file with 11 additions and 4 deletions.
diff --git a/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx
@@ -26,6 +26,8 @@ import {
   SuccessfullCampiagnText,
 } from './CompletedCampaignsSection.styled'
 
+import Image from 'next/image'
+
 export default function CompletedCampaignsSection() {
   const { t } = useTranslation('campaigns')
   const { data } = useCampaignList()
@@ -51,10 +53,15 @@ export default function CompletedCampaignsSection() {
             <CompletedCampaignLink
               onMouseDown={onLinkMouseDown}
               href={routes.campaigns.viewCampaignBySlug(campaign.slug)}
-              sx={{
-                background: `url(${campaignListPictureUrl(campaign)})`,
-              }}
-            />
+              sx={{position: 'relative', aspectRatio:1, height: (theme) => theme.spacing(37.5)}}
+            >
+              <Image 
+              fill 
+              alt={campaign.title} 
+              src={campaignListPictureUrl(campaign)}
+              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)" 
+              style={{objectFit: 'cover'}}  />
+              </CompletedCampaignLink>
             <CompletedSumWrapper>
               <Sum>
                 {i18n.language === 'bg'