157 lines
3.7 KiB
React
157 lines
3.7 KiB
React
import PropTypes from "prop-types";
|
|
import { Stack, Typography, Grid, Button } from "@mui/material";
|
|
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 { useTranslation } from "react-i18next";
|
|
|
|
import "./index.css";
|
|
|
|
/**
|
|
* Integrations component
|
|
* @param {Object} props - Props for the IntegrationsComponent.
|
|
* @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 = ({ icon, header, info, onClick }) => {
|
|
const theme = useTheme();
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<Grid
|
|
item
|
|
lg={6}
|
|
flexGrow={1}
|
|
>
|
|
<Stack
|
|
direction="row"
|
|
justifyContent="space-between"
|
|
gap={theme.spacing(12)}
|
|
p={theme.spacing(8)}
|
|
pl={theme.spacing(12)}
|
|
height="100%"
|
|
border={1}
|
|
borderColor={theme.palette.primary.lowContrast}
|
|
borderRadius={theme.shape.borderRadius}
|
|
backgroundColor={theme.palette.primary.main}
|
|
>
|
|
{icon}
|
|
<Stack
|
|
gap={theme.spacing(2)}
|
|
flex={1}
|
|
>
|
|
<Typography component="h1">{header}</Typography>
|
|
<Typography
|
|
sx={{
|
|
maxWidth: "300px",
|
|
wordWrap: "break-word",
|
|
}}
|
|
>
|
|
{info}
|
|
</Typography>
|
|
</Stack>
|
|
<Button
|
|
variant="contained"
|
|
color="accent"
|
|
onClick={onClick}
|
|
sx={{ alignSelf: "center" }}
|
|
disabled={true}
|
|
>
|
|
{t("add")}
|
|
</Button>
|
|
</Stack>
|
|
</Grid>
|
|
);
|
|
};
|
|
|
|
// PropTypes for IntegrationsComponent
|
|
IntegrationsComponent.propTypes = {
|
|
icon: PropTypes.object.isRequired,
|
|
header: PropTypes.string.isRequired,
|
|
info: PropTypes.string.isRequired,
|
|
onClick: PropTypes.func.isRequired,
|
|
};
|
|
|
|
/**
|
|
* Integrations Page Component
|
|
* @returns {JSX.Element} The JSX representation of the Integrations page.
|
|
*/
|
|
|
|
const Integrations = () => {
|
|
const theme = useTheme();
|
|
const { t } = useTranslation();
|
|
|
|
const integrations = [
|
|
{
|
|
icon: (
|
|
<Slack
|
|
alt="slack integration"
|
|
style={{ width: "45px", height: "45px", alignSelf: "center" }}
|
|
/>
|
|
),
|
|
header: t("integrationsSlack"),
|
|
info: t("integrationsSlackInfo"),
|
|
onClick: () => {},
|
|
},
|
|
{
|
|
icon: (
|
|
<Discord
|
|
alt="discord integration"
|
|
style={{ width: "42px", height: "42px", alignSelf: "center" }}
|
|
/>
|
|
),
|
|
header: t("integrationsDiscord"),
|
|
info: t("integrationsDiscordInfo"),
|
|
onClick: () => {},
|
|
},
|
|
{
|
|
icon: (
|
|
<Zapier
|
|
alt="zapier integration"
|
|
style={{ width: "42px", height: "42px", alignSelf: "center" }}
|
|
/>
|
|
),
|
|
header: t("integrationsZapier"),
|
|
info: t("integrationsZapierInfo"),
|
|
onClick: () => {},
|
|
},
|
|
// Add more integrations as needed
|
|
];
|
|
|
|
return (
|
|
<Stack
|
|
className="integrations"
|
|
pt={theme.spacing(20)}
|
|
gap={theme.spacing(2)}
|
|
sx={{
|
|
"& h1, & p": {
|
|
color: theme.palette.primary.contrastTextSecondary,
|
|
},
|
|
}}
|
|
>
|
|
<Typography component="h1">{t("integrations")}</Typography>
|
|
<Typography mb={theme.spacing(12)}>{t("integrationsPrism")}</Typography>
|
|
<Grid
|
|
container
|
|
spacing={theme.spacing(12)}
|
|
>
|
|
{integrations.map((integration, index) => (
|
|
<IntegrationsComponent
|
|
key={index}
|
|
icon={integration.icon}
|
|
header={integration.header}
|
|
info={integration.info}
|
|
onClick={integration.onClick}
|
|
/>
|
|
))}
|
|
</Grid>
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
export default Integrations;
|