From 1d0726fc8b3dfcc50a409407e85fe6e7a9dcb27e Mon Sep 17 00:00:00 2001
From: Yohann Marchat <yohann.marchat@camptocamp.com>
Date: Wed, 6 Dec 2023 15:59:02 +0100
Subject: [PATCH] feat: toggle button

---
 lib/main.ts               |  2 ++
 lib/ui/UiToggleButton.vue | 30 ++++++++++++++++++++++++++++++
 2 files changed, 32 insertions(+)
 create mode 100644 lib/ui/UiToggleButton.vue

diff --git a/lib/main.ts b/lib/main.ts
index 005675f..50c5ba5 100644
--- a/lib/main.ts
+++ b/lib/main.ts
@@ -16,6 +16,7 @@ import UiRennesLogo from './ui/UiRennesLogo.vue'
 import UiLinkFooter from './ui/UiLinkFooter.vue'
 import IconSynchronize from './icons/IconSynchronize.vue'
 import UiButton from './ui/UiButton.vue'
+import UiToggleButton from './ui/UiToggleButton.vue'
 
 export {
   FooterArea,
@@ -34,4 +35,5 @@ export {
   UiRennesLogo,
   UiLinkFooter,
   IconSynchronize,
+  UiToggleButton,
 }
diff --git a/lib/ui/UiToggleButton.vue b/lib/ui/UiToggleButton.vue
new file mode 100644
index 0000000..45fcf92
--- /dev/null
+++ b/lib/ui/UiToggleButton.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+defineProps({
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+
+  state: {
+    type: Boolean,
+    default: false,
+  },
+})
+</script>
+
+<template>
+  <button
+    :disabled="disabled"
+    :class="{
+      'bg-slate-300 pl-0.5': !state,
+      'bg-black pl-5': state,
+    }"
+    class="transition-all duration-300 ease-in-out w-[42px] h-6 pr-5 py-0.5 rounded-[30px] justify-start items-start gap-2.5 inline-flex"
+  >
+    <div class="w-5 h-5 relative">
+      <div
+        class="w-5 h-5 left-0 top-0 absolute bg-white rounded-full shadow"
+      ></div>
+    </div>
+  </button>
+</template>