✨ Add reusable Blade components for inputs and layouts: FilePond, navigation groups, and notification buttons

resources/views/components/input/filepond.blade.php

@@ -0,0 +1,30 @@
+<div
+    wire:ignore
+    x-data
+    x-init="
+        FilePond.registerPlugin(
+          FilePondPluginImagePreview,
+          FilePondPluginImageExifOrientation,
+          FilePondPluginFileValidateSize,
+          FilePondPluginImageEdit
+        );
+        FilePond.setOptions({
+            labelIdle: '{{ 'Drag & Drop Deiner Dateien oder <span class="filepond--label-action"> in Ordner suchen </span>' }}',
+            allowMultiple: {{ isset($attributes['multiple']) ? 'true' : 'false' }},
+            server: {
+                process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
+                    @this.upload('{{ $attributes['wire:model'] }}', file, load, error, progress)
+                },
+                revert: (filename, load) => {
+                    @this.removeUpload('{{ $attributes['wire:model'] }}', filename, load)
+                },
+                load: (source, load, error, progress, abort, headers) => {
+                  @this.load('{{ $attributes['wire:model'] }}', load, error, progress, abort, headers)
+                },
+            },
+        });
+        FilePond.create($refs.input);
+    "
+>
+    <input type="file" x-ref="input" name="{{ $attributes['name'] }}">
+</div>

resources/views/components/input/group.blade.php

@@ -0,0 +1,13 @@
+@props([
+    'for',
+    'label',
+])
+<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-700 sm:pt-5">
+    <label for="{{ $for }}"
+           class="block text-sm font-medium text-gray-100 sm:mt-px sm:pt-2">
+        {{ $label }}
+    </label>
+    <div class="mt-1 sm:mt-0 sm:col-span-2">
+        {{ $slot }}
+    </div>
+</div>

resources/views/components/input/simple-mde.blade.php

@@ -0,0 +1,53 @@
+<div
+    wire:ignore
+    x-data="{
+        value: $wire.entangle('{{ $model }}'),
+        init() {
+            this.$nextTick(() => {
+                setTimeout(() => {
+                    let editor = new EasyMDE({
+                        element: this.$refs.editor,
+                        lineNumbers: true,
+                        uploadImage: false,
+                        spellChecker: false,
+                        showIcons: [
+                            'heading',
+                            'heading-smaller',
+                            'heading-bigger',
+                            'heading-1',
+                            'heading-2',
+                            'heading-3',
+                            'code',
+                            'table',
+                            'quote',
+                            'strikethrough',
+                            'unordered-list',
+                            'ordered-list',
+                            'clean-block',
+                            'horizontal-rule',
+                            'undo',
+                            'redo',
+                            //'upload-image',
+                        ],
+                    });
+
+                    editor.value(this.value);
+
+                    editor.codemirror.on('change', () => {
+                        this.value = editor.value();
+                    });
+                }, 100); // Adjust the delay as needed
+            });
+        },
+    }"
+    class="w-full"
+>
+    <div class="prose max-w-none">
+        <textarea x-ref="editor"></textarea>
+    </div>
+    <style>
+        .EasyMDEContainer {
+            background-color: white;
+        }
+    </style>
+</div>