40 lines
1.7 KiB
TypeScript
40 lines
1.7 KiB
TypeScript
/**
|
|
* Empty state shown when no file is open in the editor.
|
|
* Shows keyboard shortcuts cheatsheet.
|
|
*/
|
|
|
|
import { useAppTranslation } from '@features/localization/renderer';
|
|
import { shortcutLabel } from '@renderer/utils/platformKeys';
|
|
import { FileCode } from 'lucide-react';
|
|
|
|
export const EditorEmptyState = (): React.ReactElement => {
|
|
const { t } = useAppTranslation('team');
|
|
const shortcuts = [
|
|
{ keys: shortcutLabel('⌘ P', 'Ctrl+P'), label: t('editor.shortcuts.actions.quickOpen') },
|
|
{
|
|
keys: shortcutLabel('⌘ ⇧ F', 'Ctrl+Shift+F'),
|
|
label: t('editor.shortcuts.actions.searchInFiles'),
|
|
},
|
|
{ keys: shortcutLabel('⌘ S', 'Ctrl+S'), label: t('editor.shortcuts.actions.save') },
|
|
{ keys: shortcutLabel('⌘ B', 'Ctrl+B'), label: t('editor.shortcuts.actions.toggleSidebar') },
|
|
{ keys: shortcutLabel('⌘ G', 'Ctrl+G'), label: t('editor.shortcuts.actions.goToLine') },
|
|
{ keys: 'Esc', label: t('editor.shortcuts.actions.closeEditor') },
|
|
];
|
|
|
|
return (
|
|
<div className="flex h-full flex-col items-center justify-center gap-4 text-text-muted">
|
|
<FileCode className="size-12 opacity-30" />
|
|
<p className="text-sm">{t('editor.empty.selectFile')}</p>
|
|
<div className="mt-2 grid grid-cols-2 gap-x-6 gap-y-1.5">
|
|
{shortcuts.map((s) => (
|
|
<div key={s.keys} className="flex items-center justify-between gap-4 text-xs">
|
|
<span className="text-text-muted">{s.label}</span>
|
|
<kbd className="rounded border border-border bg-surface-raised px-1.5 py-0.5 font-mono text-[10px] text-text-secondary">
|
|
{s.keys}
|
|
</kbd>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|