aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/Toggle.svelte
diff options
context:
space:
mode:
authorAdrien Hopkins <[email protected]>2022-08-08 07:42:39 -0500
committerAdrien Hopkins <[email protected]>2022-08-08 07:42:39 -0500
commitb95a816f7b6b31087057efab1081194db75886be (patch)
tree48de265def768f24f402b23af0b1779f8f234db2 /src/components/Toggle.svelte
parentc287bc29267d41f65c9e29efe9bafddfdc64b28e (diff)
parentf4c85698d32ab1346dcdb75b4244d615a2178e40 (diff)
downloadcoinos-ui-b95a816f7b6b31087057efab1081194db75886be.tar.gz
coinos-ui-b95a816f7b6b31087057efab1081194db75886be.zip
Merge branch 'master' into i18n
Diffstat (limited to 'src/components/Toggle.svelte')
-rw-r--r--src/components/Toggle.svelte12
1 files changed, 12 insertions, 0 deletions
diff --git a/src/components/Toggle.svelte b/src/components/Toggle.svelte
new file mode 100644
index 00000000..85fd08d5
--- /dev/null
+++ b/src/components/Toggle.svelte
@@ -0,0 +1,12 @@
+<script>
+ export let id;
+ export let checked;
+ export let value;
+</script>
+
+<label for={id} class="inline-flex relative items-center mr-5 cursor-pointer">
+ <input type="checkbox" {value} {checked} {id} class="sr-only peer" />
+ <div
+ class="w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-green-600"
+ />
+</label>