44 lines
1.0 KiB
TypeScript
44 lines
1.0 KiB
TypeScript
import { Divider, Group } from '@mantine/core';
|
|
import type { SearchShortcut } from 'types';
|
|
import HintItem from './HintItem';
|
|
|
|
function HelpSection({ name, items }: { name: string; items: SearchShortcut[] }) {
|
|
return (
|
|
<>
|
|
<h3
|
|
style={{
|
|
zIndex: 0,
|
|
padding: '8px',
|
|
marginTop: 0,
|
|
marginBottom: -32,
|
|
borderRadius: '8px',
|
|
color: 'var(--mantine-color-background-0)',
|
|
backgroundColor: 'var(--mantine-color-border-0)',
|
|
}}
|
|
>
|
|
{name}
|
|
</h3>
|
|
<Divider py={8} color={'var(--mantine-color-accent-0)'} />
|
|
<Group
|
|
style={{
|
|
width: '100%',
|
|
backgroundColor: 'var(--mantine-color-search-0)',
|
|
borderRadius: '8px',
|
|
padding: '24px',
|
|
justifyItems: 'center',
|
|
}}
|
|
>
|
|
{items
|
|
?.toSorted((a: SearchShortcut, b: SearchShortcut) =>
|
|
a.command > b.command ? 1 : -1,
|
|
)
|
|
.map((item: SearchShortcut) => (
|
|
<HintItem key={item.command} command={item.command} name={item.name} />
|
|
))}
|
|
</Group>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default HelpSection;
|