Merge pull request #115 from bluewave-labs/feat/integrations-dashboard

Implemented the integrations page. Resolves #98

Client/package-lock.json

@@ -2268,9 +2268,15 @@
       }
     },
     "node_modules/caniuse-lite": {
+<<<<<<< HEAD
+      "version": "1.0.30001628",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001628.tgz",
+      "integrity": "sha512-S3BnR4Kh26TBxbi5t5kpbcUlLJb9lhtDXISDPwOfI+JoC+ik0QksvkZtUVyikw3hjnkgkMPSJ8oIM9yMm9vflA==",
+=======
       "version": "1.0.30001629",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001629.tgz",
       "integrity": "sha512-c3dl911slnQhmxUIT4HhYzT7wnBK/XYpGnYLOj4nJBaRiw52Ibe7YxlDaAeRECvA786zCuExhxIUJ2K7nHMrBw==",
+>>>>>>> 3f41db916efdd46069589e91f5886a4a01d11896
       "dev": true,
       "funding": [
         {
@@ -2640,9 +2646,15 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.796",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.796.tgz",
-      "integrity": "sha512-NglN/xprcM+SHD2XCli4oC6bWe6kHoytcyLKCWXmRL854F0qhPhaYgUswUsglnPxYaNQIg2uMY4BvaomIf3kLA==",
+<<<<<<< HEAD
+      "version": "1.4.790",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.790.tgz",
+      "integrity": "sha512-eVGeQxpaBYbomDBa/Mehrs28MdvCXfJmEFzaMFsv8jH/MJDLIylJN81eTJ5kvx7B7p18OiPK0BkC06lydEy63A==",
+=======
+      "version": "1.4.792",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.792.tgz",
+      "integrity": "sha512-rkg5/N3L+Y844JyfgPUyuKK0Hk0efo3JNxUDKvz3HgP6EmN4rNGhr2D8boLsfTV/hGo7ZGAL8djw+jlg99zQyA==",
+>>>>>>> 3f41db916efdd46069589e91f5886a4a01d11896
       "dev": true
     },
     "node_modules/error-ex": {

Client/src/Components/Integrations/index.jsx

@@ -1,11 +1,17 @@
 import { Box, Typography, useTheme } from '@mui/material';
 import Button from '../Button';
+import PropTypes from 'prop-types';
 
 /**
  * Integrations component
- * @returns {JSX.Element}
+ * @param {Object} props - Props for the IntegrationsComponent.
+ * @param {string} props.url - The URL for the integration image.
+ * @param {string} props.header - The header for the integration.
+ * @param {string} props.info - Information about the integration.
+ * @param {Function} props.onClick - The onClick handler for the integration button.
+ * @returns {JSX.Element} The JSX representation of the IntegrationsComponent.
  */
-const Integrations = () => {
+const IntegrationsComponent = ({ url, header, info, onClick }) => {
   const theme = useTheme();
 
   return (
@@ -19,8 +25,8 @@ const Integrations = () => {
     >
       <Box
         component="img"
-        src="https://via.placeholder.com/100"
-        alt="Placeholder"
+        src={url}
+        alt="Integration"
         width={100}
         height={100}
       />
@@ -32,8 +38,8 @@ const Integrations = () => {
         flexDirection="column"
         alignItems="flex-start"
       >
-        <Typography variant="h6" component="div">
-          Header
+        <Typography variant="h6" component="div" style={{ fontSize: '16px' }}>
+          {header}
         </Typography>
         <Typography
           variant="body1"
@@ -43,14 +49,23 @@ const Integrations = () => {
             wordWrap: 'break-word',
             textAlign: 'left'
           }}
+          style={{ fontSize: '13px' }}
         >
-          This is a paragraph that provides more detail about the header.
+          {info}
         </Typography>
       </Box>
       
-      <Button label="Click Me" level="primary" />
+      <Button label="Click Me" level="primary" onClick={onClick} />
     </Box>
   );
 };
 
-export default Integrations;
+// PropTypes for IntegrationsComponent
+IntegrationsComponent.propTypes = {
+  url: PropTypes.string.isRequired,
+  header: PropTypes.string.isRequired,
+  info: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired
+};
+
+export default IntegrationsComponent;

Client/src/Pages/Integrations/index.jsx

@@ -1,9 +1,70 @@
-import React from 'react'
+import { Box, Typography, useTheme } from '@mui/material';
+import IntegrationsComponent from '../../Components/Integrations';
 
+
+/**
+ * Integrations Page Component
+ * @returns {JSX.Element} The JSX representation of the Integrations page.
+ */
 const Integrations = () => {
-    return (
-        <div>Integrations</div>
-    )
-}
+  const theme = useTheme();
 
-export default Integrations
+
+  const integrations = [
+    { 
+      url: 'https://via.placeholder.com/100',
+      header: 'Integration 1',
+      info: 'Info about Integration 1',
+      onClick: () => {} 
+    },
+    { 
+      url: 'https://via.placeholder.com/100',
+      header: 'Integration 2',
+      info: 'Info about Integration 2',
+      onClick: () => {} 
+    }, 
+    { 
+      url: 'https://via.placeholder.com/100',
+      header: 'Integration 2',
+      info: 'Info about Integration 2',
+      onClick: () => {} 
+    }
+    // Add more integrations as needed
+  ];
+
+  return (
+    <Box 
+      display="flex"
+      flexDirection="column"
+      alignItems="flex-start"
+      justifyContent="flex-start"
+      height="100vh"
+      p={theme.spacing(4)}
+      mt={theme.spacing(8)} 
+    >
+      <Typography variant="h4" component="h1" gutterBottom style={{ fontSize: '16px' }}>
+        Integrations
+      </Typography>
+      <Typography variant="h6" component="h2" gutterBottom style={{ fontSize: '13px' }}>
+        Connect Uptime Genie to your favorite service
+      </Typography>
+      <Box 
+        display="flex" 
+        flexWrap="wrap" 
+        gap={theme.spacing(4)}
+      >
+        {integrations.map((integration, index) => (
+          <IntegrationsComponent 
+            key={index}
+            url={integration.url}
+            header={integration.header}
+            info={integration.info}
+            onClick={integration.onClick}
+          />
+        ))}
+      </Box>
+    </Box>
+  );
+};
+
+export default Integrations;