From 81b56a006365740b61acb92f414d24039ab3c916 Mon Sep 17 00:00:00 2001
From: valentine195 <38669521+valentine195@users.noreply.github.com>
Date: Tue, 4 Jan 2022 10:11:14 -0500
Subject: [PATCH] add image svelte container

---
 src/view/ui/Image.svelte | 37 +++++++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 src/view/ui/Image.svelte

diff --git a/src/view/ui/Image.svelte b/src/view/ui/Image.svelte
new file mode 100644
index 00000000..d9a806fa
--- /dev/null
+++ b/src/view/ui/Image.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+    import type { Monster } from "@types";
+    import type { ImageItem } from "src/data/constants";
+
+    export let monster: Monster;
+    export let item: ImageItem;
+</script>
+
+<div class="flex-container">
+    {#each item.properties as property}
+        {#if property in monster}
+            <div class="image">{monster[property]}</div>
+        {/if}
+    {/each}
+</div>
+
+<style>
+    .flex-container {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+    .heading {
+        font-family: "Libre Baskerville", "Lora", "Calisto MT",
+            "Bookman Old Style", Bookman, "Goudy Old Style", Garamond,
+            "Hoefler Text", "Bitstream Charter", Georgia, serif;
+        color: var(--statblock-primary-color);
+        font-weight: 700;
+        margin: 0px;
+        font-size: 23px;
+        letter-spacing: 1px;
+        font-variant: small-caps;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+</style>