BarangaySystem/resources/js/Components/GlobalAnnouncement.vue

<script setup>
import { onMounted } from 'vue';
import { useAnnouncements } from '../composables/useAnnouncements.js';

const { announcements, loading, fetchLatest } = useAnnouncements();

onMounted(() => {
  fetchLatest();
});

const getIcon = (type) => {
  switch (type) {
    case 'success': return 'check-circle';
    case 'warning': return 'exclamation-triangle';
    case 'danger': return 'exclamation-circle';
    default: return 'info-circle';
  }
};

const getBannerClass = (type) => {
  return `announcement-banner banner-${type}`;
};

</script>

<template>
  <div v-if="announcements.length > 0" class="announcements-container">
    <div v-for="item in announcements" :key="item.id" :class="getBannerClass(item.type)">
      <div class="banner-content">
        <div class="banner-header">
          <div class="banner-icon">
            <i :class="'fas fa-' + getIcon(item.type)"></i>
          </div>
          <h5 class="banner-title">{{ item.title }}</h5>
        </div>
        
        <div v-if="item.photo" class="banner-photo">
          <img :src="'/RequestData/File/' + item.photo" alt="Announcement photo" />
        </div>
        
        <div class="banner-body">
          <p class="banner-description">{{ item.content }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.announcements-container {
  padding: 10px 15px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.announcement-banner {
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: flex-start;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  position: relative;
  border-left: 6px solid transparent;
  background-size: 200% 200%;
  animation: gradientShift 5s ease infinite;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.announcement-banner:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.banner-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  z-index: 1;
}

.banner-header {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.banner-icon {
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner-photo {
  width: 100%;
  max-height: 400px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.02);
  margin: 4px 0;
}

.banner-photo img {
  max-width: 100%;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: inherit;
}

.banner-body {
  width: 100%;
  padding: 0 4px;
}

.banner-title {
  margin: 0;
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.banner-description {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  font-weight: 500;
}

/* Premium Color Themes */
.banner-info {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  color: #0369a1;
  border-left-color: #0ea5e9;
}
.banner-info .banner-icon { color: #0ea5e9; }

.banner-success {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  color: #15803d;
  border-left-color: #22c55e;
}
.banner-success .banner-icon { color: #22c55e; }

.banner-warning {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  color: #a16207;
  border-left-color: #f59e0b;
}
.banner-warning .banner-icon { color: #f59e0b; }

.banner-danger {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  color: #b91c1c;
  border-left-color: #ef4444;
}
.banner-danger .banner-icon { color: #ef4444; }

/* Dark Mode adaptation support */
:global(.dark-mode) .announcement-banner {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
}

:global(.dark-mode) .banner-info {
  background: linear-gradient(135deg, #0c4a6e 0%, #075985 100%);
  color: #e0f2fe;
}
:global(.dark-mode) .banner-success {
  background: linear-gradient(135deg, #064e3b 0%, #065f46 100%);
  color: #dcfce7;
}
:global(.dark-mode) .banner-warning {
  background: linear-gradient(135deg, #713f12 0%, #78350f 100%);
  color: #fef3c7;
}
:global(.dark-mode) .banner-danger {
  background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%);
  color: #fee2e2;
}
</style>