From 2ea5cbecdacef6a520ac56bdcbabd2bf00e839b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Thu, 14 Oct 2021 23:19:09 +0200
Subject: [PATCH] Make PostCard content dynamic

---
 src/components/molecules/PostCard.svelte | 36 ++++++++++++------------
 src/routes/photos.svelte                 | 26 ++++++++++++++---
 2 files changed, 40 insertions(+), 22 deletions(-)

diff --git a/src/components/molecules/PostCard.svelte b/src/components/molecules/PostCard.svelte
index 94af05c..d902d64 100644
--- a/src/components/molecules/PostCard.svelte
+++ b/src/components/molecules/PostCard.svelte
@@ -1,31 +1,31 @@
 <script lang="ts">
-    import Image from '$components/atoms/Image.svelte';
+    import Image from '$components/atoms/Image.svelte'
 
+    export let street: string
+    export let location: string
+    export let region: string = undefined
+    export let country: string
+    export let flagId: string
 </script>
 
 <div class="post-card">
-    <div class="wrap">
+    <div class="post-card__left">
+        <h3 class="post-card__country">
+            <span>Houses of</span><br>
+            <strong class="title-country__purple">{country}</strong>
+        </h3>
+    </div>
+    <div class="post-card__right">
         <div class="post-card__stamp">
             <div class="frame">
-                <img src="/images/icons/stamp.svg" width="32" height="42" alt="">
+                <img src="/images/icons/stamp.svg" width="32" height="42" alt="Stamp">
             </div>
-            <Image class="flag" id="5a5bc9a1-9401-4e2f-88f2-ffd6c05acefb" width={32} height={32} alt="country" />
+            <Image class="flag" id={flagId} width={32} height={32} alt="Flag of {country}" />
         </div>
-        <h3 class="post-card__country">
-            <span>Houses of <br></span>
-            <strong class="title-country__purple">France</strong>
-        </h3>
-        <div class="post-card__border"></div>
         <ul class="post-card__address">
-            <li>
-                <p>Rue Clerisseau</p>
-            </li>
-            <li>
-                <p>Nimes, Occitanie</p>
-            </li>
-            <li>
-                <p>France</p>
-            </li>
+            <li>{street}</li>
+            <li>{location}{region ? `, ${region}` : ''}</li>
+            <li>{country}</li>
         </ul>
     </div>
 </div>
\ No newline at end of file
diff --git a/src/routes/photos.svelte b/src/routes/photos.svelte
index 5490ef2..12b2c37 100644
--- a/src/routes/photos.svelte
+++ b/src/routes/photos.svelte
@@ -120,7 +120,13 @@
                     }
                     location {
                         slug
-                        country { slug }
+                        name
+                        region
+                        country {
+                            slug
+                            name
+                            flag { id }
+                        }
                     }
                 }
             }
@@ -250,7 +256,7 @@
         <div class="grid container">
             {#if photos.length}
                 <div class="photos__grid">
-                    {#each photos as { image, slug, location }}
+                    {#each photos as { image, slug, location, title }}
                         <div class="photo shadow-photo">
                             <a href="/{location.country.slug}/{location.slug}/{slug}">
                                 <Image
@@ -263,7 +269,13 @@
                                     ratio={1.5}
                                     alt={image.title}
                                 />
-                                <PostCard />
+                                <PostCard
+                                    street={title}
+                                    location={location.name}
+                                    region={location.region}
+                                    country={location.country.name}
+                                    flagId={location.country.flag.id}
+                                />
                             </a>
                         </div>
                     {/each}
@@ -338,7 +350,13 @@
                     }
                     location {
                         slug
-                        country { slug }
+                        name
+                        region
+                        country {
+                            slug
+                            name
+                            flag { id }
+                        }
                     }
                     date_created
                 }