add Switch example

Author: gioboa

apps/qwik-demo-app/src/routes/Switch/SwitchLeading/index.tsx

@@ -0,0 +1,23 @@
+import { component$, useSignal } from '@builder.io/qwik';
+import { SfSwitch } from 'qwik-storefront-ui';
+
+export default component$(() => {
+  const checkedStateSignal = useSignal(false);
+  return (
+    <>
+      <label class="flex items-center">
+        <SfSwitch
+          checked={checkedStateSignal.value}
+          value="value-1"
+          onChange$={(event) => {
+            checkedStateSignal.value = event.target.checked;
+          }}
+        />
+        <span class="text-base ml-[10px] text-gray-900 cursor-pointer font-body">
+          Label
+        </span>
+      </label>
+      <span class="text-xs mt-0.5 ml-12 block text-gray-500">Help text</span>
+    </>
+  );
+});

apps/qwik-demo-app/src/routes/Switch/SwitchTrailing/index.tsx

@@ -0,0 +1,23 @@
+import { component$, useSignal } from '@builder.io/qwik';
+import { SfSwitch } from 'qwik-storefront-ui';
+
+export default component$(() => {
+  const checkedStateSignal = useSignal(false);
+  return (
+    <>
+      <label class="flex items-center justify-between">
+        <span class="text-base text-gray-900 cursor-pointer font-body">
+          Label
+        </span>
+        <SfSwitch
+          checked={checkedStateSignal.value}
+          value="value-1"
+          onChange$={(event) => {
+            checkedStateSignal.value = event.target.checked;
+          }}
+        />
+      </label>
+      <span class="text-xs mt-0.5 block text-gray-500">Help text</span>
+    </>
+  );
+});

apps/qwik-demo-app/src/routes/Switch/SwitchWithoutLabel/index.tsx

@@ -0,0 +1,15 @@
+import { component$, useSignal } from '@builder.io/qwik';
+import { SfSwitch } from 'qwik-storefront-ui';
+
+export default component$(() => {
+  const checkedStateSignal = useSignal(false);
+  return (
+    <SfSwitch
+      checked={checkedStateSignal.value}
+      value="value-1"
+      onChange$={(event) => {
+        checkedStateSignal.value = event.target.checked;
+      }}
+    />
+  );
+});