Merge pull request #28 from helxplatform/useCase-buttons

Use case buttons
helxplatform · Mar 6, 2024 · 8cb845f · 8cb845f
2 parents 39532f5 + 8cc2119
commit 8cb845f
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 18 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>
   );
-};
+};
diff --git a/src/content/features/useCases.js b/src/content/features/useCases.js
@@ -12,17 +12,22 @@ export const useCases = [
   {
     "image": SciDAS,
     "heading": "SciDAS",
-    "paragraph": "For Scientific Discovery at Scale (SciDAS), HeLx executes the Nextflow workflow engine as an app in Kubernetes to drive highly parallel, GPU-intensive workflows in Kubernetes. The system takes full advantage of the cloud by dynamically scaling costly GPU resources according to demand."
-
+    "paragraph": "For Scientific Discovery at Scale (SciDAS), HeLx executes the Nextflow workflow engine as an app in Kubernetes to drive highly parallel, GPU-intensive workflows in Kubernetes. The system takes full advantage of the cloud by dynamically scaling costly GPU resources according to demand.",
+    "linkText": "Learn about SciDAS here",
+    "linkURL": "https://renci.org/research/network-research-and-infrastructure/scientific-data-analysis-at-scale-scidas/"
   },
   {
     "image": RestartingResearch,
-    "heading": "restarting Research",
-    "paragraph": "restarting Research is a project for data management and analytics of COVID-19 RT-PCR and custom antibody tests of UNC researchers using on-campus laboratories and facilities. Researchers use Blackbalsam and Jupyter Data Science notebooks in Python and R kernels as environments for data science experimentation."
+    "heading": "Restarting Research",
+    "paragraph": "Restarting Research is a project for data management and analytics of COVID-19 RT-PCR and custom antibody tests of UNC researchers using on-campus laboratories and facilities. Researchers use Blackbalsam and Jupyter Data Science notebooks in Python and R kernels as environments for data science experimentation.",
+    "linkText": "Learn about the Restarting Research project here",
+    "linkURL": "https://tracs.unc.edu/index.php/news-articles/1704-covid-19-study-recruiting-unc-faculty-students-and-staff-involved-with-research-on-campus"
   },
   {
     "image": BRAINI,
     "heading": "BRAIN-I",
-    "paragraph": "BRAIN-I is a computational infrastructure for handling huge medical images combined with a discovery environment where neuroscience researchers can run custom applications and conduct their analysis. BRAIN-I handles big data and computation in a user-friendly way so even new researchers can focus fully on their science."    
+    "paragraph": "BRAIN-I is a computational infrastructure for handling huge medical images combined with a discovery environment where neuroscience researchers can run custom applications and conduct their analysis. BRAIN-I handles big data and computation in a user-friendly way so even new researchers can focus fully on their science.",
+    "linkText": "Learn more about the team using BRAIN-I",
+    "linkURL": "https://www.steinlab.org/"
   }
 ]