91 lines
3.2 KiB
Vue
91 lines
3.2 KiB
Vue
<template>
|
|
<div>
|
|
<div>
|
|
<h3
|
|
class="text-2xl font-bold text-gray-800 mt-3 mb-4 text-right MvAamu"
|
|
>
|
|
ފަހުގެ ޙަބަރުތަށް
|
|
</h3>
|
|
</div>
|
|
|
|
<div class="flex justify-end">
|
|
<!-- post cards -->
|
|
<div class="w-full lg:w-2/3">
|
|
<div v-for="story in recentStories" :key="story.id">
|
|
<router-link
|
|
:to="{ name: 'article.show', params: { id: story.id } }"
|
|
class="block w-full lg:flex mb-10 shadow rounded-lg"
|
|
>
|
|
<div
|
|
class="bg-white rounded px-4 flex flex-col justify-between leading-normal"
|
|
>
|
|
<div>
|
|
<div
|
|
class="mt-5 text-gray-700 font-semibold text-2xl mb-2 text-right MvAamu"
|
|
style="direction:rtl;"
|
|
v-text="story.title"
|
|
></div>
|
|
|
|
<div
|
|
class="flex items-center justify-end mt-3 mb-2"
|
|
>
|
|
<p
|
|
class="font-semibold text-gray-700 text-sm capitalize MvTyper"
|
|
v-text="story.source.name"
|
|
></p>
|
|
<p class="text-gray-600 text-xs ml-1">
|
|
—
|
|
{{
|
|
story.published_date
|
|
| moment("calendar")
|
|
}}
|
|
</p>
|
|
</div>
|
|
|
|
<p
|
|
class="text-gray-700 text-base text-right MvTyper"
|
|
style="direction:rtl;"
|
|
>
|
|
{{ story.body[0] }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="h-48 lg:w-48 flex-none bg-cover text-center overflow-hidden opacity-75 rounded-lg"
|
|
:style="{
|
|
'background-image':
|
|
'url(' + story.featured_image + ')'
|
|
}"
|
|
:title="story.meta.title"
|
|
></div>
|
|
</router-link>
|
|
</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>
|