diff --git a/Client/src/Pages/Integrations/index.jsx b/Client/src/Pages/Integrations/index.jsx
index 376ef6657..dc8e668e0 100644
--- a/Client/src/Pages/Integrations/index.jsx
+++ b/Client/src/Pages/Integrations/index.jsx
@@ -2,19 +2,22 @@ import PropTypes from "prop-types";
import { Stack, Box, Typography, Grid } from "@mui/material";
import Button from "../../Components/Button";
import { useTheme } from "@emotion/react";
+import Discord from "../../assets/icons/discord-icon.svg?react";
+import Slack from "../../assets/icons/slack-icon.svg?react";
+import Zapier from "../../assets/icons/zapier-icon.svg?react";
import "./index.css";
/**
* Integrations component
* @param {Object} props - Props for the IntegrationsComponent.
- * @param {string} props.url - The URL for the integration image.
+ * @param {string} props.icon - The icon 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 IntegrationsComponent = ({ url, header, info, onClick }) => {
+const IntegrationsComponent = ({ icon, header, info, onClick }) => {
const theme = useTheme();
return (
@@ -24,14 +27,12 @@ const IntegrationsComponent = ({ url, header, info, onClick }) => {
justifyContent="space-between"
gap={theme.gap.large}
p={theme.gap.ml}
+ pl={theme.gap.large}
+ height="100%"
>
-
+
+ {icon}
+
{header}
{
level="primary"
onClick={onClick}
sx={{ alignSelf: "center" }}
+ disabled={true}
/>
@@ -56,7 +58,7 @@ const IntegrationsComponent = ({ url, header, info, onClick }) => {
// PropTypes for IntegrationsComponent
IntegrationsComponent.propTypes = {
- url: PropTypes.string.isRequired,
+ icon: PropTypes.object.isRequired,
header: PropTypes.string.isRequired,
info: PropTypes.string.isRequired,
onClick: PropTypes.func.isRequired,
@@ -72,19 +74,34 @@ const Integrations = () => {
const integrations = [
{
- url: "https://via.placeholder.com/80",
+ icon: (
+
+ ),
header: "Slack",
info: "Connect with Slack and see incidents in a channel",
onClick: () => {},
},
{
- url: "https://via.placeholder.com/80",
+ icon: (
+
+ ),
header: "Discord",
info: "Connect with Discord and view incidents directly in a channel",
onClick: () => {},
},
{
- url: "https://via.placeholder.com/80",
+ icon: (
+
+ ),
header: "Zapier",
info: "Send all incidents to Zapier, and then see them everywhere",
onClick: () => {},
@@ -102,7 +119,7 @@ const Integrations = () => {
{integrations.map((integration, index) => (
+
+
\ No newline at end of file
diff --git a/Client/src/assets/icons/slack-icon.svg b/Client/src/assets/icons/slack-icon.svg
new file mode 100644
index 000000000..ff256fd4d
--- /dev/null
+++ b/Client/src/assets/icons/slack-icon.svg
@@ -0,0 +1,10 @@
+
+
+
\ No newline at end of file
diff --git a/Client/src/assets/icons/zapier-icon.svg b/Client/src/assets/icons/zapier-icon.svg
new file mode 100644
index 000000000..6ee0b5eca
--- /dev/null
+++ b/Client/src/assets/icons/zapier-icon.svg
@@ -0,0 +1,8 @@
+
+
+
\ No newline at end of file