calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-05-23 01:05:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

Standardize the ui

Browse Source
This commit is contained in:
Owen
2026-05-15 12:06:05 -07:00
parent 6010515da0
commit d558c31f88
2 changed files with 51 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/app/ssh/SshClient.tsx
View File

@@ -190,26 +190,22 @@ export default function SshClient({
if (error) { if (error) {
return ( return (
<div className="flex flex-col h-screen bg-black text-white p-4 items-center justify-center"> <div className="min-h-screen bg-background flex items-center justify-center">
<p className="text-red-400">{error}</p> <p className="text-destructive">{error}</p>
</div> </div>
); );
} }
return ( return (
<div className="flex flex-col h-screen bg-black text-white p-4 gap-4"> <div className="min-h-screen bg-background">
<h1 className="text-xl font-semibold text-white">SSH Terminal</h1>
{!connected && ( {!connected && (
<div className="bg-neutral-900 rounded-lg p-6 max-w-lg w-full mx-auto flex flex-col gap-4"> <div className="mx-auto max-w-2xl p-6">
<div className="grid grid-cols-2 gap-4"> <h1 className="mb-4 text-2xl font-semibold">
<div className="flex flex-col gap-1 col-span-2"> SSH Terminal
<Label </h1>
htmlFor="username"
className="text-neutral-300" <div className="space-y-4">
> <Field label="Username" id="username">
Username
</Label>
<Input <Input
id="username" id="username"
value={form.username} value={form.username}
@@ -220,17 +216,9 @@ export default function SshClient({
}) })
} }
placeholder="root" placeholder="root"
className="bg-neutral-800 border-neutral-700 text-white"
/> />
</div> </Field>
<Field label="Password" id="password">
<div className="flex flex-col gap-1 col-span-2">
<Label
htmlFor="password"
className="text-neutral-300"
>
Password
</Label>
<Input <Input
id="password" id="password"
type="password" type="password"
@@ -241,13 +229,13 @@ export default function SshClient({
password: e.target.value password: e.target.value
}) })
} }
className="bg-neutral-800 border-neutral-700 text-white"
/> />
</div> </Field>
</div>
{connectError && ( {connectError && (
<p className="text-red-400 text-sm">{connectError}</p> <p className="text-destructive text-sm">
{connectError}
</p>
)} )}
<Button <Button
@@ -258,22 +246,23 @@ export default function SshClient({
{connecting ? "Connecting…" : "Connect"} {connecting ? "Connecting…" : "Connect"}
</Button> </Button>
</div> </div>
</div>
)} )}
{connected && ( {connected && (
<div className="flex flex-col flex-1 gap-2 min-h-0"> <div className="flex h-screen flex-col bg-neutral-900">
<div className="flex justify-end"> <div className="flex flex-wrap items-center gap-2 bg-black p-2 text-white">
<Button <Button
variant="destructive"
size="sm" size="sm"
variant="destructive"
onClick={disconnect} onClick={disconnect}
> >
Disconnect Terminate
</Button> </Button>
</div> </div>
<div <div
ref={terminalRef} ref={terminalRef}
className="flex-1 rounded overflow-hidden" className="flex-1 overflow-hidden"
style={{ minHeight: 0 }} style={{ minHeight: 0 }}
/> />
</div> </div>
@@ -281,3 +270,20 @@ export default function SshClient({
</div> </div>
); );
} }
function Field({
label,
id,
children
}: {
label: string;
id: string;
children: React.ReactNode;
}) {
return (
<div className="space-y-1.5">
<Label htmlFor={id}>{label}</Label>
{children}
</div>
);
}

4
src/app/vnc/VncClient.tsx
View File

@@ -181,7 +181,7 @@ export default function VncClient({
className="flex h-screen flex-col bg-neutral-900" className="flex h-screen flex-col bg-neutral-900"
style={{ display: connected ? "flex" : "none" }} style={{ display: connected ? "flex" : "none" }}
> >
<div className="flex items-center gap-2 bg-black p-2 text-white"> <div className="flex flex-wrap items-center gap-2 bg-black p-2 text-white">
<Button <Button
size="sm" size="sm"
variant="secondary" variant="secondary"
@@ -212,7 +212,7 @@ export default function VncClient({
variant="destructive" variant="destructive"
onClick={disconnect} onClick={disconnect}
> >
Disconnect Terminate
</Button> </Button>
</div> </div>