wip setup guide

2024-09-06 20:59:56 +03:00
parent ab1517cc8f
commit ff54bcc2ef
13 changed files with 296 additions and 1 deletions
@@ -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>
@@ -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>