37 lines
1.1 KiB
Svelte
37 lines
1.1 KiB
Svelte
<script>
|
|
import { slide } from 'svelte/transition'
|
|
import dayjs from 'dayjs'
|
|
import advancedFormat from 'dayjs/plugin/advancedFormat'
|
|
import * as fn from '../functions'
|
|
|
|
export let photo
|
|
export let index
|
|
export let location
|
|
|
|
// Manipulate data
|
|
const thumbnail = photo.image.data.thumbnails.find(t => t.url.includes('key=large'))
|
|
index = (index < 10 ? '0' : null) + index
|
|
|
|
// Format the date
|
|
dayjs.extend(advancedFormat)
|
|
const date = dayjs(photo.created_on).format('MMM Do, YYYY')
|
|
</script>
|
|
|
|
<div class="card" in:slide out:slide>
|
|
<div class="card-image">
|
|
<figure class="image is-4by3">
|
|
<img src="{thumbnail.url}" alt="{photo.name}, {location.name}, {location.country.name}" width="{thumbnail.width}" height="{thumbnail.height}">
|
|
</figure>
|
|
</div>
|
|
|
|
<div class="card-content">
|
|
<h4 class="title is-4">{photo.name}</h4>
|
|
<p>{location.name}, {location.country.name}</p>
|
|
</div>
|
|
|
|
<footer class="card-footer">
|
|
<span class="card-footer-item">{date}</span>
|
|
<span class="card-footer-item">#{index}</span>
|
|
</footer>
|
|
</div>
|