designtopack/src/components/project/brief/AddImages.vue

<template>
  <section class="h-full | flex flex-col" style="--row-gap: var(--space-32)">
    <header
      class="project-details | flex items-baseline | bg-white | rounded-2xl | p-16 | w-full"
    >
      <div class="project-details__description | flex-1">
        <h2 class="text-sm text-grey-700 | mb-8">Description du projet</h2>
        <textarea
          name="description"
          id="description"
          placeholder="Ajoutez une description générale de votre projet…"
          rows="3"
          class="border border-grey-200 | rounded-xl | p-16 | w-full"
        ></textarea>
      </div>
      <div class="project-details__filters | flex-1">
        <h2 class="text-sm text-grey-700 | mb-8">Filtrer par tags</h2>
        <div class="flex" style="gap: var(--space-8)">
          <button class="btn btn--sm btn--grey" id="all">Voir tout</button>
          <button class="btn btn--sm btn--primary">Bouchon</button>
          <button class="btn btn--sm btn--primary">Bouton Poussoir</button>
          <button class="btn btn--sm btn--primary">Coloris & Nuances</button>
          <button class="btn btn--sm btn--primary">DA Globale</button>
          <button class="btn btn--sm btn--primary">Forme & Design</button>
          <button class="btn btn--sm btn--primary">Matériaux & Textures</button>
          <button class="btn btn--sm btn--primary">Parachèvements</button>
        </div>
      </div>
    </header>
    <!-- <div class="h-full | masonry">
      <button
        data-icon="upload"
        class="flex flex-col | bg-white | border border-grey-200 | text-grey-800 | font-medium | rounded-2xl"
      >
        Ajouter une ou plusieurs images
      </button>
    </div> -->
    <div class="h-full | masonry">
      <button
        class="flex flex-col | bg-white | border border-grey-200 | text-grey-800 | font-medium | rounded-2xl"
      >
        <FileUpload
          name="demo[]"
          url="/api/upload"
          @upload="onAdvancedUpload($event)"
          :multiple="true"
          accept="image/*"
          :maxFileSize="1000000"
        >
          <template #empty>
            <span>Drag and drop files to here to upload.</span>
          </template>
        </FileUpload>
      </button>
      <Toast />
    </div>
    <figure class="image">
      <span class="tag | btn btn--sm">Tag</span>
      <img
        src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/6ed93d6950-1725442486/d82f18573c439d6edd434ffca62471a7.png"
        alt=""
      />
    </figure>
    <figure class="image">
      <span class="tag | btn btn--sm">Tag</span>
      <img
        src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/7b0fcc5012-1725442486/37a038883c87973036232aa0e43f6da2.png"
        alt=""
      />
    </figure>
    <figure class="image">
      <span class="tag | btn btn--sm">Tag</span>
      <img
        src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/1bbe051c5a-1725442486/0c41d3266e9ce2872f30608cceb28239.png"
        alt=""
      />
    </figure>
    <figure class="image">
      <span class="tag | btn btn--sm">Tag</span>
      <img
        src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/6ed93d6950-1725442486/d82f18573c439d6edd434ffca62471a7.png"
        alt=""
      />
    </figure>
    <figure class="image">
      <span class="tag | btn btn--sm">Tag</span>
      <img
        src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/7b0fcc5012-1725442486/37a038883c87973036232aa0e43f6da2.png"
        alt=""
      />
    </figure>
    <figure class="image">
      <span class="tag | btn btn--sm">Tag</span>
      <img
        src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/1bbe051c5a-1725442486/0c41d3266e9ce2872f30608cceb28239.png"
        alt=""
      />
    </figure>
  </section>
</template>

<script setup>
import Toast from "primevue/toast";
import FileUpload from "primevue/fileupload";
import { useToast } from "primevue/usetoast";

const toast = useToast();

const onAdvancedUpload = () => {
  toast.add({
    severity: "info",
    summary: "Success",
    detail: "File Uploaded",
    life: 3000,
  });
};
</script>