Merge pull request #43 from hicsail/card-grid-links

Card grid links
hicsail · Dec 15, 2023 · 425d333 · 425d333
2 parents 785639f + 0747799
commit 425d333
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 10 deletions.
diff --git a/packages/client/src/components/CardGrid.jsx b/packages/client/src/components/CardGrid.jsx
@@ -1,4 +1,5 @@
-import { Box, Card, Typography } from '@mui/material';
+import { Box, Card, CardActionArea, CardContent, Typography } from '@mui/material';
+import { NavLink } from 'react-router-dom';
 import ReactMarkdown from 'react-markdown';
 
 export function CardGrid({ cards }) {
@@ -23,19 +24,27 @@ export function CardGrid({ cards }) {
     </Box>
   );
 }
-function CardGridCard({ Index, Icon, Title, Text }) {
-  const imgUrl = import.meta.env.VITE_STRAPI_URL + Icon.data.attributes.url;
-  const imgAlt = Icon.data.attributes.alternativeText;
+function CardGridCard({ Index, Icon, Title, Text, Link }) {
+  const imgUrl = Icon.data && import.meta.env.VITE_STRAPI_URL + Icon.data.attributes.url;
+  const imgAlt = Icon.data && Icon.data.attributes.alternativeText;
   return (
     <Card
       variant="outlined"
-      sx={{ border: 1, borderRadius: '0 20px 20px 20px', display: 'flex', flexDirection: 'column', padding: 2 }}
+      sx={{
+        display: 'flex', //so that action area stretches over whole card
+        border: 1,
+        borderRadius: '0 20px 20px 20px'
+      }}
     >
-      <img width="30 em" height="30 em" src={imgUrl} alt={imgAlt} />
-      <Typography variant="cardGridCardTitle">{Title}</Typography>
-      <Typography variant="cardGridCardText">
-        <ReactMarkdown>{Text}</ReactMarkdown>
-      </Typography>
+      <CardActionArea disabled={!Link} component={NavLink} to={Link}>
+        <CardContent sx={{ display: 'flex', flexDirection: 'column' }}>
+          {imgUrl && <img width="30 em" height="30 em" src={imgUrl} alt={imgAlt} />}
+          <Typography variant="cardGridCardTitle">{Title}</Typography>
+          <Typography variant="cardGridCardText">
+            <ReactMarkdown>{Text}</ReactMarkdown>
+          </Typography>
+        </CardContent>
+      </CardActionArea>
     </Card>
   );
 }
diff --git a/packages/client/src/gql.jsx b/packages/client/src/gql.jsx
@@ -35,6 +35,7 @@ export const GET_HOMEPAGE_CARDGRID = gql`
             }
             Title
             Text
+            Link
           }
         }
       }
@@ -134,6 +135,7 @@ export const GET_TREATMENTS_CARDGRID = gql`
             }
             Title
             Text
+            Link
           }
         }
       }
@@ -356,6 +358,7 @@ export const GET_GETINVOLVED_CARDGRID = gql`
             }
             Title
             Text
+            Link
           }
         }
       }
-Original file line number
+Diff line change
@@ Expand Up / @@ -35,6 +35,7 @@ export const GET_HOMEPAGE_CARDGRID = gql` @@
                 }
                 Title
                 Text
+                Link
               }
             }
           }
@@ Expand Down Expand Up / @@ -134,6 +135,7 @@ export const GET_TREATMENTS_CARDGRID = gql` @@
                 }
                 Title
                 Text
+                Link
               }
             }
           }
@@ Expand Down Expand Up / @@ -356,6 +358,7 @@ export const GET_GETINVOLVED_CARDGRID = gql` @@
                 }
                 Title
                 Text
+                Link
               }
             }
           }
@@ Expand Down @@