updated the readme

resources/js/Components/StyledImageDisplay.vue

@@ -0,0 +1,39 @@
+<template>
+    <div class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
+        <div class="bg-white p-4 rounded-lg shadow-lg max-w-3xl w-full text-center">
+            <h2 class="text-xl font-bold mb-4">{{ __('styled_image_display.title') }}</h2>
+            <img :src="image.path" alt="Styled Image" class="max-w-full h-auto mx-auto mb-4 rounded-md" />
+            <div class="flex justify-center space-x-4">
+                <button
+                    @click="$emit('keep', image)"
+                    class="px-6 py-2 bg-green-500 text-white rounded-md hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50"
+                >
+                    {{ __('styled_image_display.keep_button') }}
+                </button>
+                <button
+                    @click="$emit('delete', image)"
+                    class="px-6 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50"
+                >
+                    {{ __('styled_image_display.delete_button') }}
+                </button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+
+const props = defineProps({
+    image: {
+        type: Object,
+        required: true,
+    },
+});
+
+const emits = defineEmits(['keep', 'delete']);
+</script>
+
+<style scoped>
+/* Add any specific styles for the modal here if needed */
+</style>