sfp_front_nuxt_serprati_landing/app/components/EventCard.vue

<template>
  <article class="event-card">
    <button
      type="button"
      class="event-header"
      :aria-expanded="isOpen"
      @click="isOpen = !isOpen"
    >
      <img
        v-if="event.cover_url"
        :src="event.cover_url"
        :alt="event.title"
        class="event-thumb"
        loading="lazy"
      >
      <div v-else class="event-thumb event-thumb--empty">
        <i class="mdi mdi-calendar-star text-violet-normal" style="font-size: 1.5rem;"/>
      </div>

      <div class="min-w-0 flex-1 text-left">
        <span class="event-badge">
          <i :class="`mdi ${typeIcon}`" style="font-size: 0.875rem;"/>
          {{ eventTypeLabel(event.type) }}
        </span>
        <h3 class="text-subtitle-1 font-semibold text-text mt-2 mb-1 truncate">
          {{ event.title }}
        </h3>
        <p v-if="dateTimeLabel" class="text-body-2 text-text-2">
          {{ dateTimeLabel }}
        </p>
      </div>

      <span
        class="material-icons text-violet-normal shrink-0 transition-transform duration-300"
        :class="{ 'rotate-180': isOpen }"
      >
        expand_more
      </span>
    </button>

    <div class="event-body" :class="isOpen ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'">
      <div class="overflow-hidden">
        <div class="px-6 pb-6 pt-1">
          <p
            v-for="(paragraph, index) in paragraphs"
            :key="index"
            lang="pt-BR"
            class="text-body-2 text-text-2 text-justify hyphens-auto event-text"
            :class="{ 'mt-3': index > 0 }"
          >
            {{ paragraph }}
          </p>

          <img
            v-if="event.cover_url"
            :src="event.cover_url"
            :alt="event.title"
            class="event-cover"
            :class="{ 'mt-5': paragraphs.length }"
            loading="lazy"
          >

          <EventCarousel
            v-if="photos.length"
            :photos="photos"
            class="mt-4"
          />
        </div>
      </div>
    </div>
  </article>
</template>

<script setup lang="ts">
import type { CompanyEvent } from '~/composables/useEvents'

const { event } = defineProps<{ event: CompanyEvent }>()

const isOpen = ref(true)

const typeIcon = computed(() => (event.type === 'esporte' ? 'mdi-soccer' : 'mdi-palette-outline'))

const dateTimeLabel = computed(() => formatEventDateTime(event))

const photos = computed(() => (event.media ?? []).filter((photo) => !!photo.url))

const paragraphs = computed(() =>
  (event.description ?? '')
    .split(/\r?\n/)
    .map((line) => line.trim())
    .filter(Boolean)
)
</script>

<style scoped>
.event-card {
  background-color: #ffffff;
  border-radius: 1rem;
  box-shadow: 0 2px 12px rgba(102, 29, 117, 0.07);
  transition: box-shadow 0.2s;
  overflow: hidden;
  height: 100%;
}
.event-card:hover {
  box-shadow: 0 6px 24px rgba(102, 29, 117, 0.13);
}

.event-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  text-align: left;
}

.event-thumb {
  width: 72px;
  height: 72px;
  border-radius: 0.75rem;
  object-fit: cover;
  flex-shrink: 0;
}

.event-thumb--empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #f0e8f1;
}

.event-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background-color: #f0e8f1;
  color: #661d75;
  font-family: "Nunito", sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
}

.event-body {
  display: grid;
  transition: grid-template-rows 0.35s ease;
}

.event-text {
  line-height: 1.7;
}

.event-cover {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 0.75rem;
  display: block;
}

@media (min-width: 1024px) {
  .event-cover {
    height: 280px;
  }
}
</style>