117 lines
4.1 KiB
Vue
117 lines
4.1 KiB
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>
|