[#47] ♻️ Add layout prop to Label component for row and col

Author: yongb2n

src/components/common/label/Label.tsx

@@ -6,20 +6,30 @@ export interface LabelProps
   extends React.LabelHTMLAttributes<HTMLLabelElement> {
   required?: boolean
   labelText?: string
+  layout?: 'col' | 'row'
 }
 
 export const Label = ({
   required = false,
   labelText,
+  layout = 'col',
   htmlFor,
   children,
   className = '',
 }: LabelProps): JSX.Element => {
-  const labelClass = clsx('flex flex-col text-body3 font-medium', className)
+  const labelClass = clsx(
+    'flex text-body3 font-medium',
+    layout === 'col' ? 'flex-col' : 'flex-row',
+    className
+  )
+  const labelTextClass = clsx(
+    'flex items-center',
+    layout === 'col' ? 'mb-4' : ''
+  )
 
   return (
     <label htmlFor={htmlFor} className={labelClass}>
-      <div className='mb-4 flex items-center'>
+      <div className={labelTextClass}>
         <span className='font-medium text-gray-600'>{labelText}</span>
         {required && <Highlight>*</Highlight>}
       </div>