Последняя версия с сервера прошлого разработчика

resources/js/Shared/Edit/CreatedMediaItem.vue

@@ -0,0 +1,68 @@
+<template>
+
+<div>
+    <div v-if="type === 'images'" class="bg-indigo-100 overflow-hidden">
+        <img :class="{ 'blur-sm': classActive }" class="object-contain h-48 w-full" :src="media.url" alt="">
+    </div>
+    <div v-if="type === 'videos'" class="overflow-hidden">
+        <video :class="{ 'blur-sm': classActive }" class="object-contain h-48 w-full" :src="media.url" controls></video>
+    </div>
+    <div v-if="type === 'musics'" class="overflow-hidden">
+        <div :class="{ 'blur-sm': classActive }" class="border border-indigo-100 flex flex-col items-center p-4">
+            <MusicNoteIcon class="flex-shrink-0 w-12 h-12 text-indigo-300" />
+            <div class="text-base text-gray font-medium">{{media.name}} / {{media.time}}</div>
+        </div>
+    </div>
+
+    <button
+        v-if="edit"
+        :class="[classActive ? 'bg-green' : 'bg-pink']"
+        class="block text-sm text-white w-full p-1"
+        type="button" @click="stateToggle(media.id)">
+        <span v-show="!classActive">Удалить</span>
+        <span v-show="classActive">Восстановить</span>
+    </button>
+</div>
+
+</template>
+
+<script>
+import { MusicNoteIcon } from "@heroicons/vue/solid";
+export default {
+  components: {
+    MusicNoteIcon,
+  },
+  props: {
+    media: Object,
+    edit: {
+      type: Boolean,
+      default: true,
+    },
+    type: {
+      type: String,
+      default: "images",
+    },
+  },
+  emits: ["addRemoveId"],
+  data() {
+    return {
+      activeItemId: 0,
+    };
+  },
+  methods: {
+    stateToggle(id) {
+      if (this.activeItemId === 0) {
+        this.activeItemId = id;
+      } else {
+        this.activeItemId = 0;
+      }
+      this.$emit("addRemoveId", id);
+    },
+  },
+  computed: {
+    classActive() {
+      return this.media.id === this.activeItemId;
+    },
+  },
+};
+</script>