Files
site/resources/js/Shared/FeedList/Images.vue
2025-04-21 16:03:20 +02:00

69 lines
1.8 KiB
Vue

<template>
<div class="shadow-classic rounded-md bg-indigo-200 p-3 md:px-5 md:py-7">
<feed-header @onRemoveFeed='onRemoveFeed' :created_at='entity.created_at_humans' :user='user' />
<div class="mt-3 md:mt-6 feed-body">
<div class="mb-3 md:mb-6 text-gray text-sm md:text-base">
<div @click.stop="">
{{entity.body}}
</div>
<feed-paid-block
@onReplaceFeed='onReplaceFeed'
:is_paid='entity.is_paid'
:user_id='user.id'
:price='entity.price'
:feed_id='feed_id'
:paid_open='entity.paid_open'
/>
</div>
<div class="grid gap-1 md:gap-3 grid-cols-2 md:grid-cols-[repeat(auto-fit,minmax(280px,1fr))]">
<div v-for="media in entity.collection_medias" :key="media.id">
<img class="w-full h-full object-cover" :src="media.url" alt="">
</div>
</div>
</div>
<feed-footer
@likeFeed='likeFeed'
:likes='entity.likes'
:liked='entity.liked'
:comments='entity.comments'
/>
</div>
</template>
<script>
import FeedHeader from "@/Shared/FeedList/FeedHeader";
import FeedFooter from "@/Shared/FeedList/FeedFooter";
import FeedPaidBlock from "@/Shared/FeedList/FeedPaidBlock";
export default {
components: {
FeedHeader,
FeedFooter,
FeedPaidBlock,
},
emits: ["likeFeed", "onRemoveFeed"],
props: {
entity: Object,
user: Object,
feed_id: Number,
},
methods: {
onReplaceFeed(data) {
this.entity.collection_medias = data.collection;
this.entity.preview = data.preview;
this.entity.paid_open = 1;
},
onRemoveFeed() {
this.$emit("onRemoveFeed", this.feed_id);
},
likeFeed() {
this.$emit("likeFeed");
},
},
};
</script>