diff --git a/Client/src/Pages/Integrations/index.jsx b/Client/src/Pages/Integrations/index.jsx index 376ef6657..75da41a6b 100644 --- a/Client/src/Pages/Integrations/index.jsx +++ b/Client/src/Pages/Integrations/index.jsx @@ -1,20 +1,23 @@ import PropTypes from "prop-types"; -import { Stack, Box, Typography, Grid } from "@mui/material"; +import { Stack, 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,10 @@ 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 +56,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 +72,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 +117,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