Initial commit

resources/views/components/gallery-field.blade.php

@@ -0,0 +1,34 @@
+<div x-data="GalleryManager()" x-init="init(@js($oldPaths))">
+    <x-form-field-title name="Screenshots" helper="At least 1 Screenshot required, Maximum 20." required="{{ $required ? 'true' : 'false' }}" />
+    <div class="form-group main-image-grid">
+        <div class="form-upload" style="flex:1;" :class="{ 'disabled': isFull }">
+            <input type="file" id="gallery-field" accept="image/png, image/jpeg, image/webp" multiple :disabled="isFull" @change="handleSubmitFiles($event)">
+            <div class="form-upload-placeholder level">
+                <i data-lucide="file-archive" size="36" style="margin-bottom:15px;color:var(--text2)"></i>
+                <div style="font-size: 1.1rem;color:var(--text);margin-bottom:5px;">
+                    Click or drag'n drop files here.
+                </div>
+                <div style="font-size:0.85rem;color:var(--text2);">
+                    Accepted: PNG, JPG or WebP
+                </div>
+            </div>
+        </div>
+        <div class="form-gallery form-group level" style="flex:4;">
+            <template x-for="(image,i) in images" :key="image.serverFilePath">
+                <div class="gallery-item">
+                    <div class="form-image-preview-wrap">
+                        <img :src="image.preview" :alt="image.name">
+                        <button type="button" class="form-image-remove" @click="handleRemoveFile(i)">
+                            X
+                        </button>
+                    </div>
+                </div>
+            </template>
+        </div>
+    </div>
+
+    <template x-for="(image, i) in images" :key="image.serverFilePath">
+        <input type="hidden" name="gallery[]" :value="image.serverFilePath">
+    </template>
+
+</div>