yadunut/clan-core
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(ui): use NavSection in installer workflow

Browse Source
This commit is contained in:
Brian McGee
2025-08-22 12:15:16 +01:00
parent 878789cf38
commit 1897b7bb06
1 changed files with 17 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
pkgs/clan-app/ui/src/workflows/Install/steps/Initial.tsx
View File

@@ -3,54 +3,21 @@ import { InstallSteps } from "../install";
import { Typography } from "@/src/components/Typography/Typography"; import { Typography } from "@/src/components/Typography/Typography";
import { Button } from "@/src/components/Button/Button"; import { Button } from "@/src/components/Button/Button";
import { StepLayout } from "../../Steps"; import { StepLayout } from "../../Steps";
import { NavSection } from "@/src/components/NavSection/NavSection";
const ChoiceLocalOrRemote = () => { const ChoiceLocalOrRemote = () => {
const stepSignal = useStepper<InstallSteps>(); const stepSignal = useStepper<InstallSteps>();
return ( return (
<div class="flex size-full flex-col gap-3"> <div class="flex size-full flex-col gap-3">
<div class="flex flex-col gap-6 rounded-md px-4 py-6 text-fg-def-1 bg-def-2"> <NavSection
<div class="flex justify-between gap-2"> label="I have physical access to the machine"
<div class="flex flex-col justify-center gap-1 px-1">
<Typography
hierarchy="body"
size="default"
weight="bold"
color="primary"
>
I have physical access to the machine.
</Typography>
</div>
<Button
type="button"
ghost
hierarchy="secondary"
icon="CaretRight"
onClick={() => stepSignal.setActiveStep("local:choice")} onClick={() => stepSignal.setActiveStep("local:choice")}
/> />
</div> <NavSection
</div> label="The Machine is remote and i have ssh access to it"
<div class="flex flex-col gap-6 rounded-md px-4 py-6 text-fg-def-1 bg-def-2">
<div class="flex justify-between gap-2">
<div class="flex flex-col justify-center gap-1 px-1">
<Typography
hierarchy="body"
size="default"
weight="bold"
color="primary"
>
The Machine is remote and i have ssh access to it.
</Typography>
</div>
<Button
type="button"
ghost
hierarchy="secondary"
icon="CaretRight"
onClick={() => stepSignal.setActiveStep("install:address")} onClick={() => stepSignal.setActiveStep("install:address")}
/> />
</div> </div>
</div>
</div>
); );
}; };
@@ -60,49 +27,15 @@ const ChoiceLocalInstaller = () => {
<StepLayout <StepLayout
body={ body={
<div class="flex flex-col gap-3"> <div class="flex flex-col gap-3">
<div class="flex flex-col gap-6 rounded-md px-4 py-6 text-fg-def-1 bg-def-2"> <NavSection
<div class="flex justify-between gap-2"> label="I have an installer"
<div class="flex flex-col justify-center gap-1 px-1">
<Typography
hierarchy="body"
size="default"
weight="bold"
color="primary"
>
I have an installer
</Typography>
</div>
<Button
type="button"
ghost
hierarchy="secondary"
icon="CaretRight"
onClick={() => stepSignal.setActiveStep("install:address")} onClick={() => stepSignal.setActiveStep("install:address")}
/> />
</div> <NavSection
</div> label="I don't have an installer, yet"
<div class="flex flex-col gap-6 rounded-md px-4 py-6 text-fg-def-1 bg-def-2">
<div class="flex justify-between gap-2">
<div class="flex flex-col justify-center gap-1 px-1">
<Typography
hierarchy="body"
size="default"
weight="bold"
color="primary"
>
I don't have an installer, yet
</Typography>
</div>
<Button
type="button"
ghost
hierarchy="secondary"
icon="CaretRight"
onClick={() => stepSignal.setActiveStep("create:prose")} onClick={() => stepSignal.setActiveStep("create:prose")}
/> />
</div> </div>
</div>
</div>
} }
footer={ footer={
<div class="flex justify-start"> <div class="flex justify-start">