add useCase button link component

helxplatform · Mar 6, 2024 · 8cc2119 · 8cc2119
1 parent 0fa7d97
commit 8cc2119
Showing 1 changed file with 14 additions and 13 deletions.
diff --git a/src/components/sections/useCases.js b/src/components/sections/useCases.js
@@ -1,7 +1,7 @@
 import React from "react";
-import { Typography, Box, Grid, useTheme } from "@mui/material";
+import { Typography, Box, Button, Grid, useTheme } from "@mui/material";
 import { MaxWidthWrapper } from "../layout/maxWidthWrapper"
-
+import { Link } from '../link'
 
 export const UseCasesSection = ({ content }) => {
   const theme = useTheme();
@@ -10,7 +10,6 @@ export const UseCasesSection = ({ content }) => {
     <MaxWidthWrapper backgroundColor={theme.palette.branding.offWhite}>
       <Box>
         <Typography variant="h2">
-
           How is HeLx being used?
         </Typography>
         <Grid container spacing={{ md: 8, sm: 6, xs: 4 }}>
@@ -38,20 +37,22 @@ export const UseCasesSection = ({ content }) => {
                   </Box>
                 )}
                 <Typography>{useCase.paragraph}</Typography>
-                {/* <Button
-                  mt="1rem"
-                  variant="contained"
-                  color="secondary"
-                  size="medium"
-                  sx={{ marginTop: 'auto', color: "white", textTransform: "revert" }}
-                >
-                  Learn more
-                </Button> */}
+                { useCase.linkText && (
+                  <Box sx={{display: 'flex', justifyContent:'center', width: '100%'}}>
+                  <Link to={useCase.linkURL}>
+                  <Button mt="1rem" variant="contained" color="primary" size="medium"
+                    sx={{textTransform: "revert" }}
+                  >
+                    {useCase.linkText}
+                  </Button>
+                  </Link>
+                </Box>
+                )}
               </Box>
             </Grid>
           ))}
         </Grid>
       </Box>
     </MaxWidthWrapper>
   );
-};
+};