Topic front end

resources/js/components/DiscoverTopics.vue

@@ -1,20 +1,20 @@
 <template>
     <div class="border-b">
         <div>
-            <h2 class="text-center text-2xl font-bold text-gray-800 MvAamu">
+            <h2 class="text-gray-800 font-bold text-3xl text-center mt-3 mb-2 MvAamu">
                ތަފާތު މައުޟޫޢުތައް
             </h2>
         </div>
 
         <div class="flex flex-wrap justify-center">
-            <a
+            <router-link
+                :to="{ name: 'topic.show', params: { slug: topic.slug } }"
                 v-for="topic in topics"
                 :key="topic.id"
-                href="#"
                 class="text-sm font-medium border border-gray-700 py-1 px-3 rounded-full mr-2 mt-2 mb-4 hover:bg-green-100 MvTyper"
                 style="color:#4A5568;"
                 v-text="topic.name"
-            ></a>
+            ></router-link>
         </div>
     </div>
 </template>

resources/js/components/RecentStories.vue

@@ -2,7 +2,7 @@
     <div>
         <div>
             <h3
-                class="text-2xl font-bold text-gray-800 mt-3 mb-4 text-right MvAamu"
+                class="text-gray-800 font-bold text-3xl text-right mt-3 mr-3 MvAamu"
             >
                 ފަހުގެ ޙަބަރުތަށް
             </h3>
@@ -21,7 +21,7 @@
                         >
                             <div>
                                 <div
-                                    class="mt-5 text-gray-700 font-semibold text-2xl mb-2 text-right MvAamu"
+                                    class="mt-5 text-gray-700 font-semibold text-2xl mb-2 text-right MvTyper hover:underline"
                                     style="direction:rtl;"
                                     v-text="story.title"
                                 ></div>
@@ -52,7 +52,7 @@
                         </div>
 
                         <div
-                            class="h-48 lg:w-48 flex-none bg-cover text-center overflow-hidden opacity-75 rounded-lg"
+                            class="h-48 lg:w-48 flex-none bg-cover text-center overflow-hidden opacity-75 rounded-lg object-right"
                             :style="{
                                 'background-image':
                                     'url(' + story.featured_image + ')'

resources/js/pages/Topic.vue

@@ -0,0 +1,59 @@
+<template>
+    <div>
+       <section class="mx-auto max-w-6xl py-5">
+    <div class="flex flex-col">
+        <div class="flex flex-col md:flex-row justify-center items-center">
+            <div class="transition-all ease-in-out duration-1000 flex flex-col justify-center"></div>
+            <div class="transition-all ease-in-out duration-1000 flex flex-col justify-center"></div>
+            <div class="transition-all ease-in-out duration-1000 flex flex-col justify-center"></div>
+        </div>
+        <div class="flex flex-col md:flex-row justify-center items-center">
+            <div class="transition-all ease-in-out duration-1000 flex flex-col justify-center">
+                <div slot="middle-right" class="max-w-xs">
+                    <div class="flex flex-col justify-center h-48 p-3">
+                        <div class="text-5xl font-bold text-gray-800 mb-2 text-center MvAamu" v-text="topic.name"></div>
+                        <div class="text-sm my-3 MvTyper text-center leading-6" style="direction:rtl;"> {{topic.name}} އާއިބެހޭ މަޢުލޫމާތުތަށް އެއްތަންކުރެވިފައި</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2 mb-10 mt-8">
+
+            <div 
+            class="transition-all ease-in-out duration-1000 flex flex-col justify-center mr-0 md:mr-2"
+            v-for="article in articles"
+            :key="article.id"
+            >
+                <div slot="bottom-left" class="max-w-xs">
+                    <div class="p-5 shadow-md m-2 mt-4"><img class="object-scale-down h-30" :src="article.featured_image" :alt="article.meta.title">
+                        <div class="text-xs font-bold uppercase text-teal-700 text-right mt-1 mb-2 MvTyper" v-text="article.source.name"></div>
+                        <div class="text-xl font-bold mb-2 MvAamu text-right" v-text="article.title"></div>
+                    </div>
+                </div>
+            </div>
+
+        
+
+        </div>
+    </div>
+</section> 
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            topic: [],
+            articles: []
+        }
+    },
+
+    mounted() {
+         axios.get(`/api/topic/${this.$route.params.slug}`).then(response => {
+           this.topic = response.data.topic;
+           this.articles = response.data.articles;
+        });
+    },
+}
+</script>

resources/js/routes.js

@@ -1,5 +1,6 @@
 import Home from './pages/Home';
 import Article from './pages/Article';
+import Topic from './pages/Topic';
 
 export default {
     mode: 'history',
@@ -13,6 +14,11 @@ export default {
             path: '/article/:id',
             component: Article,
             name: 'article.show'
+        },
+        {
+            path: '/topic/:slug',
+            component: Topic,
+            name : 'topic.show'
         }
     ]
 };