initial import

resources/js/Components/StyleSelector.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="context-menu-overlay" @click.self="$emit('close')">
+    <div class="style-selector" :style="{ top: `${position.y}px`, left: `${position.x}px` }">
+      <div class="style-selector-header">
+        <span class="back-arrow" @click="$emit('back')">&larr;</span>
+        <h3>Verfügbare Stile</h3>
+      </div>
+      <div class="styles-list">
+        <div
+          v-for="style in styles"
+          :key="style.id"
+          class="style-item"
+          @click="$emit('styleSelected', style)"
+        >
+          <img :src="'/storage/' + style.preview_image" :alt="style.title" class="style-thumbnail" />
+          <div class="style-details">
+            <h4>{{ style.title }}</h4>
+            <p>{{ style.description }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import axios from 'axios';
+import { ref, onMounted } from 'vue';
+
+const styles = ref([]);
+
+const fetchStyles = () => {
+  axios.get('/api/styles')
+    .then(response => {
+      styles.value = response.data;
+    })
+    .catch(error => {
+      console.error('Error fetching styles:', error);
+    });
+};
+
+onMounted(() => {
+  fetchStyles();
+});
+
+const props = defineProps({
+  position: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emits = defineEmits(['styleSelected', 'back', 'close']);
+</script>
+
+<style scoped>
+.context-menu-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5); /* Halbdurchsichtiger Hintergrund */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 999;
+}
+
+.style-selector {
+  background: white;
+  border: 1px solid #ccc;
+  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  max-width: 80%;
+  max-height: 80%;
+  overflow: hidden;
+  position: absolute; /* Positionierung innerhalb des Overlays */
+}
+
+.style-selector-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  margin-bottom: 20px;
+  padding: 10px;
+  border-bottom: 1px solid #eee;
+}
+
+.style-selector-header h3 {
+  margin: 0;
+  color: #333;
+}
+
+.back-arrow {
+  position: absolute;
+  left: 10px;
+  font-size: 1.5em;
+  cursor: pointer;
+  padding: 5px;
+}
+
+.back-arrow:hover {
+  color: #007bff;
+}
+
+.styles-list {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  padding: 10px;
+  overflow-y: auto;
+}
+
+.style-item {
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.style-item:hover {
+  background-color: #eef;
+}
+
+.style-thumbnail {
+  width: 80px;
+  height: 80px;
+  object-fit: cover;
+  border-radius: 4px;
+  margin-right: 15px;
+}
+
+.style-details h4 {
+  margin: 0;
+  color: #007bff;
+}
+
+.style-details p {
+  margin: 5px 0 0;
+  font-size: 0.9em;
+  color: #666;
+}
+</style>