65 lines
2.0 KiB
Vue
65 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import {formatDate} from '@ztimson/utils';
|
|
import {watch} from 'vue';
|
|
import {BASE, type DataRow} from '../services/api';
|
|
|
|
const props = withDefaults(defineProps<{ days: DataRow[] }>(), {days: <any>[]});
|
|
|
|
watch(() => props.days, console.log, {immediate: true});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.forecast-wrap {
|
|
width: 100%;
|
|
}
|
|
|
|
.strip {
|
|
display: flex;
|
|
gap: 8px;
|
|
overflow-x: auto;
|
|
padding-bottom: 6px;
|
|
width: 100%;
|
|
|
|
&::-webkit-scrollbar { height: 4px; }
|
|
&::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
|
|
}
|
|
|
|
.day {
|
|
flex: 0 0 100px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 10px 8px;
|
|
border-radius: 10px;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
.day-name { font-size: 10px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; text-align: center; }
|
|
.day-icon { width: 36px; height: 36px; object-fit: contain; }
|
|
.day-label { font-size: 10px; color: var(--text-muted); text-align: center; line-height: 1.2; }
|
|
.day-temps { display: flex; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text); }
|
|
.day-low { color: var(--text-muted); font-weight: 400; }
|
|
.day-rain { font-size: 11px; color: #38bdf8; }
|
|
.day-precip { font-size: 10px; color: var(--text-muted); }
|
|
</style>
|
|
|
|
<template>
|
|
<div class="forecast-wrap">
|
|
<div class="strip">
|
|
<div v-for="d in days" class="day">
|
|
<div class="day-name">{{ formatDate('ddd, MMM d', new Date(d.time + 'T00:00:00')) }}</div>
|
|
<img :src="BASE + d.icon" class="day-icon" :alt="(d.label?.toString() || '')" />
|
|
<div class="day-label">{{ d.label }}</div>
|
|
<div class="day-temps">
|
|
<span>{{ d.temp_max }}</span>
|
|
<span class="day-low">{{ d.temp_min }}</span>
|
|
</div>
|
|
<div v-if="d.precipitation_chance" class="day-rain">🌧 {{ d.precipitation_chance }}</div>
|
|
<div v-if="d.precipitation" class="day-precip">{{ d.precipitation }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|