Designs and API Routes
This commit is contained in:
41
resources/js/components/DiscoverTopics.vue
Normal file
41
resources/js/components/DiscoverTopics.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div class="border-b">
|
||||
<div>
|
||||
<h2 class="text-center text-2xl font-bold text-gray-800 MvAamu">
|
||||
ތަފާތު މައުޟޫޢުތައް
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap justify-center">
|
||||
<a
|
||||
v-for="topic in topics"
|
||||
:key="topic.id"
|
||||
href="#"
|
||||
class="text-sm font-medium border border-gray-700 py-1 px-3 rounded-full text-grey-500 mr-2 mt-2 mb-4 hover:bg-green-100"
|
||||
v-text="topic.name"
|
||||
></a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "discover-topics",
|
||||
data() {
|
||||
return {
|
||||
topics: []
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
axios
|
||||
.get("api/topics")
|
||||
.then(response => {
|
||||
this.topics = response.data.data;
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
79
resources/js/components/RecentStories.vue
Normal file
79
resources/js/components/RecentStories.vue
Normal file
@@ -0,0 +1,79 @@
|
||||
<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">
|
||||
<a
|
||||
v-for="story in recentStories"
|
||||
:key="story.id"
|
||||
class="block w-full lg:flex mb-10 shadow rounded-lg"
|
||||
href="#"
|
||||
>
|
||||
|
||||
<div
|
||||
class="bg-white rounded px-4 flex flex-col justify-between leading-normal"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="mt-3 md:mt-0 text-gray-700 font-bold text-2xl mb-2 text-right MvAamu"
|
||||
style="direction:rtl;"
|
||||
>
|
||||
އައްޑޫން މީހަކު ޕޮޒިޓިވްވެއްޖެ
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-end mt-1 mb-2">
|
||||
<p
|
||||
class="font-semibold text-gray-700 text-sm capitalize"
|
||||
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;">
|
||||
ރާއްޖޭގައި ކޮވިޑްގެ ހާލަތު އިތުރަށް ގޯސްވަމުންދާއިރު ގިނަ ރަށްރަށުން ބަލި މީހުން ދަނީ ފެންނަމުންނެވެ.
|
||||
</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('https://images-01.avas.mv/post/big_RuM5p2M10OjKIYZf8SrS6aeHb.jpg')"
|
||||
title="deit is very important"
|
||||
></div>
|
||||
</a>
|
||||
</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>
|
||||
149
resources/js/components/TodaysPick.vue
Normal file
149
resources/js/components/TodaysPick.vue
Normal file
@@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<h3
|
||||
class="text-gray-800 font-bold text-3xl mb-2 MvAamu"
|
||||
style="direction: rtl;"
|
||||
>
|
||||
މިއަދުގެ ޙުލާސާ
|
||||
</h3>
|
||||
</div>
|
||||
<!-- featured section -->
|
||||
<div
|
||||
class="flex flex-wrap md:flex-no-wrap space-x-0 md:space-x-6 mb-5 border-b"
|
||||
>
|
||||
<!-- sub-main posts -->
|
||||
<div class="md:w-4/7">
|
||||
|
||||
<div
|
||||
v-for="subarticle in subarticles"
|
||||
:key="subarticle.id"
|
||||
class="rounded w-full flex flex-col md:flex-row mb-10"
|
||||
>
|
||||
<div class="bg-white rounded px-4">
|
||||
<span
|
||||
class="text-green-700 text-md font-normal hidden md:block text-right"
|
||||
v-text="subarticle.source.name"
|
||||
style="direction:rtl;"
|
||||
></span>
|
||||
|
||||
<div
|
||||
class="text-gray-600 text-md mt-1 flex justify-end items-center"
|
||||
>
|
||||
<svg
|
||||
class="h-4 w-4"
|
||||
viewBox="0 0 443.294 443.294"
|
||||
fill="currentColor"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M221.647 0C99.433 0 0 99.433 0 221.647s99.433 221.647 221.647 221.647 221.647-99.433 221.647-221.647S343.861 0 221.647 0zm0 415.588c-106.941 0-193.941-87-193.941-193.941s87-193.941 193.941-193.941 193.941 87 193.941 193.941-87 193.941-193.941 193.941z"
|
||||
/>
|
||||
<path
|
||||
d="M235.5 83.118h-27.706v144.265l87.176 87.176 19.589-19.589-79.059-79.059z"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<span class="ml-1" v-text="article.readtime"></span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="md:mt-0 text-gray-800 font-semibold text-xl mb-2 text-right"
|
||||
v-text="subarticle.title"
|
||||
style="direction:rtl;"
|
||||
></div>
|
||||
<p
|
||||
class="block md:hidden p-2 pl-0 pt-1 text-sm text-gray-600"
|
||||
>
|
||||
Wonder matter now can estate esteem assure fat
|
||||
roused. Am performed on existence as discourse is.
|
||||
Pleasure friendly at marriage blessing or
|
||||
</p>
|
||||
</div>
|
||||
<img
|
||||
:src="subarticle.featured_image"
|
||||
class="block md:hidden lg:block rounded-md h-64 md:h-32 m-4 md:m-0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- main post -->
|
||||
<div
|
||||
class="mb-4 lg:mb-0 p-4 lg:p-0 w-full md:w-4/7 relative rounded block"
|
||||
v-if="article"
|
||||
>
|
||||
<a href="#">
|
||||
<img
|
||||
:src="article.featured_image"
|
||||
class="rounded-md object-cover w-full h-3/4"
|
||||
/>
|
||||
</a>
|
||||
<div>
|
||||
<span
|
||||
class="flex justify-end text-green-700 text-md font-normal"
|
||||
v-text="article.source.name"
|
||||
></span>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<a href="#">
|
||||
<h1
|
||||
class="text-gray-800 text-3xl font-bold mt-2 mb-2 leading-tigh hover:underline text-right MvAamu"
|
||||
style="direction:rtl;"
|
||||
>
|
||||
އިންޑިއާއަށް ބޭހަށްދިޔަ 8 ދިވެހިން ޕޮޒިޓިވް
|
||||
</h1>
|
||||
</a>
|
||||
|
||||
<div class="text-gray-600 text-md mt-4 flex justify-end items-center">
|
||||
<p class="text-gray-600 text-right">
|
||||
{{ article.published_date | moment("calendar") }}
|
||||
‒
|
||||
</p>
|
||||
<span class="mr-1 ml-1" v-text="article.readtime"></span>
|
||||
<svg
|
||||
class="h-4 w-4"
|
||||
viewBox="0 0 443.294 443.294"
|
||||
fill="currentColor"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M221.647 0C99.433 0 0 99.433 0 221.647s99.433 221.647 221.647 221.647 221.647-99.433 221.647-221.647S343.861 0 221.647 0zm0 415.588c-106.941 0-193.941-87-193.941-193.941s87-193.941 193.941-193.941 193.941 87 193.941 193.941-87 193.941-193.941 193.941z"
|
||||
/>
|
||||
<path
|
||||
d="M235.5 83.118h-27.706v144.265l87.176 87.176 19.589-19.589-79.059-79.059z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- end featured section -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "todays-pick",
|
||||
data() {
|
||||
return {
|
||||
article: null,
|
||||
subarticles: []
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
axios
|
||||
.get("api/today")
|
||||
.then(response => {
|
||||
this.article = response.data.data[0];
|
||||
this.subarticles = response.data.data.slice(1, 5);
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user