UI

resources/js/components/TopicFilter.vue

@@ -1,11 +1,14 @@
 <template>
     <div class="mb-10 border-t mt-5">
-        <div>
-            <h3
+        <div class="flex flex-col items-center">
+                <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 class="border-b-2 w-32" :class="color"></div>
+            
         </div>
 
         <div class="container mx-auto">
@@ -72,6 +75,7 @@ export default {
     props: {
         topics: String,
         label: String,
+        color: String,
         per_page: {
             default: 8,
             type: Number

resources/views/home.blade.php

@@ -26,9 +26,11 @@
 
 <recent-stories></recent-stories>
 
-<topic-filter topics="{{implode(',',config('karudhaas.topic_filters.covid19')) }}" label="ކޮރޯނާވައިރަހުގެ އަދާހަމަ" :per_page="6">
+<topic-filter topics="{{implode(',',config('karudhaas.topic_filters.covid19.keys')) }}"
+    label="ކޮރޯނާވައިރަހުގެ އަދާހަމަ" :per_page="6" color="{{config('karudhaas.topic_filters.covid19.color')}}">
 </topic-filter>
 
-<topic-filter topics="{{implode(',',config('karudhaas.topic_filters.sports')) }}" label="ކުޅިވަރުގެ އަދާހަމަ" :per_page="6">
+<topic-filter topics="{{implode(',',config('karudhaas.topic_filters.sports.keys')) }}" label="ކުޅިވަރުގެ އަދާހަމަ"
+    :per_page="6" color="{{config('karudhaas.topic_filters.sports.color')}}">
 </topic-filter>
 @endsection