Search/help updates

src/components/HelpModal/HintItem.tsx

@@ -0,0 +1,40 @@
+import { Group, Text } from '@mantine/core';
+
+function HintItem({ command, item }: any) {
+	return (
+		<Group
+			gap={0}
+			align='center'
+			justify='center'
+			style={{
+				display: 'flex',
+				padding: '8px',
+				borderRadius: '10px',
+				backgroundColor: 'var(--color-background)',
+			}}
+		>
+			<Text
+				style={{
+					color: 'var(--color-background)',
+					backgroundColor: 'var(--color-text-pri)',
+					padding: '8px',
+					borderRadius: '10px',
+				}}
+			>
+				{command}
+			</Text>
+			<Text
+				style={{
+					color: 'var(--color-background)',
+					backgroundColor: 'var(--color-text-acc)',
+					padding: '8px',
+					borderRadius: '10px',
+				}}
+			>
+				{item}
+			</Text>
+		</Group>
+	);
+}
+
+export default HintItem;