fix pill classes

Author: lisa-thinkst

frontend_vue/src/components/base/BasePill.vue

@@ -1,6 +1,7 @@
 <template>
-    <p class="text-xs rounded-xl px-16 py-4 inline-block text-nowrap"
-        :class="`bg-${backgroundColour} text-${textColour}`"
+    <p
+        class="text-xs rounded-xl px-16 py-4 inline-block text-nowrap"
+        :class="getColourClasses(props.colour)"
     >
         <slot></slot>
     </p>
@@ -9,13 +10,20 @@
 <script setup lang="ts">
 
 const props = defineProps({
-  backgroundColour: {
+  colour: {
     type: String,
     default: 'grey'
   },
-  textColour: {
-    type: String,
-    default: 'white'
-  }
 });
+
+function getColourClasses(colour: string): string {
+  switch (colour) {
+    case 'grey':
+      return 'bg-grey-400 text-white';
+    // add more colours here as needed
+    default:
+      return 'bg-grey-400 text-white';
+  }
+}
+
 </script>