Skip to content

Commit bded374

Browse files
chrisbbreuerchrisbbreuer
committed
chore: wip
1 parent 63eeaf4 commit bded374

File tree

3 files changed

+225
-214
lines changed

3 files changed

+225
-214
lines changed

‎storage/framework/defaults/components/Dashboard/CodeEditor.vue

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ defineProps({
1313
1414
const options = reactive({
1515
lang: 'typescript',
16-
theme: 'nord_dark',
16+
theme: 'github_dark',
1717
content: `echo 'Hello World!'
1818
1919
mv ./test/test.ts ./jello
@@ -22,20 +22,20 @@ cp`,
2222
</script>
2323

2424
<template>
25-
<header class="flex items-center justify-between border-b border-[#282a2e] rounded-t-lg bg-[#373b41] p-4">
25+
<header class="flex items-center justify-between border-b border-[#30363d] rounded-t-lg bg-[#1f2428] p-4">
2626
<div class="flex items-center gap-2">
27-
<div class="h-3 w-3 rounded-full bg-[#CC6666]" />
28-
<div class="h-3 w-3 rounded-full bg-[#E6E074]" />
29-
<div class="h-3 w-3 rounded-full bg-[#68B5BD]" />
27+
<div class="h-3 w-3 rounded-full bg-[#f85149]" />
28+
<div class="h-3 w-3 rounded-full bg-[#db9d16]" />
29+
<div class="h-3 w-3 rounded-full bg-[#2ea043]" />
3030
</div>
3131

32-
<span v-if="!live" class="text-sm text-white font-mono">Deploy Script</span>
33-
<span v-else class="text-sm text-white font-mono">Live Terminal Output</span>
32+
<span v-if="!live" class="text-sm text-[#c9d1d9] font-mono">Deploy Script</span>
33+
<span v-else class="text-sm text-[#c9d1d9] font-mono">Live Terminal Output</span>
3434
</header>
3535

3636
<VAceEditor
3737
v-model:value="options.content"
38-
class="vue-ace-editor rounded-b-lg"
38+
class="vue-ace-editor rounded-b-lg bg-[#0d1117]"
3939
:placeholder="`Enter your ${options.lang} code here`"
4040
:lang="options.lang"
4141
:theme="options.theme"
@@ -44,6 +44,8 @@ cp`,
4444
enableBasicAutocompletion: true,
4545
enableSnippets: true,
4646
enableLiveAutocompletion: true,
47+
fontSize: '14px',
48+
fontFamily: 'ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace',
4749
}"
4850
style="height: 300px"
4951
/>
@@ -57,7 +59,7 @@ select {
5759
}
5860
5961
.vue-ace-editor {
60-
font-size: 16px;
62+
font-size: 14px;
6163
flex: 1;
6264
}
6365

‎storage/framework/defaults/components/Dashboard/TerminalContainer.vue

Lines changed: 88 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,106 @@
1-
<script setup>
1+
<script setup lang="ts">
22
defineProps({
33
live: Boolean,
4+
path: {
5+
type: String,
6+
default: '~/Code/stacks',
7+
},
8+
branch: {
9+
type: String,
10+
default: 'main',
11+
},
12+
version: {
13+
type: String,
14+
default: 'v1.2.3',
15+
},
416
})
517
</script>
618

719
<template>
8-
<div class="">
9-
<div class="h-full w-full flex flex-col rounded-lg bg-[#1D1F21] text-[#C5C8C6] font-mono shadow">
10-
<header class="flex items-center justify-between border-b border-[#282a2e] rounded-t-lg bg-[#373b41] p-4">
20+
<div class="font-mono">
21+
<div class="h-full w-full flex flex-col rounded-lg bg-[#0D1117] text-[#C9D1D9] shadow">
22+
<!-- Terminal Header -->
23+
<header class="flex items-center justify-between rounded-t-lg bg-[#161B22] px-3 py-2">
1124
<div class="flex items-center gap-2">
12-
<div class="h-3 w-3 rounded-full bg-[#CC6666]" />
13-
<div class="h-3 w-3 rounded-full bg-[#E6E074]" />
14-
<div class="h-3 w-3 rounded-full bg-[#68B5BD]" />
25+
<div class="h-3 w-3 rounded-full bg-[#FF5F56]" />
26+
<div class="h-3 w-3 rounded-full bg-[#FFBD2E]" />
27+
<div class="h-3 w-3 rounded-full bg-[#27C93F]" />
1528
</div>
29+
<div class="absolute left-1/2 -translate-x-1/2 text-sm text-[#8B949E]">
30+
📁 {{ path }}
31+
</div>
32+
</header>
1633

17-
<div v-if="live" class="text-sm">
18-
Live Terminal Output
34+
<!-- Terminal Content -->
35+
<div class="p-4 text-sm leading-6">
36+
<div class="flex items-center gap-2 text-[#C9D1D9]">
37+
<span class="text-[#8B949E]">{{ path }}</span>
38+
<span>on</span>
39+
<span class="flex items-center gap-1">
40+
<span class="text-[#7EE787]">{{ branch }}</span>
41+
</span>
42+
<span>via</span>
43+
<span class="flex items-center gap-1">
44+
<span class="text-[#8B949E]">🐰</span>
45+
<span class="text-[#FF7B72]">{{ version }}</span>
46+
</span>
1947
</div>
20-
<div v-else class="text-sm">
21-
root@localhost:~
48+
49+
<div class="flex items-center gap-2 text-[#C9D1D9] mt-1">
50+
<span class="text-[#8B949E]">❯</span>
51+
<span>ls</span>
2252
</div>
23-
</header>
2453

25-
<div class="h-54 w-full overflow-auto p-4">
26-
<div class="text-sm leading-7">
27-
<p class="text-[#68B5BD]">
28-
root@localhost:~$ ls
29-
</p>
30-
<p>Desktop Documents Downloads Music Pictures Public Templates Videos</p>
31-
<p class="pt-2 text-[#68B5BD]">
32-
root@localhost:~$ pwd
33-
</p>
34-
<p>/home/root</p>
35-
<p class="pt-2 text-[#68B5BD]">
36-
root@localhost:~$ whoami
37-
</p>
38-
<p>root</p>
54+
<div class="mt-2 grid grid-cols-4 gap-4">
55+
<div v-for="file in [
56+
'CHANGELOG.md', 'LICENSE.md', 'README.md', 'app',
57+
'bootstrap', 'buddy', 'cloud', 'commitlint.config.ts',
58+
'bun.lock', 'bunfig.toml', 'config', 'database',
59+
'docs', 'eslint.config.ts', 'node_modules', 'package.json',
60+
'pkgx.yaml', 'public', 'resources', 'routes',
61+
'storage', 'tests', 'tsconfig.json', '~'
62+
]" :key="file" class="text-[#C9D1D9]">
63+
{{ file }}
64+
</div>
3965
</div>
40-
</div>
4166

42-
<div v-if="!live" class="flex items-center gap-2 border-t border-[#282a2e] p-4">
43-
<span class="text-[#68B5BD]">root@localhost:~$</span>
44-
<input
45-
class="w-full bg-[#1D1F21] text-[#C5C8C6] focus:outline-none"
46-
placeholder="Type your command..."
47-
type="text"
48-
>
49-
<button class="rounded bg-[#68B5BD] px-4 py-2 text-[#1D1F21]">
50-
Run
51-
</button>
67+
<div class="flex items-center gap-2 text-[#C9D1D9] mt-4">
68+
<span class="text-[#8B949E]">{{ path }}</span>
69+
<span>on</span>
70+
<span class="flex items-center gap-1">
71+
<span class="text-[#7EE787]">{{ branch }}</span>
72+
</span>
73+
<span>via</span>
74+
<span class="flex items-center gap-1">
75+
<span class="text-[#8B949E]">🐰</span>
76+
<span class="text-[#FF7B72]">{{ version }}</span>
77+
</span>
78+
</div>
79+
80+
<div class="flex items-center gap-2 text-[#C9D1D9] mt-1">
81+
<span class="text-[#8B949E]">❯</span>
82+
<input
83+
type="text"
84+
class="flex-1 bg-transparent border-0 outline-0 focus:outline-0 focus:ring-0 active:outline-0 active:ring-0"
85+
style="-webkit-tap-highlight-color: transparent;"
86+
>
87+
</div>
5288
</div>
5389
</div>
5490
</div>
5591
</template>
92+
93+
<style scoped>
94+
@keyframes blink {
95+
0%, 100% { opacity: 1; }
96+
50% { opacity: 0; }
97+
}
98+
99+
.cli-cursor {
100+
opacity: 1;
101+
}
102+
103+
.cursor-blink {
104+
animation: blink 1s step-end infinite;
105+
}
106+
</style>

0 commit comments

Comments
 (0)