feat: status component, code bash, fixes

src/lib/components/code.svelte

@@ -4,6 +4,7 @@
     import 'prismjs/components/prism-dart';
     import 'prismjs/components/prism-kotlin';
     import 'prismjs/components/prism-json';
+    import 'prismjs/components/prism-bash';
     import 'prismjs/plugins/autoloader/prism-autoloader';
     import 'prismjs/plugins/line-numbers/prism-line-numbers';
     import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
@@ -12,7 +13,7 @@
 
     export let label: string = null;
     export let code: string;
-    export let language: 'js' | 'html' | 'dart' | 'kotlin' | 'json';
+    export let language: 'js' | 'html' | 'dart' | 'kotlin' | 'json' | 'sh';
     export let showLineNumbers = false;
     export let showCopy = false;
 

src/lib/components/index.ts

@@ -37,3 +37,4 @@ export { default as Trim } from './trim.svelte';
 export { default as Tabs } from './tabs.svelte';
 export { default as Tab } from './tab.svelte';
 export { default as EventModal } from './eventModal.svelte';
+export { default as Status } from './status.svelte';

src/lib/components/status.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+    export let status: 'waiting' | 'pending' | 'failed' | 'complete' | 'processing' = null;
+</script>
+
+<div
+    class="status"
+    class:is-pending={status === 'pending'}
+    class:is-failed={status === 'failed'}
+    class:is-complete={status === 'complete'}
+    class:is-processing={status === 'processing'}>
+    {#if status}
+        <span class="status-icon" />
+    {/if}
+    <span class="text u-margin-inline-end-16"><slot /></span>
+</div>

src/lib/components/step.svelte

@@ -23,7 +23,7 @@
             {:else}
                 <div class="bullet" class:is-current={current} />
             {/if}
-            <div class="step-item-content">
+            <div class="steps-item-content">
                 <span class="text">{step.text}</span>
                 {#if step?.substeps}
                     <ul class="steps-sub">

src/routes/console/project-[project]/functions/function/[function]/+page.svelte

@@ -2,7 +2,15 @@
     import { page } from '$app/stores';
     import { Button } from '$lib/elements/forms';
     import { Pill } from '$lib/elements';
-    import { CardGrid, Pagination, Copy, DropList, DropListItem, Empty } from '$lib/components';
+    import {
+        CardGrid,
+        Pagination,
+        Copy,
+        DropList,
+        DropListItem,
+        Empty,
+        Status
+    } from '$lib/components';
     import {
         Table,
         TableHeader,
@@ -140,7 +148,11 @@
                             <TableCellText title="Created">
                                 {toLocaleDateTime(deployment.$createdAt)}
                             </TableCellText>
-                            <TableCellText title="Status">{deployment.status}</TableCellText>
+
+                            <TableCell title="Status">
+                                <Status status={deployment.status}>
+                                    {deployment.status ?? 'No deployment'}
+                                </Status></TableCell>
                             <!-- TODO: replace with build time, when implemented -->
                             <TableCellText title="Build Time">TBI</TableCellText>
                             <TableCellText title="Size"

src/routes/console/project-[project]/functions/function/[function]/execute.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Modal } from '$lib/components';
+    import { Code, Modal } from '$lib/components';
     import { Button, Form } from '$lib/elements/forms';
     import { InputTextarea, FormList } from '$lib/elements/forms';
     import InputChoice from '$lib/elements/forms/inputChoice.svelte';
@@ -37,19 +37,14 @@
             <InputChoice type="switchbox" id="json" label="Show example JSON" bind:value={showJson}>
                 Here's an example of some custom data.</InputChoice>
             {#if showJson}
-                <pre>
-            <code>
-{`name: 'John Doe',
-age: 42,
-    address: {
-            street: '123 Main St',
-            city: 'Anytown',
-            state: 'CA',
-            zip: '12345'
-        }
-`}
-            </code>
-        </pre>
+                <Code
+                    language="json"
+                    showLineNumbers
+                    code={`{
+    firstName: "hello", 
+    lastName:"world", 
+    age:"old"
+}`} />
             {/if}
         </FormList>