flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Make PostCard content dynamic

Browse Source
This commit is contained in:
Félix Péault
2021-10-14 23:19:09 +02:00
parent 2ed411a94e
commit 2ea5cbecda
2 changed files with 40 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/molecules/PostCard.svelte
View File

@@ -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>