From 2211c74c9904f704cf25e8de3bcdd1753b20ff47 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Fri, 24 Sep 2021 21:52:04 +0200
Subject: [PATCH] [wip] Add Image component

---
 src/components/atoms/Image.svelte        | 23 +++++++++++++++++++++++
 src/components/molecules/Location.svelte |  7 +++++--
 2 files changed, 28 insertions(+), 2 deletions(-)
 create mode 100644 src/components/atoms/Image.svelte

diff --git a/src/components/atoms/Image.svelte b/src/components/atoms/Image.svelte
new file mode 100644
index 0000000..df420b1
--- /dev/null
+++ b/src/components/atoms/Image.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+    export let id: string
+    export let alt: string
+    export let width: number
+    export let height: number
+    export let quality: number = 80
+    export let sizes: any = {}
+
+    // TODO:
+    // - quality
+    // - sizes
+    // -- width
+    // -- height
+</script>
+
+<picture class={$$props.class}>
+    <img
+        src="{import.meta.env.VITE_API_URL_DEV}/assets/{id}"
+        width={width}
+        height={height}
+        alt={alt}
+    />
+</picture>
\ No newline at end of file
diff --git a/src/components/molecules/Location.svelte b/src/components/molecules/Location.svelte
index 614e446..a20208c 100644
--- a/src/components/molecules/Location.svelte
+++ b/src/components/molecules/Location.svelte
@@ -1,12 +1,15 @@
 <script lang="ts">
+    // Components
+    import Image from '$components/atoms/Image.svelte'
+
     export let location: any
 
     const { name, slug, country, last_updated } = location
 </script>
 
 <div class="location" role="listitem">
-    <a href="/location/{country.slug}/{slug}" rel="prefetch" sveltekit-noscroll>
-        <img src="//api.housesof.localhost:8055/assets/{country.flag.id}" alt="Flag of {country.name}">
+    <a href="/{country.slug}/{slug}" rel="prefetch" sveltekit-noscroll>
+        <Image id={country.flag.id} alt="Flag of {country.name}" width={32} height={32} />
         <h3 class="location__name">
             {name}
         </h3>