init

client/src/components/ForecastStrip.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { DataRow } from '../services/api'
+
+const props = defineProps<{ days: DataRow[] }>()
+
+const items = computed(() => props.days.slice(0, 5).map(d => ({
+  date:    new Date(d.time as string).toLocaleDateString('en', { weekday: 'short', month: 'short', day: 'numeric' }),
+  icon:    d.forecast_weather_icon as string | null,
+  label:   d.forecast_weather_label as string,
+  high:    d.env_temp_max_c != null ? `${(d.env_temp_max_c as number).toFixed(1)}°` : '—',
+  low:     d.env_temp_min_c != null ? `${(d.env_temp_min_c as number).toFixed(1)}°` : '—',
+  rain:    d.forecast_precipitation_probability != null ? `${d.forecast_precipitation_probability}%` : null,
+})))
+</script>
+
+<style scoped lang="scss">
+.strip {
+  display: flex;
+  gap: 8px;
+  overflow-x: auto;
+  padding-bottom: 4px;
+
+  &::-webkit-scrollbar { height: 4px; }
+  &::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
+}
+
+.day {
+  flex: 1;
+  min-width: 80px;
+  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: 11px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; }
+.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; }
+</style>
+
+<template>
+  <div class="strip">
+    <div v-for="item in items" :key="item.date" class="day">
+      <div class="day-name">{{ item.date }}</div>
+      <img v-if="item.icon" :src="item.icon" class="day-icon" :alt="item.label" />
+      <div class="day-label">{{ item.label }}</div>
+      <div class="day-temps">
+        <span>{{ item.high }}</span>
+        <span class="day-low">{{ item.low }}</span>
+      </div>
+      <div v-if="item.rain" class="day-rain">🌧 {{ item.rain }}</div>
+    </div>
+  </div>
+</template>