From 46aa03f8cbee91a9b31ff2bc27a4db0a3c44a66e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9B=90=EB=8D=94?= <wonderbotsupport@naver.com>
Date: Thu, 11 Feb 2021 20:59:22 +0900
Subject: [PATCH] feat: added toggle component

---
 components/Toggle.tsx | 13 +++++++++++++
 1 file changed, 13 insertions(+)
 create mode 100644 components/Toggle.tsx

diff --git a/components/Toggle.tsx b/components/Toggle.tsx
new file mode 100644
index 0000000..c4c318e
--- /dev/null
+++ b/components/Toggle.tsx
@@ -0,0 +1,13 @@
+const Toggle = ({ checked, onChange }:ToggleProps):JSX.Element => {
+	return <button className='relative inline-block w-10 mr-2 align-middle select-none outline-none' onClick={onChange} onKeyPress={onChange}>
+		<input type='checkbox' checked={checked} className='absolute block w-6 h-6 rounded-full bg-white border-4 border-transparent appearance-none cursor-pointer outline-none checked:right-0'/>
+		<span className={`block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer ${checked ? 'bg-koreanbots-blue' : ''}`}></span>
+	</button>
+}
+
+interface ToggleProps {
+  checked: boolean,
+	onChange(): void
+}
+
+export default Toggle
\ No newline at end of file