New settings pages

src/components/HelpModal/HelpSection.tsx

@@ -0,0 +1,42 @@
+import { Divider, Group } from '@mantine/core';
+import { useCommonHooks } from 'hooks';
+import HintItem from './HintItem';
+
+function HelpSection({ name, items }: any) {
+	const { theme } = useCommonHooks();
+	return (
+		<>
+			<h3
+				style={{
+					zIndex: 0,
+					padding: '8px',
+					marginTop: 0,
+					marginBottom: -32,
+					borderRadius: '8px',
+					color: theme.backgroundColor,
+					backgroundColor: theme.borderColor,
+				}}
+			>
+				{name}
+			</h3>
+			<Divider py={8} color={theme.accentColor} />
+			<Group
+				style={{
+					width: '100%',
+					backgroundColor: theme.searchColor,
+					borderRadius: '8px',
+					padding: '24px',
+					justifyItems: 'center',
+				}}
+			>
+				{items
+					?.sort((a: any, b: any) => (a.command > b.command ? 1 : -1))
+					.map((item: any) => (
+						<HintItem key={item.command} command={item.command} name={item.name} />
+					))}
+			</Group>
+		</>
+	);
+}
+
+export default HelpSection;