# Flight Status Card

> An animated card displaying real-time flight information with progress tracking.

<demo-flight-status-card>



</demo-flight-status-card>

## Installation

```bash
npx shadcn-vue@latest add "https://nxui.geoql.in/r/flight-status-card.json"
```

## Usage

```vue
<script setup lang="ts">
  import FlightStatusCardLight from '~/components/ui/flight-status-card/FlightStatusCardLight.vue';
</script>

<template>
  <FlightStatusCardLight
    departure-code="YYZ"
    arrival-code="HND"
    departure-city="Toronto"
    arrival-city="Tokyo"
    departure-time="MON, 6:14 PM"
    arrival-time="TUE, 7:14 AM"
    eta="ETA 2:15 PM"
    timezone="Tokyo Time"
    next-event="DINNER IN"
    next-event-time="2:34H"
    :progress="45"
    remaining-time="-7H 01M"
  />
</template>
```

## Props

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

<tbody>
  <tr>
    <td>
      <code>
        flight
      </code>
    </td>
    
    <td>
      <code>
        FlightInfo
      </code>
    </td>
    
    <td>
      required
    </td>
    
    <td>
      Flight information object with airline, route, and status
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Additional CSS classes for styling
    </td>
  </tr>
</tbody>
</table>