42 lines
1.5 KiB
Vue
42 lines
1.5 KiB
Vue
<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']);
|
|
|
|
console.log('StyledImageDisplay: image prop:', props.image);
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* Add any specific styles for the modal here if needed */
|
|
</style>
|