SIB/frontend/src/components/map/ArrivalBanner.vue

<template>
  <Transition name="banner-slide">
    <div 
      v-if="isVisible" 
      class="best-stop-banner-compact"
    >
      <div class="banner-icon-bg">
        <span class="material-icons text-white text-[16px]">directions_bus</span>
      </div>
      
      <div class="flex flex-col flex-1 truncate ml-2" style="min-width: 0;">
        <span class="text-[9px] uppercase font-bold text-gray-500 dark:text-gray-400 leading-none">
          {{ hasActiveBuses ? t('map.arrivalTime') : t('common.notice') }}
        </span>
        <span class="trigger-text-compact truncate leading-tight">
          {{ hasActiveBuses ? stopName : t('map.noBusesAvailable') }}
        </span>
      </div>
 
      <div v-if="hasActiveBuses || isLoading" class="eta-badge">
        <template v-if="isLoading">
          <div class="eta-loader"></div>
        </template>
        <template v-else-if="hasActiveBuses">
          <span class="eta-value">{{ etaValue }}</span>
          <span class="eta-unit">min</span>
        </template>
      </div>

      <button @click.stop="$emit('close')" class="ml-2 p-1 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
        <span class="material-icons text-[18px] text-gray-400 hover:text-red-500">close</span>
      </button>
    </div>
  </Transition>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const props = defineProps<{
  isVisible: boolean
  stopName: string
  isLoading: boolean
  hasActiveBuses: boolean
  etaValue: number | string
}>()

defineEmits(['close'])

const { t } = useI18n()
</script>

<style scoped>
.best-stop-banner-compact {
  flex: 1;
  background: var(--header-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  height: 40px; 
  border-radius: 10px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border: 1px solid var(--border-color);
  max-width: 100%;
  overflow: hidden;
  pointer-events: auto;
  z-index: 1200;
  min-width: 0;
}

.banner-icon-bg {
  width: 28px;
  height: 28px;
  background: var(--active-color);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.trigger-text-compact {
  font-size: 0.85rem;
  font-weight: 700;
}

.eta-badge {
  background: var(--bg-secondary);
  padding: 4px 10px;
  border-radius: 8px;
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-left: 8px;
}

.eta-value {
  font-weight: 900;
  font-size: 1rem;
  color: var(--active-color);
}

.eta-unit {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.eta-loader {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(254, 231, 21, 0.2);
  border-top-color: var(--active-color);
  border-radius: 50%;
  animation: spin 1s infinite linear;
}

@keyframes spin { to { transform: rotate(360deg); } }

.banner-slide-enter-active {
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.banner-slide-leave-active {
  transition: all 0.4s cubic-bezier(0.7, 0, 0.84, 0);
}
.banner-slide-enter-from, .banner-slide-leave-to {
  transform: translateY(-100%) scale(0.9);
  opacity: 0;
}
</style>