1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
const shortcuts = [
{ keys: ['Ctrl', 'N'], label: 'New File' },
{ keys: ['Ctrl', 'O'], label: 'Open File' },
{ keys: ['Ctrl', 'P'], label: 'Command Palette' },
]
function Kbd({ keys }: { keys: string[] }) {
return (
<span className="inline-flex items-center gap-0.5">
{keys.map((key, i) => (
<span key={i}>
{i > 0 && <span className="mx-0.5 text-text-muted text-ui-xs">+</span>}
<kbd
className="inline-flex items-center justify-center min-w-[22px] h-[18px] px-[3px] rounded text-[10px] font-mono font-medium leading-none bg-editor-surface text-text-primary border"
style={{ borderColor: 'var(--color-panel-border)', boxShadow: '0 1px 0 var(--color-panel-border)' }}
>
{key}
</kbd>
</span>
))}
</span>
)
}
export default function WelcomeScreen() {
return (
<div className="flex-1 flex flex-col items-center justify-center select-none overflow-hidden">
<div className="flex flex-col items-center gap-1 mb-6">
<span
className="text-[40px] font-bold leading-none tracking-tight bg-clip-text text-transparent select-none"
style={{
backgroundImage: 'linear-gradient(135deg, var(--color-accent) 0%, var(--color-text-muted) 100%)',
opacity: 0.2,
}}
>
YACE
</span>
<span
className="text-[11px] leading-none text-text-muted select-none"
style={{ opacity: 0.35 }}
>
Yet Another Code Editor
</span>
</div>
<div className="flex flex-col gap-2">
{shortcuts.map((item) => (
<div
key={item.label}
className="flex items-center gap-3 px-3 py-1.5 rounded-md transition-all duration-150 hover:bg-panel-hover/40"
>
<Kbd keys={item.keys} />
<span className="text-ui-sm text-text-secondary">{item.label}</span>
</div>
))}
</div>
</div>
)
}
|
