78 lines
2.1 KiB
Vue
78 lines
2.1 KiB
Vue
<template>
|
||
<aside class="tour-aside chamfer" v-show-on-intersect="{type:'fade-up'}">
|
||
<h3 class="aside-title">Quick Facts</h3>
|
||
<ul class="facts">
|
||
<li v-if="tour.tour_days?.length > 0">
|
||
<span class="label">Length</span>
|
||
<span class="value">{{ tour.tour_days?.length }} days</span>
|
||
</li>
|
||
<li v-if="tour.level">
|
||
<span class="label">Fitness</span>
|
||
<span class="value">{{ tour.level }}</span>
|
||
</li>
|
||
<li v-if="true">
|
||
<span class="label">Price</span>
|
||
<span class="value">{{ Intl.NumberFormat(undefined, { style: 'currency', currency: 'USD' }).format(tour.price) }}</span>
|
||
</li>
|
||
<li v-if="tour.min_people || tour.max_people">
|
||
<span class="label">Group Size</span>
|
||
<span class="value">
|
||
{{ tour.min_people ?? '?' }}–{{ tour.max_people ?? '?' }} people
|
||
</span>
|
||
</li>
|
||
<li v-if="Array.isArray(tour.countries) && tour.countries.length">
|
||
<span class="label">Countries</span>
|
||
<span class="value">
|
||
{{ tour.countries?.map((c:any)=>c.name ?? c).join(', ') }}
|
||
</span>
|
||
</li>
|
||
</ul>
|
||
<h3 class="aside-title">Upcoming Departures</h3>
|
||
</aside>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { defineProps } from "vue";
|
||
import type { Tour } from "@/types";
|
||
|
||
defineProps<{ tour: Tour }>();
|
||
</script>
|
||
|
||
<style scoped>
|
||
.tour-aside {
|
||
background: var(--card);
|
||
color: var(--foreground);
|
||
border: 1px solid color-mix(in oklab, var(--foreground), transparent 85%);
|
||
padding: 1.25rem;
|
||
height: 100%;
|
||
}
|
||
.aside-title {
|
||
margin: 1rem 0 1rem 0;
|
||
font-size: 1rem;
|
||
color: var(--foreground);
|
||
letter-spacing: 0.02em;
|
||
text-transform: uppercase;
|
||
}
|
||
.facts {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
display: grid;
|
||
gap: 0.5rem;
|
||
}
|
||
.facts li {
|
||
display: grid;
|
||
grid-template-columns: 1fr auto;
|
||
gap: 1rem;
|
||
padding: 0.5rem 0.25rem;
|
||
border-bottom: 1px dashed color-mix(in oklab, var(--foreground), transparent 90%);
|
||
}
|
||
.facts .label {
|
||
color: var(--muted-foreground);
|
||
}
|
||
.facts .value {
|
||
color: var(--foreground);
|
||
font-weight: 600;
|
||
}
|
||
</style>
|