Wrap completed campaign's content with link, update hover effect

podkrepi-bg · Sep 18, 2023 · b73d705 · b73d705
1 parent b080963
commit b73d705
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 34 deletions.
diff --git a/...ents/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.styled.tsx b/...ents/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.styled.tsx
@@ -1,6 +1,6 @@
 import Slider from 'react-slick'
 
-import { Link, Grid, Box, Typography } from '@mui/material'
+import { Grid, Box, Typography } from '@mui/material'
 import DoneIcon from '@mui/icons-material/Done'
 import styled from '@emotion/styled'
 
@@ -37,18 +37,18 @@ export const CardWrapper = styled(Grid)(() => ({
     margin: theme.spacing(0, 1.25),
     paddingRight: theme.spacing(2.5),
   },
+
+  '&:hover': {
+    opacity: 0.9,
+  },
 }))
 
-export const CompletedCampaignLink = styled(Link)(() => ({
+export const CompletedCampaignImage = styled(Grid)(() => ({
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'space-between',
   height: theme.spacing(37.5),
   backgroundSize: 'cover',
-
-  '&:hover': {
-    opacity: 0.9,
-  },
 }))
 
 export const CampaignTitle = styled('h6')(() => ({

diff --git a/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx
@@ -1,4 +1,6 @@
 import { useTranslation, i18n } from 'next-i18next'
+import Image from 'next/image'
+import Link from 'next/link'
 import { CampaignResponse } from 'gql/campaigns'
 
 import 'slick-carousel/slick/slick-theme.css'
@@ -17,7 +19,7 @@ import {
   CarouselWrapper,
   Sum,
   CampaignTitle,
-  CompletedCampaignLink,
+  CompletedCampaignImage,
   CardWrapper,
   SuccessfulCampaignLabel,
   CompletedSumWrapper,
@@ -26,8 +28,6 @@ import {
   SuccessfullCampiagnText,
 } from './CompletedCampaignsSection.styled'
 
-import Image from 'next/image'
-
 export default function CompletedCampaignsSection() {
   const { t } = useTranslation('campaigns')
   const { data } = useCampaignList()
@@ -50,31 +50,32 @@ export default function CompletedCampaignsSection() {
       <CarouselWrapper {...settings}>
         {completedCampaigns?.map((campaign, index) => (
           <CardWrapper key={index} data-testid={`completed-campaign-${index}`}>
-            <CompletedCampaignLink
-              onMouseDown={onLinkMouseDown}
-              href={routes.campaigns.viewCampaignBySlug(campaign.slug)}
-              sx={{ position: 'relative', width: '100%', aspectRatio: 1 }}>
-              <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'
-                  ? moneyPublic(campaign.summary.reachedAmount).split(',')[0] + ' лв.'
-                  : moneyPublic(campaign.summary.reachedAmount).split('.')[0]}
-              </Sum>
-              <SuccessfulCampaignLabel>
-                <SuccessfullCampaignIcon />
-                <SuccessfullCampiagnText>{t('successfull-label')}</SuccessfullCampiagnText>
-              </SuccessfulCampaignLabel>
-            </CompletedSumWrapper>
-            <CampaignProgressWrapper width={1} />
-            <CampaignTitle>{campaign.title}</CampaignTitle>
+            <Link href={routes.campaigns.viewCampaignBySlug(campaign.slug)}>
+              <CompletedCampaignImage
+                onMouseDown={onLinkMouseDown}
+                sx={{ position: 'relative', width: '100%', aspectRatio: 1 }}>
+                <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' }}
+                />
+              </CompletedCampaignImage>
+              <CompletedSumWrapper>
+                <Sum>
+                  {i18n.language === 'bg'
+                    ? moneyPublic(campaign.summary.reachedAmount).split(',')[0] + ' лв.'
+                    : moneyPublic(campaign.summary.reachedAmount).split('.')[0]}
+                </Sum>
+                <SuccessfulCampaignLabel>
+                  <SuccessfullCampaignIcon />
+                  <SuccessfullCampiagnText>{t('successfull-label')}</SuccessfullCampiagnText>
+                </SuccessfulCampaignLabel>
+              </CompletedSumWrapper>
+              <CampaignProgressWrapper width={1} />
+              <CampaignTitle>{campaign.title}</CampaignTitle>
+            </Link>
           </CardWrapper>
         ))}
       </CarouselWrapper>