From 040064c68bd9e81d495099c42cf4889d00df3043 Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Fri, 18 Aug 2023 10:44:11 +0200
Subject: [PATCH] Add PillRadioButton component

---
 .../components/modules/PillradioButton.vue    | 80 +++++++++++++++++++
 1 file changed, 80 insertions(+)
 create mode 100644 client/src/components/modules/PillradioButton.vue

diff --git a/client/src/components/modules/PillradioButton.vue b/client/src/components/modules/PillradioButton.vue
new file mode 100644
index 00000000..b4538619
--- /dev/null
+++ b/client/src/components/modules/PillradioButton.vue
@@ -0,0 +1,80 @@
+<template>
+  <div class="pill-radio">
+    <button
+      :class="['pill-radio__button', { 'pill-radio__button--active': item.id === selectedId }]"
+      v-for="item in items"
+      :key="item.id"
+      @click="selectButton(item.id)"
+    >
+      {{ item.label }}
+    </button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {ref, watch, PropType} from 'vue';
+
+
+  // const { items } = defineProps({
+  //   items: {
+  //     type: Array as PropType<{ id: number; label: string }[]>,
+  //     required: true
+  //   }
+  // });
+
+
+  const items = ref([
+    {id: 1, label: 'De'},
+    {id: 2, label: 'Fr'},
+    {id: 3, label: 'En'}
+  ])
+
+
+  const selectedId = ref(1)
+
+
+  function selectButton(id: number) {
+    selectedId.value = id
+  }
+
+
+</script>
+
+<style scoped lang="scss">
+
+
+  .pill-radio {
+    display: flex;
+    overflow: hidden;
+    height: 40px;
+
+
+    &__button {
+      flex: 1;
+      cursor: pointer;
+      background-color: #f0f0f0;
+
+      outline: none;
+      padding-left: 14px;
+      padding-right: 14px;
+      border: none;
+
+
+      &--active {
+        background-color: white;
+        border: solid silver 1px;
+      }
+    }
+
+    &__button:first-child {
+      border-top-left-radius: 50px;
+      border-bottom-left-radius: 50px;
+
+    }
+
+    &__button:last-child {
+      border-top-right-radius: 50px;
+      border-bottom-right-radius: 50px;
+    }
+  }
+</style>