フォームのバリデーションとニコ連携の画面変更 (#090) (#355)

Reviewed-on: #355
Co-authored-by: miteruzo <miteruzo@naver.com>
Co-committed-by: miteruzo <miteruzo@naver.com>

frontend/src/components/common/Label.tsx

@@ -1,32 +1,39 @@
 import React from 'react'
 
+import { cn } from '@/lib/utils'
+
 import type { FC } from 'react'
 
 type Props = { children:  React.ReactNode
-               checkBox?: { label:    string
-                            checked:  boolean
-                            onChange: (event: React.ChangeEvent<HTMLInputElement>) => void } }
+	       checkBox?: { label:    string
+			    checked:  boolean
+			    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void }
+	       invalid?:  boolean }
 
 
-const Label: FC<Props> = ({ children, checkBox }) => {
+const Label: FC<Props> = ({ children, checkBox, invalid }: Props) => {
+  const labelClassName = cn ('block font-semibold mb-1',
+			     invalid && 'text-red-700 dark:text-red-300')
+
   if (!(checkBox))
     {
       return (
-          <label className="block font-semibold mb-1">
-            {children}
-          </label>)
+	  <label className={labelClassName}>
+	    {children}
+	  </label>)
     }
 
   return (
       <div className="flex gap-2 mb-1">
-        <label className="flex-1 block font-semibold">{children}</label>
-        <label className="flex items-center block gap-1">
-          <input type="checkbox"
-                 checked={checkBox.checked}
-                 onChange={checkBox.onChange}/>
-          {checkBox.label}
-        </label>
+	<label className="flex-1 block font-semibold">{children}</label>
+	<label className="flex items-center block gap-1">
+	  <input type="checkbox"
+		 checked={checkBox.checked}
+		 onChange={checkBox.onChange}/>
+	  {checkBox.label}
+	</label>
       </div>)
 }
 
+
 export default Label