init

client/src/components/CurrentWeather.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { DataRow } from '../services/api'
+
+const props = defineProps<{ data: DataRow }>()
+
+const temp    = computed(() => props.data.env_temp_c    != null ? `${(props.data.env_temp_c as number).toFixed(1)}°C`   : '—')
+const feels   = computed(() => props.data.env_heat_index_c != null ? `Feels ${(props.data.env_heat_index_c as number).toFixed(1)}°C` : '')
+const icon    = computed(() => props.data.forecast_weather_icon  as string | null)
+const label   = computed(() => props.data.forecast_weather_label as string | null)
+const humidity = computed(() => props.data.env_humidity != null ? `${(props.data.env_humidity as number).toFixed(0)}%` : '—')
+const wind    = computed(() => props.data.wind_speed_kmh  != null ? `${(props.data.wind_speed_kmh as number).toFixed(1)} km/h` : '—')
+const uvi     = computed(() => props.data.light_uvi != null ? `UV ${(props.data.light_uvi as number).toFixed(1)}` : null)
+const sunrise = computed(() => props.data.sun_sunrise ? new Date(props.data.sun_sunrise as string).toLocaleTimeString('en', { hour: '2-digit', minute: '2-digit' }) : '—')
+const sunset  = computed(() => props.data.sun_sunset  ? new Date(props.data.sun_sunset  as string).toLocaleTimeString('en', { hour: '2-digit', minute: '2-digit' }) : '—')
+</script>
+
+<style scoped lang="scss">
+.hero {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 16px;
+  border-radius: 12px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+}
+
+.top {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.weather-icon {
+  width: 64px;
+  height: 64px;
+  object-fit: contain;
+}
+
+.temps {
+  flex: 1;
+}
+
+.temp-main {
+  font-size: 42px;
+  font-weight: 700;
+  line-height: 1;
+  color: var(--text);
+}
+
+.temp-feel {
+  font-size: 13px;
+  color: var(--text-muted);
+}
+
+.weather-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text);
+}
+
+.stats {
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+  border-top: 1px solid var(--border);
+  padding-top: 10px;
+}
+
+.stat {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.stat-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; }
+.stat-value { font-size: 14px; font-weight: 600; color: var(--text); }
+</style>
+
+<template>
+  <div class="hero">
+    <div class="top">
+      <img v-if="icon" :src="icon" class="weather-icon" alt="weather" />
+      <div class="temps">
+        <div class="temp-main">{{ temp }}</div>
+        <div class="temp-feel">{{ feels }}</div>
+        <div class="weather-label">{{ label }}</div>
+      </div>
+    </div>
+    <div class="stats">
+      <div class="stat"><span class="stat-label">Humidity</span><span class="stat-value">{{ humidity }}</span></div>
+      <div class="stat"><span class="stat-label">Wind</span><span class="stat-value">{{ wind }}</span></div>
+      <div v-if="uvi" class="stat"><span class="stat-label">UV</span><span class="stat-value">{{ uvi }}</span></div>
+      <div class="stat"><span class="stat-label">Sunrise</span><span class="stat-value">{{ sunrise }}</span></div>
+      <div class="stat"><span class="stat-label">Sunset</span><span class="stat-value">{{ sunset }}</span></div>
+    </div>
+  </div>
+</template>