59 lines
1.5 KiB
Svelte
59 lines
1.5 KiB
Svelte
<style lang="scss" src="./PostCard.scss"></style>
|
|
|
|
<script lang="ts">
|
|
import { cx } from 'classix'
|
|
import Image from '$components/atoms/Image.svelte'
|
|
|
|
let {
|
|
street,
|
|
location,
|
|
region,
|
|
country,
|
|
flagId,
|
|
size,
|
|
...props
|
|
}: {
|
|
street: string
|
|
location: string
|
|
region?: string
|
|
country: string
|
|
flagId: string
|
|
size?: string
|
|
class?: string
|
|
} = $props()
|
|
|
|
const cardClass = 'postcard'
|
|
const classes = $derived(cx(
|
|
cardClass,
|
|
...[size].map(variant => variant && `${cardClass}--${variant}`),
|
|
props.class,
|
|
))
|
|
</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>
|