UI

config/karudhaas.php

@@ -4,10 +4,21 @@ return [
 
     "topic_filters" => [
 
-        "covid19" => ["covid19", "covid-19", "corona_virus", "covid_19", "coronavirus"],
+        "covid19" => [
+            "description" => "",
+            "keys" =>   ["covid19", "covid-19", "corona_virus", "covid_19", "coronavirus"],
+            "color" => "border-red-500"
+        ],
+
+
         "sports" => [
-            "football", "sport", "kulhivaru", "maldives_national_football_tea", "football_association_of_maldiv", "local_sports", "spanish_league",
-            "english-premier-league", "spanish-la-liga", "real_madrid", "bayern-munich", "arsenal", "atletico_madrid", "chelsea", "united-victory", "manchester-united"
+            "description" => "",
+            "keys" => [
+                "football", "sport", "kulhivaru", "maldives_national_football_tea", "football_association_of_maldiv", "local_sports", "spanish_league",
+                "english-premier-league", "spanish-la-liga", "real_madrid", "bayern-munich", "arsenal", "atletico_madrid", "chelsea", "united-victory", "manchester-united"
+            ],
+            "color" => "border-blue-500"
+
         ]
     ]
 ];

public/mix-manifest.json

@@ -1,6 +1,6 @@
 {
-    "/js/app.js": "/js/app.js?id=a0d4e88c5aeb25127f6c",
-    "/css/app.css": "/css/app.css?id=68dfaea3ff29afe7eab0",
+    "/js/app.js": "/js/app.js?id=66ae1979773a1f43be8f",
+    "/css/app.css": "/css/app.css?id=e8d2c4edd54b4b15fb38",
     "/js/manifest.js": "/js/manifest.js?id=3c768977c2574a34506e",
     "/js/vendor.js": "/js/vendor.js?id=aa27c0f3cc35e93603fe"
 }

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