59 lines
1.2 KiB
React
59 lines
1.2 KiB
React
import { Box, Stack, Typography } from "@mui/material";
|
|
import PropTypes from "prop-types";
|
|
import { useTheme } from "@emotion/react";
|
|
import ConfigBox from "../ConfigBox/index.jsx";
|
|
|
|
/**
|
|
* ConfigRow is a styled container used to layout content in a row format with specific padding, border, and spacing.
|
|
* It serves as the wrapper for ConfigBox, with the left section displaying the title and description,
|
|
* and the right section displaying the children.
|
|
*
|
|
* @component
|
|
* @example
|
|
* return (
|
|
* <ConfigBox>
|
|
* <div>Left content (Title + Description)</div>
|
|
* <div>Right content (Children)</div>
|
|
* </ConfigBox>
|
|
* );
|
|
*/
|
|
|
|
const ConfigRow = ({ title, description, children }) => {
|
|
const theme = useTheme();
|
|
|
|
return (
|
|
<ConfigBox>
|
|
<Box>
|
|
<Typography
|
|
component="h2"
|
|
variant="h2"
|
|
>
|
|
{title}
|
|
</Typography>
|
|
{description && (
|
|
<Typography
|
|
variant="body2"
|
|
mt={theme.spacing(2)}
|
|
>
|
|
{description}
|
|
</Typography>
|
|
)}
|
|
</Box>
|
|
<Stack
|
|
gap={theme.spacing(15)}
|
|
mt={theme.spacing(4)}
|
|
>
|
|
{children}
|
|
</Stack>
|
|
</ConfigBox>
|
|
);
|
|
};
|
|
|
|
ConfigRow.propTypes = {
|
|
title: PropTypes.string.isRequired,
|
|
description: PropTypes.string,
|
|
children: PropTypes.node,
|
|
};
|
|
|
|
export default ConfigRow;
|