Topic FIlter component

public/mix-manifest.json

@@ -1,5 +1,5 @@
 {
-    "/js/app.js": "/js/app.js?id=112a156dd0400264ea0f",
+    "/js/app.js": "/js/app.js?id=90bce64bc62cb09d3d29",
     "/css/app.css": "/css/app.css?id=68dfaea3ff29afe7eab0",
     "/js/manifest.js": "/js/manifest.js?id=3c768977c2574a34506e",
     "/js/vendor.js": "/js/vendor.js?id=aa27c0f3cc35e93603fe"

resources/js/app.js

@@ -9,6 +9,7 @@ import DiscoverTopics from "./components/DiscoverTopics";
 import RecentStories from "./components/RecentStories";
 import AvailableSources from './components/AvailableSources';
 import SourceView from './components/SourceView';
+import TopicFilter from './components/TopicFilter';
 import NewsLetter from './components/NewsLetter';
 
 Turbolinks.start();
@@ -25,6 +26,7 @@ let app = new Vue({
         RecentStories,
         AvailableSources,
         SourceView,
+        TopicFilter,
         NewsLetter
     }
 });

resources/js/components/TopicFilter.vue

@@ -0,0 +1,100 @@
+<template>
+   <div class="mb-10 border-t mt-5">
+        <div>
+            <h3
+                class="text-gray-800 text-3xl text-center mt-5 mb-2 mr-3 MvAamu"
+                style="font-weight: 100;"
+                v-text="label"
+            >
+            </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="article in articles"
+                    :key="article.id"
+                >
+                    <a :href="`/article/${article.source.slug}/${article.guid}`">
+                        <div
+                            class="w-full h-auto overflow-hidden relative rounded"
+                        >
+                            <img :src="article.featured_image" />
+                        </div>
+                    </a>
+                    <div class="w-full h-auto text-right overflow-hidden mt-3">
+                        <a
+                            :href="`/article/${article.source.slug}/${article.guid}`"
+                            class="text-md leading-9 font-semibold text-right text-gray-700 py-3 MvTyper hover:underline"
+                            style="direction:rtl;"
+                            v-text="article.title"
+                        ></a>
+                        <div class="flex items-center justify-end mt-3 mb-3">
+                            <a :href="'/source/' + article.source.slug">
+                                <div class="flex justify-end items-center">
+                                    <div>
+                                        <p
+                                            class="font-semibold text-gray-600 text-sm capitalize MvTyper"
+                                            v-text="article.source.name"
+                                        ></p>
+                                    </div>
+
+                                    <img
+                                        :src="article.source.logo"
+                                        class="h-10 w-10 rounded-full ml-1 object-cover"
+                                    />
+                                </div>
+                            </a>
+                        </div>
+                        <p
+                            class="ml-1 text-gray-600 text-right MvTyper"
+                            style="direction:rtl; font-size:13px;"
+                        >
+                            {{ article.published_date | dhivehiDate }}
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import * as moment from "moment";
+
+export default {
+    name: "topic-filter",
+    props: ['topic','label'],
+
+    data() {
+        return {
+            articles: []
+        }
+    },
+
+     filters: {
+        dhivehiDate: function(date) {
+            if (!date) return "";
+            moment.locale("dv");
+            return moment(date).format("Do MMMM YYYY  h:mm");
+        }
+    },
+
+    mounted() {
+        axios
+            .get(`api/topic/${this.topic}`)
+            .then(response => {
+                this.articles = response.data.articles.data;
+            })
+            .catch(error => {
+                console.log(error);
+            });
+    }
+
+}
+</script>
+<style>
+.dark-img {
+    filter: brightness(90%);
+}
+</style>