88 lines
2.9 KiB
Vue
88 lines
2.9 KiB
Vue
<template>
|
|
<div class="mb-10">
|
|
<div>
|
|
<h3
|
|
class="text-gray-800 text-3xl text-center mt-5 mb-2 mr-3 MvAamu"
|
|
style="font-weight: 100;"
|
|
>
|
|
ފަހުގެ ޙަބަރުތަށް
|
|
</h3>
|
|
</div>
|
|
|
|
<div class="container mx-auto">
|
|
<div class="flex md:-mx-4 flex-row-reverse flex-wrap mb-7 md:px-0">
|
|
<div
|
|
class="w-1/2 md:w-1/4 px-4 py-4 flex-grow"
|
|
v-for="story in recentStories"
|
|
:key="story.id"
|
|
>
|
|
<a :href="'/article/' + story.id">
|
|
<div
|
|
class="w-full h-auto overflow-hidden relative rounded"
|
|
>
|
|
<img :src="story.featured_image" />
|
|
</div>
|
|
</a>
|
|
<div class="w-full h-auto text-right overflow-hidden mt-3">
|
|
<a
|
|
:href="'/article/' + story.id"
|
|
class="text-md leading-9 font-semibold text-right text-gray-700 py-3 MvTyper hover:underline"
|
|
style="direction:rtl;"
|
|
v-text="story.title"
|
|
></a>
|
|
<div class="flex items-center justify-end mt-3 mb-3">
|
|
<a :href="'/source/' + story.source.slug">
|
|
<div class="flex justify-end items-center">
|
|
<div>
|
|
<p
|
|
class="font-semibold text-gray-700 text-sm capitalize MvTyper"
|
|
v-text="story.source.name"
|
|
></p>
|
|
</div>
|
|
|
|
<img
|
|
:src="story.source.logo"
|
|
class="h-10 w-10 rounded-full ml-1 object-cover"
|
|
/>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<span class="text-gray-600 text-xs ml-1">
|
|
{{ story.published_date | moment("calendar") }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "recent-stories",
|
|
|
|
data() {
|
|
return {
|
|
recentStories: []
|
|
};
|
|
},
|
|
|
|
mounted() {
|
|
axios
|
|
.get("api/recent")
|
|
.then(response => {
|
|
this.recentStories = response.data.data;
|
|
})
|
|
.catch(error => {
|
|
console.log(error);
|
|
});
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.dark-img {
|
|
filter: brightness(90%);
|
|
}
|
|
</style>
|