🚧 Switch to monorepo with Turbo

apps/website/src/components/molecules/PostCard.svelte

@@ -0,0 +1,48 @@
+<style lang="scss">
+    @import "../../style/organisms/postcard";
+</style>
+
+<script lang="ts">
+    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
+    export let size: string = undefined
+
+    const className = 'postcard'
+    $: classes = [
+        className,
+        ...[size].map(variant => variant && `${className}--${variant}`),
+        $$props.class
+    ].join(' ').trim()
+</script>
+
+<div class={classes}>
+    <div class="postcard__left">
+        <p class="postcard__country">
+            <span>Houses of</span><br>
+            <strong class="title-country__purple">{country}</strong>
+        </p>
+    </div>
+    <div class="postcard__right">
+        <div class="postcard__stamp">
+            <div class="frame">
+                <img src="/images/icons/stamp.svg" width="32" height="42" alt="Stamp">
+            </div>
+            <Image
+                class="flag"
+                id={flagId}
+                sizeKey="square-small"
+                width={32} height={32}
+                alt="Flag of {country}"
+            />
+        </div>
+        <ul class="postcard__address">
+            <li>{street}</li>
+            <li>{location}{region ? `, ${region}` : ''}</li>
+        </ul>
+    </div>
+</div>