Regalamiunsorriso/faceai/apps/frontend/src/views/HomeView.vue

<script setup>
import LegacyHeader from '../components/LegacyHeader.vue';
import FaceAiFeedbackPanel from '../components/FaceAiFeedbackPanel.vue';
import FaceAiHeroCard from '../components/FaceAiHeroCard.vue';
import FaceAiUploadPanel from '../components/FaceAiUploadPanel.vue';
import { useFaceAiHome } from '../composables/useFaceAiHome.js';

const {
  activeSearch,
  activeSearchStatusLabel,
  busyLabel,
  canPickFile,
  canStartSearch,
  clearSelectedFile,
  currentLocale,
  errorMessage,
  fileInput,
  isDragging,
  isProcessingSearch,
  isWorking,
  loading,
  onDragEnter,
  onDragLeave,
  onDragOver,
  onDrop,
  onFileChange,
  openFilePicker,
  redirectUrl,
  selectedFile,
  selectedFileSizeLabel,
  session,
  simulatorUrl,
  statusLabel,
  submitSearch,
  t
} = useFaceAiHome();
</script>

<template>
  <main>
    <LegacyHeader />

    <div class="container my-3 faceai-page">
      <FaceAiHeroCard
        :session="session"
        :current-locale="currentLocale"
        :active-search-status-label="activeSearchStatusLabel"
        :t="t"
      />

      <div class="row mt-4">
        <div class="col-12">
          <FaceAiUploadPanel
            :loading="loading"
            :is-working="isWorking"
            :is-processing-search="isProcessingSearch"
            :session="session"
            :simulator-url="simulatorUrl"
            :busy-label="busyLabel"
            :can-pick-file="canPickFile"
            :is-dragging="isDragging"
            :selected-file="selectedFile"
            :selected-file-size-label="selectedFileSizeLabel"
            :can-start-search="canStartSearch"
            :file-input="fileInput"
            :t="t"
            @open-file-picker="openFilePicker"
            @file-change="onFileChange"
            @drag-enter="onDragEnter"
            @drag-over="onDragOver"
            @drag-leave="onDragLeave"
            @drop="onDrop"
            @clear-file="clearSelectedFile"
            @submit-search="submitSearch"
          />
        </div>
      </div>

      <FaceAiFeedbackPanel
        :status-label="statusLabel"
        :is-working="isWorking"
        :busy-label="busyLabel"
        :active-search="activeSearch"
        :redirect-url="redirectUrl"
        :error-message="errorMessage"
        :t="t"
      />
    </div>
  </main>
</template>

<style scoped>
.faceai-page {
  padding-bottom: 2rem;
}

@media (max-width: 767.98px) {
  .faceai-page {
    padding-bottom: 1.25rem;
  }
}
</style>