wip setup guide

front/js/svelte/Account.svelte

@@ -3,6 +3,7 @@
     import Login from "./account/Login.svelte";
     import Verify from "./account/Verify.svelte";
     import Profile from "./account/Profile.svelte";
+    import SetupIndex from "./setup/Index.svelte";
     import {setContext} from "svelte";
 
     const components = {
@@ -10,6 +11,7 @@
         login: Login,
         verify: Verify,
         profile: Profile,
+        setup: SetupIndex,
     };
 
     export let title;

front/js/svelte/setup/Index.svelte

@@ -0,0 +1,12 @@
+<script>
+    import Step from "./Step.svelte"
+    export let steps;
+
+    console.log(steps);
+</script>
+<div class="wrapper-tiny">
+
+{#each steps as step}
+    <Step {step}></Step>
+{/each}
+</div>

front/js/svelte/setup/Step.svelte

@@ -0,0 +1,67 @@
+<script>
+    import Icon from "../common/Icon.svelte"
+
+    export let step;
+
+</script>
+
+
+<div class="step step-{step.status}">
+    <div class="step-icon">
+        {#if step.status === "success"}
+            <Icon icon="check"></Icon>
+        {:else}
+            <Icon icon="close"></Icon>
+        {/if}
+    </div>
+    <div style="width:100%">
+        <h4>{step.name}</h4>
+        <details>
+            <summary>Instuctions</summary>
+            <code class="instructions">{step.instructions}</code>
+        </details>
+    </div>
+
+
+</div>
+
+<style>
+    .step-success .step-icon{
+        background: var(--suc10);
+        color: var(--suc100);
+    }
+
+    .step-fail  .step-icon{
+        background: var(--err10);
+        color: var(--err100);
+    }
+
+    .step-icon{
+        padding: 12px;
+        border-radius: 12px;
+    }
+
+    .step {
+        width: 100%;
+        display: flex;
+        align-items: start;
+        gap: 10px;
+        justify-content: space-between;
+
+        padding: 12px;
+        border-radius: 12px;
+    }
+
+    details {
+        width: 100%;
+    }
+
+    .instructions {
+        margin-top: 20px;
+        padding: 12px;
+        border-radius: 12px;
+        background: var(--p10);
+        white-space: break-spaces;
+        display: block;
+    }
+</style>