Faisal Amir 9ecad0972e
fix: reorder alphabetical cloud model on starter screen (#4072)
* fix: reorder alphabetical cloud model on starter screen

* chore: update sort after group
2024-11-22 12:53:11 +07:00

85 lines
2.5 KiB
TypeScript

import { ScrollArea, Badge } from '@janhq/joi'
const availableHotkeys = [
{
combination: 'N',
modifierKeys: [isMac ? '⌘' : 'Ctrl'],
description: 'Create a new thread',
},
{
combination: 'B',
modifierKeys: [isMac ? '⌘' : 'Ctrl'],
description: 'Toggle left panel',
},
{
combination: 'Shift B',
modifierKeys: [isMac ? '⌘' : 'Ctrl'],
description: 'Toggle right panel',
},
{
combination: 'Shift Backspace',
modifierKeys: [isMac ? '⌘' : 'Ctrl'],
description: 'Delete current active thread',
},
{
combination: 'Shift C',
modifierKeys: [isMac ? '⌘' : 'Ctrl'],
description: 'Clean current active thread',
},
{
combination: ',',
modifierKeys: [isMac ? '⌘' : 'Ctrl'],
description: 'Navigate to settings',
},
{
combination: 'Enter',
description: 'Send a message (in input field)',
},
{
combination: 'Shift Enter',
description: 'Insert a new line (in input field)',
},
]
const Hotkeys = () => {
return (
<ScrollArea className="h-full w-full p-4">
<div className="mb-2 flex flex-col items-center justify-center gap-2">
<div className="hidden w-full gap-x-4 border-b border-[hsla(var(--app-border))] pb-2 sm:flex">
<div className="w-1/2 pb-2">
<h6 className="font-semibold">Combination</h6>
</div>
<div className="w-full pb-2">
<h6 className="font-semibold">Description</h6>
</div>
</div>
{availableHotkeys.map((shortcut, index) => {
return (
<div
key={shortcut.combination}
className={
index === availableHotkeys.length - 1
? 'flex w-full flex-col gap-x-4 pb-2 sm:flex-row'
: 'flex w-full flex-col gap-x-4 border-b border-[hsla(var(--app-border))] pb-2 sm:flex-row'
}
>
<div className="flex w-full py-2 sm:w-1/2">
<div className="bg-secondary inline-flex items-center justify-center rounded-full px-1 py-0.5 text-xs font-bold">
<Badge theme="secondary">{`${shortcut.modifierKeys?.[0] ?? ''} ${
shortcut.combination
}`}</Badge>
</div>
</div>
<div className="w-full py-2">
<p>{shortcut.description}</p>
</div>
</div>
)
})}
</div>
</ScrollArea>
)
}
export default Hotkeys