Designs and API Routes

resources/js/components/DiscoverTopics.vue

@@ -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>