chore: merge components and stylesheets in same directory name
This commit is contained in:
@@ -0,0 +1,49 @@
|
||||
<style lang="scss">
|
||||
@import "./PostCard";
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
import { cx } from 'classix'
|
||||
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 = cx(
|
||||
className,
|
||||
...[size].map(variant => variant && `${className}--${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>
|
||||
Reference in New Issue
Block a user