From aa6054a84e27b513a210a54358cdd982237badf7 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 8 Dec 2022 17:03:49 +0100
Subject: [PATCH] Refactor Radio Group component, update styling

---
 client/src/components/ui/ItRadioGroup.vue | 56 +++++++++++++----------
 1 file changed, 31 insertions(+), 25 deletions(-)

diff --git a/client/src/components/ui/ItRadioGroup.vue b/client/src/components/ui/ItRadioGroup.vue
index 41a18997..6d93df53 100644
--- a/client/src/components/ui/ItRadioGroup.vue
+++ b/client/src/components/ui/ItRadioGroup.vue
@@ -1,19 +1,29 @@
 <template>
-  <RadioGroup :model-value="modelValue" @update:modelValue="$emit('update:modelValue', $event)"
-              class="mt-2 flex flex-row justify-between">
-    <RadioGroupLabel>{{ label }}</RadioGroupLabel>
-    <div class="flex justify-items-center space-x-4">
+  <RadioGroup
+    :model-value="modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    class="mt-2 flex flex-row justify-between"
+  >
+    <RadioGroupLabel class="flex-1">{{ label }}</RadioGroupLabel>
+    <div class="flex flex-1 justify-items-center space-x-4">
       <RadioGroupOption
         as="template"
         v-for="item in items"
         :key="item.id"
         v-slot="{ checked, active }"
-        :value="item.id"
+        class="flex-1"
+        :value="item.value"
       >
-        <div class="" :class="[
-            checked ? 'bg-blue-600 border-transparent text-white hover:bg-indigo-700' : 'bg-white border-gray-200 text-gray-900 hover:bg-gray-50',
+        <div
+          class=""
+          :class="[
+            checked
+              ? 'bg-blue-600 border-transparent text-white hover:bg-indigo-700'
+              : 'bg-white border-gray-200 text-gray-900 hover:bg-gray-50',
             active ? 'ring ring-offset-2 ring-indigo-500' : '',
-            'cursor-pointer focus:outline-none border rounded-md py-3 px-3 flex items-center justify-center text-sm font-medium uppercase']">
+            'cursor-pointer focus:outline-none border rounded-md py-3 px-3 flex items-center justify-center text-sm font-medium uppercase',
+          ]"
+        >
           <RadioGroupLabel as="span">
             {{ item.name }}
           </RadioGroupLabel>
@@ -21,26 +31,22 @@
       </RadioGroupOption>
     </div>
   </RadioGroup>
-
 </template>
 
 <script setup lang="ts">
-  interface RadioItem {
-    id: string;
-    name: string;
-  }
+import type { RadioItem } from "@/components/learningPath/feedback.types";
 
-  import {
-    RadioGroup,
-    RadioGroupDescription,
-    RadioGroupLabel,
-    RadioGroupOption,
-  } from "@headlessui/vue";
+import {
+  RadioGroup,
+  // RadioGroupDescription,
+  RadioGroupLabel,
+  RadioGroupOption,
+} from "@headlessui/vue";
 
-  const props = defineProps<{
-    modelValue: any,
-    items: RadioItem[],
-    label: string
-  }>();
-  defineEmits(['update:modelValue']);
+defineProps<{
+  modelValue: any;
+  items: RadioItem<any>[];
+  label: string;
+}>();
+defineEmits(["update:modelValue"]);
 </script>