# Timezone Companion

A meeting-overlap finder for distributed teams.

Every city is a row of 24 hour blocks, colored where that city is inside working hours. A full-height scrubber drags across the grid; the footer counts who's reachable ("2 of 4 in working hours", "late in London") and *Find best time* sweeps the scrubber to the widest overlap.

<demo-timezone-companion>



</demo-timezone-companion>

## Usage

```vue
<script setup lang="ts">
  import TimezoneCompanion from '~/components/ui/timezone-companion/TimezoneCompanion.vue';
</script>

<template>
  <TimezoneCompanion />
</template>
```

The `TimezoneMeeting` sub-component is also exported for standalone use.

## Props

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

<tbody>
  <tr>
    <td>
      <code>
        cities
      </code>
    </td>
    
    <td>
      <code>
        TimezoneCity[]
      </code>
    </td>
    
    <td>
      SF / NY / São Paulo / London
    </td>
    
    <td>
      <code>
        { name, zone, offsetMinutes, workStart, workEnd, color }[]
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Additional classes
    </td>
  </tr>
</tbody>
</table>