refactor(perferences): use center wrapper layout

2026-06-29 19:44:28 +08:00
parent b8d7873b77
commit f719c11606
19 changed files with 684 additions and 144 deletions
@@ -0,0 +1,53 @@
+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;