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