63 lines
2.3 KiB
TypeScript
63 lines
2.3 KiB
TypeScript
'use client'
|
|
|
|
import React, { useState } from 'react'
|
|
import { CheckboxProps } from '@/app/types'
|
|
import { HiQuestionMarkCircle } from 'react-icons/hi'
|
|
|
|
const CheckboxInput = ({
|
|
handleChange,
|
|
label,
|
|
name,
|
|
checked,
|
|
info,
|
|
enabledText,
|
|
disabledText,
|
|
}: CheckboxProps) => {
|
|
const [showTooltip, setShowTooltip] = useState(false)
|
|
return (
|
|
<div className="space-y-3">
|
|
<label className="mb-2 block text-sm font-medium text-gray-500" htmlFor={name}>
|
|
{label}
|
|
</label>
|
|
<div className="flex items-center space-x-3">
|
|
<label className="relative inline-flex cursor-pointer items-center">
|
|
<input
|
|
type="checkbox"
|
|
id={name}
|
|
checked={checked || false}
|
|
onChange={handleChange}
|
|
className="peer sr-only"
|
|
/>
|
|
<div className="peer peer-checked:bg-orange h-6 w-11 rounded-full bg-gray-200 peer-focus:outline-none after:absolute after:start-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white rtl:peer-checked:after:-translate-x-full"></div>
|
|
<span
|
|
className={`ms-3 text-sm select-none ${
|
|
checked ? 'font-medium text-green-600' : 'text-gray-700'
|
|
}`}
|
|
>
|
|
{checked ? `${enabledText}` : `${disabledText}`}
|
|
</span>
|
|
</label>
|
|
<div className="relative flex items-center">
|
|
<button
|
|
type="button"
|
|
className="text-gray-400 hover:text-gray-600 focus:outline-none"
|
|
onMouseEnter={() => setShowTooltip(true)}
|
|
onMouseLeave={() => setShowTooltip(false)}
|
|
onClick={() => setShowTooltip(!showTooltip)}
|
|
>
|
|
<HiQuestionMarkCircle className="h-5 w-5" />
|
|
</button>
|
|
{showTooltip && (
|
|
<div className="absolute bottom-full left-1/2 z-10 mb-3 w-max max-w-xs -translate-x-1/2 rounded-xl bg-white px-4 py-2 text-center text-sm text-gray-700 shadow-lg">
|
|
{info}
|
|
<div className="absolute -bottom-2 left-1/2 h-2 w-2 -translate-x-1/2 rotate-45 transform bg-white"></div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default CheckboxInput
|