# Weather Forecast

A weather card built around one idea: the condition lives as a soft gradient **orb** behind a frosted-glass panel. Switch days and the orb crossfades to that day's palette — burnt amber for sun, slate for rain — while the temperature, condition and icon spring in over the glass.

## Usage

```vue
<script setup lang="ts">
  import WeatherForecast from '~/components/ui/weather-forecast/WeatherForecast.vue';
</script>

<template>
  <WeatherForecast city="Chicago" />
</template>
```

## Props

<table>
<thead>
  <tr>
    <th>
      Prop
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        city
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'Chicago'
      </code>
    </td>
    
    <td>
      City shown in the header
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        days
      </code>
    </td>
    
    <td>
      <code>
        WeatherDay[]
      </code>
    </td>
    
    <td>
      5-day default
    </td>
    
    <td>
      <code>
        { day, date, condition, temp }[]
      </code>
      
       (temps in °F)
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        unit
      </code>
    </td>
    
    <td>
      <code>
        'f' | 'c'
      </code>
    </td>
    
    <td>
      <code>
        'f'
      </code>
    </td>
    
    <td>
      Initial temperature unit
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        autoplay-interval
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        3200
      </code>
    </td>
    
    <td>
      ms between auto-advances; <code>
        0
      </code>
      
       disables
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Additional classes
    </td>
  </tr>
</tbody>
</table>

## Events

<table>
<thead>
  <tr>
    <th>
      Event
    </th>
    
    <th>
      Payload
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        change
      </code>
    </td>
    
    <td>
      <code>
        (day, index)
      </code>
    </td>
    
    <td>
      Fires when the selected day changes
    </td>
  </tr>
</tbody>
</table>

Conditions map to orb palettes: `Sunny`, `Partly cloudy`, `Cloudy`, `Rain`, `Snow`, `Storm`.