85 lines
1.9 KiB
TypeScript
85 lines
1.9 KiB
TypeScript
import { createStyles } from 'antd-style';
|
|
import React from 'react';
|
|
|
|
const useStyles = createStyles(({ token, css }) => ({
|
|
group: css`
|
|
/* Match the page panel surface (page-box.less): 8px radius + the
|
|
lighter container border, rather than the heavier component token. */
|
|
border: 1px solid ${token.colorBorder};
|
|
border-radius: 8px;
|
|
background: ${token.colorBgContainer};
|
|
overflow: hidden;
|
|
`,
|
|
row: css`
|
|
padding: 16px 20px;
|
|
|
|
& + & {
|
|
border-top: 1px solid ${token.colorBorderSecondary};
|
|
}
|
|
`,
|
|
head: css`
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
`,
|
|
info: css`
|
|
min-width: 0;
|
|
`,
|
|
title: css`
|
|
font-size: 14px;
|
|
font-weight: var(--font-weight-medium);
|
|
color: ${token.colorText};
|
|
line-height: 22px;
|
|
`,
|
|
description: css`
|
|
margin-top: 2px;
|
|
font-size: 13px;
|
|
color: ${token.colorTextTertiary};
|
|
line-height: 20px;
|
|
`,
|
|
extra: css`
|
|
flex-shrink: 0;
|
|
`,
|
|
body: css`
|
|
margin-top: 16px;
|
|
`
|
|
}));
|
|
|
|
export const SettingsGroup: React.FC<{ children: React.ReactNode }> = ({
|
|
children
|
|
}) => {
|
|
const { styles } = useStyles();
|
|
return <div className={styles.group}>{children}</div>;
|
|
};
|
|
|
|
interface SettingRowProps {
|
|
title: React.ReactNode;
|
|
description?: React.ReactNode;
|
|
extra?: React.ReactNode;
|
|
children?: React.ReactNode;
|
|
}
|
|
|
|
export const SettingRow: React.FC<SettingRowProps> = ({
|
|
title,
|
|
description,
|
|
extra,
|
|
children
|
|
}) => {
|
|
const { styles } = useStyles();
|
|
return (
|
|
<div className={styles.row}>
|
|
<div className={styles.head}>
|
|
<div className={styles.info}>
|
|
<div className={styles.title}>{title}</div>
|
|
{description && (
|
|
<div className={styles.description}>{description}</div>
|
|
)}
|
|
</div>
|
|
{extra && <div className={styles.extra}>{extra}</div>}
|
|
</div>
|
|
{children && <div className={styles.body}>{children}</div>}
|
|
</div>
|
|
);
|
|
};
|