みてるぞ
750aa40e8e
Reviewed-on: #355 Co-authored-by: miteruzo <miteruzo@naver.com> Co-committed-by: miteruzo <miteruzo@naver.com>
40 行
925 B
TypeScript
40 行
925 B
TypeScript
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 }
|
|
invalid?: boolean }
|
|
|
|
|
|
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={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>
|
|
</div>)
|
|
}
|
|
|
|
|
|
export default Label
|