<template>
    <div class="border-b">
        <div>
            <h2 class="text-gray-800 text-3xl text-center mt-3 mb-2 MvAamu"
                style="font-weight: 100;" 
                    >
               ތަފާތު މައުޟޫޢުތައް
            </h2>
        </div>

        <div class="flex flex-wrap justify-center">
            <a
                :href="'/topic/' + topic.slug"
                v-for="topic in topics"
                :key="topic.id"
                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>
        </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>
