UI Updates

resources/js/components/TopicFilter.vue

@@ -1,12 +1,11 @@
 <template>
-   <div class="mb-10 border-t mt-5">
+    <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>
+            ></h3>
         </div>
 
         <div class="container mx-auto">
@@ -16,7 +15,11 @@
                     v-for="article in articles"
                     :key="article.id"
                 >
-                    <a :href="`/article/${article.source.slug}/${article.guid}`">
+                    <a
+                        :href="
+                            `/article/${article.source.slug}/${article.guid}`
+                        "
+                    >
                         <div
                             class="w-full h-auto overflow-hidden relative rounded"
                         >
@@ -25,7 +28,9 @@
                     </a>
                     <div class="w-full h-auto text-right overflow-hidden mt-3">
                         <a
-                            :href="`/article/${article.source.slug}/${article.guid}`"
+                            :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"
@@ -65,17 +70,21 @@ import * as moment from "moment";
 export default {
     name: "topic-filter",
     props: {
-        topics : String,
-        label : String
+        topics: String,
+        label: String,
+        per_page: {
+            default: 8,
+            type: Number
+        }
     },
 
     data() {
         return {
             articles: []
-        }
+        };
     },
 
-     filters: {
+    filters: {
         dhivehiDate: function(date) {
             if (!date) return "";
             moment.locale("dv");
@@ -85,7 +94,7 @@ export default {
 
     mounted() {
         axios
-            .get(`api/topic_filter/?keys=${this.topics}`)
+            .get(`api/topic_filter/?keys=${this.topics}&per_page=${this.per_page}`)
             .then(response => {
                 this.articles = response.data.data;
             })
@@ -93,8 +102,7 @@ export default {
                 console.log(error);
             });
     }
-
-}
+};
 </script>
 <style>
 .dark-img {