From b4c0dedd176cc6ebd6654b24328ade14b0b906e6 Mon Sep 17 00:00:00 2001
From: Alexander Bluhm <lamiy-develop@live.de>
Date: Fri, 19 Feb 2021 13:21:54 +0100
Subject: [PATCH] Added new examples for switch components (React, Vue) (#245)

* Added new example for switch component (React)

* Added new example for switch component (Vue)
---
 packages/@headlessui-react/README.md | 8 ++++----
 packages/@headlessui-vue/README.md   | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/@headlessui-react/README.md b/packages/@headlessui-react/README.md
index 0fcaf0cb0d..33c050100b 100644
--- a/packages/@headlessui-react/README.md
+++ b/packages/@headlessui-react/README.md
@@ -1286,12 +1286,12 @@ function NotificationsToggle() {
       onChange={setEnabled}
       className={`${
         enabled ? 'bg-blue-600' : 'bg-gray-200'
-      } relative inline-flex h-6 rounded-full w-8`}
+      } relative inline-flex items-center h-6 rounded-full w-11`}
     >
       <span className="sr-only">Enable notifications</span>
       <span
         className={`${
-          enabled ? 'translate-x-4' : 'translate-x-0'
+          enabled ? 'translate-x-6' : 'translate-x-1'
         } inline-block w-4 h-4 transform bg-white rounded-full`}
       />
     </Switch>
@@ -1320,11 +1320,11 @@ function NotificationsToggle() {
         onChange={setEnabled}
         className={`${
           enabled ? 'bg-blue-600' : 'bg-gray-200'
-        } relative inline-flex h-6 rounded-full w-8`}
+        } relative inline-flex items-center h-6 rounded-full w-11`}
       >
         <span
           className={`${
-            enabled ? 'translate-x-4' : 'translate-x-0'
+            enabled ? 'translate-x-6' : 'translate-x-1'
           } inline-block w-4 h-4 transform bg-white rounded-full`}
         />
       </Switch>
diff --git a/packages/@headlessui-vue/README.md b/packages/@headlessui-vue/README.md
index b7d420a8a0..f1b655e4b9 100644
--- a/packages/@headlessui-vue/README.md
+++ b/packages/@headlessui-vue/README.md
@@ -1093,13 +1093,13 @@ Switches are built using the `Switch` component. Optionally you can also use the
   <Switch
     as="button"
     v-model="switchValue"
-    class="relative inline-flex w-8 h-6 rounded-full"
+    class="relative inline-flex items-center h-6 rounded-full w-11"
     :class="switchValue ? 'bg-blue-600' : 'bg-gray-200'"
     v-slot="{ checked }"
   >
     <span
       class="inline-block w-4 h-4 transform bg-white rounded-full"
-      :class="{ 'translate-x-5': checked, 'translate-x-0': !checked }"
+      :class="{ 'translate-x-6': checked, 'translate-x-1': !checked }"
     />
   </Switch>
 </template>
@@ -1140,13 +1140,13 @@ Clicking the label will toggle the switch state, like you'd expect from a native
     <Switch
       as="button"
       v-model="switchValue"
-      class="relative inline-flex w-8 h-6 rounded-full"
+      class="relative inline-flex items-center h-6 rounded-full w-11"
       :class="switchValue ? 'bg-blue-600' : 'bg-gray-200'"
       v-slot="{ checked }"
     >
       <span
         class="inline-block w-4 h-4 transform bg-white rounded-full"
-        :class="{ 'translate-x-5': checked, 'translate-x-0': !checked }"
+        :class="{ 'translate-x-6': checked, 'translate-x-1': !checked }"
       />
     </Switch>
   </SwitchGroup>