List Files | Just Commands | Repo | Logs

← back | Copy

<template>
  <div v-if="!disabled" class="action-bar" :class="{ flashing: flash }" @click="handleClick">
    <div class="action-bar-content">
      <h2 class="action-bar-text">{{ title }}</h2>
    </div>
  </div>
</template>

<script setup lang="ts">
// ActionBar component - reusable fixed action bar at bottom of screen
defineProps<{
  title: string;
  flash?: boolean;
  disabled?: boolean;
}>();

const emit = defineEmits(['next']);

const handleClick = () => {
  emit('next');
};
</script>

<style scoped>
.action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--ion-color-primary);
  padding: 20px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  cursor: pointer;
  transition: none !important;
  transform: none !important;
}

.action-bar:hover {
  background-color: var(--ion-color-primary-shade);
}

.action-bar:active {
  transform: scale(0.98);
}

.action-bar-content {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.action-bar-text {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #ffffff;
  font-variant: small-caps;
}

/* Flashing animation - 1 frame every 2 seconds = 4s per cycle */
@keyframes flash {
  0%, 49% {
    background-color: var(--ion-color-primary);
    border-top: none;
  }
  50%, 100% {
    background-color: var(--ion-background-color);
    border-top: 3px solid var(--ion-color-primary);
  }
}

@keyframes flash-text {
  0%, 49% {
    color: #ffffff;
  }
  50%, 100% {
    color: var(--ion-color-primary);
  }
}

.action-bar.flashing {
  animation: flash 4s infinite;
}

.action-bar.flashing:hover {
  background-color: var(--ion-color-primary);
}

.action-bar.flashing .action-bar-text {
  animation: flash-text 4s infinite;
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .action-bar-text {
    font-size: 20px;
  }
}
</style>