feat: add transparent to infobox

radixdlt · Dec 16, 2022 · 8a69722 · 8a69722
1 parent 755ed10
commit 8a69722
Showing 1 changed file with 36 additions and 38 deletions.
diff --git a/src/components/info-box/InfoBox.svelte b/src/components/info-box/InfoBox.svelte
@@ -3,64 +3,62 @@
   import { SkeletonLoader } from '@aleworm/svelte-skeleton-loader'
   import Text from '@components/_base/text/Text.svelte'
 
-  export let keys: string[]
+  export let keys: string[] = []
   export let values: unknown[] = []
   export let unknownMetadata: Array<{
     key: string
     value: string
   }> = []
-
+  export let transparent: boolean = false
   export let loading: boolean
 
   const loaderWidth = 100
 </script>
 
-<Box>
-  <Box>
-    <Box
-      gap="medium"
-      cx={{
-        display: 'grid',
-        gridTemplateColumns: '2fr 5fr'
-      }}
-      transparent
-    >
-      {#each keys as key, i}
-        <Text bold>
-          {key}
+<Box {transparent}>
+  <Box
+    gap="medium"
+    cx={{
+      display: 'grid',
+      gridTemplateColumns: '2fr 5fr'
+    }}
+    transparent
+  >
+    {#each keys as key, i}
+      <Text bold>
+        {key}
+      </Text>
+
+      {#if loading}
+        <SkeletonLoader width={loaderWidth} />
+      {:else if values[i]}
+        <Text>
+          {values[i]}
+        </Text>
+      {:else}
+        <Text>
+          {`<no value>`}
         </Text>
+      {/if}
+    {/each}
 
+    {#each unknownMetadata as { key, value }}
+      <Text bold>
+        {key}
+      </Text>
+      <Text>
         {#if loading}
           <SkeletonLoader width={loaderWidth} />
-        {:else if values[i]}
+        {:else if value}
           <Text>
-            {values[i]}
+            {value}
           </Text>
         {:else}
           <Text>
             {`<no value>`}
           </Text>
         {/if}
-      {/each}
-
-      {#each unknownMetadata as { key, value }}
-        <Text bold>
-          {key}
-        </Text>
-        <Text>
-          {#if loading}
-            <SkeletonLoader width={loaderWidth} />
-          {:else if value}
-            <Text>
-              {value}
-            </Text>
-          {:else}
-            <Text>
-              {`<no value>`}
-            </Text>
-          {/if}
-        </Text>
-      {/each}
-    </Box>
+      </Text>
+    {/each}
   </Box>
 </Box>