dynamic promo widget

packages/web/src/jsonui/JsonUiContentRenderer.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import JsonUiHeading from './JsonUiHeading.svelte';
+  import JsonUiLinkButton from './JsonUiLinkButton.svelte';
+  import JsonUiTextBlock from './JsonUiTextBlock.svelte';
+  import JsonUiTickList from './JsonUiTickList.svelte';
+  import { JsonUiBlock } from './jsonuitypes';
+
+  export let blocks: JsonUiBlock[] = [];
+
+  const componentMap = {
+    text: JsonUiTextBlock,
+    heading: JsonUiHeading,
+    ticklist: JsonUiTickList,
+    button: JsonUiLinkButton,
+  } as const;
+</script>
+
+{#each blocks as block, i}
+  {#if block.type in componentMap}
+    <svelte:component this={componentMap[block.type]} {...block} />
+  {/if}
+{/each}

packages/web/src/jsonui/JsonUiHeading.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  export let text: string;
+  export let level: 1|2|3|4|5|6 = 2;
+  const tag = `h${level}` as keyof HTMLElementTagNameMap;
+</script>
+
+<svelte:element this={tag}>{text}</svelte:element>
+
+<style>
+h2 {
+  text-align: center;
+}
+</style>

packages/web/src/jsonui/JsonUiLinkButton.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import FormStyledButton from '../buttons/FormStyledButton.svelte';
+  import { openWebLink } from '../utility/simpleTools';
+
+  export let text: string;
+  export let link: string;
+  export let newTab: boolean = true;
+
+  // very light url guard
+  const safe = /^(https?:)?\/\//i.test(link) || link.startsWith('/');
+</script>
+
+<div class="center">
+  <FormStyledButton on:click={() => openWebLink(link)} value={text} skipWidth />
+</div>
+
+<style>
+  .center {
+    text-align: center;
+  }
+</style>

packages/web/src/jsonui/JsonUiTextBlock.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  export let text: string;
+</script>
+
+<p>{text}</p>
+
+<style>
+  p {
+    margin: 10px;
+  }
+</style>

packages/web/src/jsonui/JsonUiTickList.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  export let items: string[] = [];
+</script>
+
+<ul class="ticklist">
+  {#each items as item}
+    <li>{item}</li>
+  {/each}
+</ul>
+
+<style>
+  .ticklist {
+    margin: 10px;
+    padding: 0;
+    list-style: none;
+    padding-left: 0;
+  }
+  .ticklist li::before {
+    content: '✔︎ ';
+    color: var(--theme-icon-green);
+  }
+</style>

packages/web/src/jsonui/jsonuitypes.ts

@@ -0,0 +1,5 @@
+export type JsonUiBlock =
+  | { type: 'text'; text: string }
+  | { type: 'heading'; text: string; level?: 1|2|3|4|5|6 }
+  | { type: 'ticklist'; items: string[] }
+  | { type: 'button'; text: string; link: string; newTab?: boolean };