54 lines
1.1 KiB
TypeScript
54 lines
1.1 KiB
TypeScript
import { createStyles } from 'antd-style';
|
|
import React from 'react';
|
|
|
|
const useStyles = createStyles(({ token, css }) => ({
|
|
section: css`
|
|
& + & {
|
|
margin-top: 40px;
|
|
}
|
|
`,
|
|
header: css`
|
|
margin-bottom: 16px;
|
|
`,
|
|
title: css`
|
|
margin: 0;
|
|
font-size: 16px;
|
|
font-weight: var(--font-weight-medium);
|
|
color: ${token.colorTextHeading};
|
|
line-height: 24px;
|
|
`,
|
|
description: css`
|
|
margin: 4px 0 0;
|
|
font-size: 13px;
|
|
color: ${token.colorTextTertiary};
|
|
line-height: 20px;
|
|
`
|
|
}));
|
|
|
|
interface SettingsSectionProps {
|
|
title: React.ReactNode;
|
|
description?: React.ReactNode;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
const SettingsSection: React.FC<SettingsSectionProps> = ({
|
|
title,
|
|
description,
|
|
children
|
|
}) => {
|
|
const { styles } = useStyles();
|
|
return (
|
|
<section className={styles.section}>
|
|
<div className={styles.header}>
|
|
<h3 className={styles.title}>{title}</h3>
|
|
{description && <p className={styles.description}>{description}</p>}
|
|
</div>
|
|
{children}
|
|
</section>
|
|
);
|
|
};
|
|
|
|
SettingsSection.displayName = 'SettingsSection';
|
|
|
|
export default SettingsSection;
|