From 47f3b9a739296512635ce4cf6f36537f50e820fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9B=90=EB=8D=94?= <wonderbotsupport@naver.com>
Date: Sun, 31 Jan 2021 12:46:16 +0900
Subject: [PATCH] feat: added label

---
 components/Form/Label.tsx | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 components/Form/Label.tsx

diff --git a/components/Form/Label.tsx b/components/Form/Label.tsx
new file mode 100644
index 0000000..78908e6
--- /dev/null
+++ b/components/Form/Label.tsx
@@ -0,0 +1,33 @@
+const Label = ({ For, children, label, labelDesc, error=null, grid=true, short=false, required=false }:LabelProps):JSX.Element => {
+	return <>
+		<label className={grid ? 'grid grid-cols-1 md:grid-cols-4 gap-2 my-4' : 'inline-flex items-center'} htmlFor={For}>
+			{
+				label && <div className='col-span-1 text-sm'>
+					<h3 className='text-lg font-bold text-discord-blurple'>{label}
+						{
+							required && <span className='text-base font-semibold align-text-top text-red-500'> *</span>
+						}
+					</h3>
+					{labelDesc}
+				</div>
+			}
+			<div className={short ? 'col-span-1' : 'col-span-3'}>
+				{children}
+				<div className='text-red-500 text-xs font-light mt-1'>{error}</div>
+			</div>
+		</label>
+	</>
+}
+
+interface LabelProps { 
+  For: string
+  children: JSX.Element | JSX.Element[]
+  label?: string
+  labelDesc?: string | JSX.Element
+  error?: string | null
+  grid?: boolean
+  short?: boolean
+  required?: boolean
+}
+
+export default Label
\ No newline at end of file