OSS/podman
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: modernize PodMan frontend command center

Browse Source
This commit is contained in:
Yahya Alhinai
2026-06-28 00:28:04 +00:00
parent 549895292c
commit 80cc89072f
6 changed files with 524 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/CreatePodForm.tsx
+20 -11
View File
@@ -36,52 +36,61 @@ export function CreatePodForm({
if (!open) {
return (
<button
className="flex min-h-[140px] items-center justify-center rounded-xl border border-dashed border-slate-700 text-slate-400 hover:border-emerald-600 hover:text-emerald-400"
className="group flex min-h-[280px] flex-col items-center justify-center gap-3 rounded-lg border border-dashed border-slate-300 bg-white p-6 text-center text-slate-600 shadow-sm transition hover:border-blue-300 hover:bg-blue-50/40"
onClick={() => setOpen(true)}
>
+ New Pod
<span className="grid h-11 w-11 place-items-center rounded-lg border border-slate-200 bg-slate-50 text-2xl font-light text-slate-900 transition group-hover:border-blue-200 group-hover:bg-blue-50">
+
</span>
<span className="text-base font-semibold text-slate-950">New pod</span>
<span className="max-w-[18rem] text-sm leading-5 text-slate-500">
Add a workspace for a feature team, spike, or demo flow.
</span>
</button>
);
}
return (
<div className="flex flex-col gap-2 rounded-xl border border-emerald-700/50 bg-slate-900/50 p-4">
<h3 className="font-semibold text-slate-100">New Pod</h3>
<div className="flex min-h-[280px] flex-col gap-3 rounded-lg border border-slate-200 bg-white p-4 shadow-sm">
<div>
<h3 className="font-semibold text-slate-950">New pod</h3>
<p className="text-xs text-slate-500">Name, repository, and first member.</p>
</div>
<input
className="rounded-md border border-slate-700 bg-slate-900 px-3 py-1.5 text-sm"
className="rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-950 outline-none transition placeholder:text-slate-400 focus:border-blue-400"
placeholder="Pod name (e.g. Mobile Pod)"
value={name}
autoFocus
onChange={(e) => setName(e.target.value)}
/>
<input
className="rounded-md border border-slate-700 bg-slate-900 px-3 py-1.5 text-sm"
className="rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-950 outline-none transition placeholder:text-slate-400 focus:border-blue-400"
placeholder="owner/repo"
value={repo}
onChange={(e) => setRepo(e.target.value)}
/>
<input
className="rounded-md border border-slate-700 bg-slate-900 px-3 py-1.5 text-sm"
className="rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-950 outline-none transition placeholder:text-slate-400 focus:border-blue-400"
placeholder="Description (optional)"
value={description}
onChange={(e) => setDescription(e.target.value)}
/>
<input
className="rounded-md border border-slate-700 bg-slate-900 px-3 py-1.5 text-sm"
className="rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-950 outline-none transition placeholder:text-slate-400 focus:border-blue-400"
placeholder="Your name (optional first member)"
value={firstMember}
onChange={(e) => setFirstMember(e.target.value)}
/>
<div className="flex gap-2">
<div className="mt-auto flex gap-2">
<button
className="rounded-md bg-emerald-600 px-3 py-1 text-sm font-medium hover:bg-emerald-500 disabled:opacity-50"
className="rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white hover:bg-blue-500 disabled:opacity-50"
onClick={submit}
disabled={busy || !name.trim()}
>
Create
</button>
<button
className="rounded-md border border-slate-700 px-3 py-1 text-sm hover:bg-slate-800"
className="rounded-md border border-slate-200 px-3 py-2 text-sm text-slate-700 hover:bg-slate-50"
onClick={() => setOpen(false)}
>
Cancel