2024-01-23 19:31:56 +08:00
|
|
|
'use client'
|
|
|
|
import type { FC } from 'react'
|
|
|
|
import React from 'react'
|
2024-07-09 15:05:40 +08:00
|
|
|
import cn from '@/utils/classnames'
|
2024-01-23 19:31:56 +08:00
|
|
|
|
|
|
|
type Props = {
|
|
|
|
isChecked: boolean
|
2025-06-27 15:56:38 +08:00
|
|
|
disabled?: boolean
|
2025-07-04 15:30:08 +08:00
|
|
|
onCheck?: (event: React.MouseEvent<HTMLDivElement>) => void
|
2025-06-30 14:19:14 +08:00
|
|
|
className?: string
|
2024-01-23 19:31:56 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
const RadioUI: FC<Props> = ({
|
|
|
|
isChecked,
|
2025-06-27 15:56:38 +08:00
|
|
|
disabled = false,
|
|
|
|
onCheck,
|
2025-06-30 14:19:14 +08:00
|
|
|
className,
|
2024-01-23 19:31:56 +08:00
|
|
|
}) => {
|
|
|
|
return (
|
2025-06-27 15:56:38 +08:00
|
|
|
<div
|
|
|
|
className={cn(
|
|
|
|
'size-4 rounded-full',
|
|
|
|
isChecked && !disabled && 'border-[5px] border-components-radio-border-checked hover:border-components-radio-border-checked-hover',
|
|
|
|
!isChecked && !disabled && 'border border-components-radio-border hover:border-components-radio-border-hover',
|
|
|
|
isChecked && disabled && 'border-[5px] border-components-radio-border-checked-disabled',
|
|
|
|
!isChecked && disabled && 'border border-components-radio-border-disabled bg-components-radio-bg-disabled',
|
|
|
|
!disabled && 'bg-components-radio-bg shadow-xs shadow-shadow-shadow-3 hover:bg-components-radio-bg-hover',
|
2025-06-30 14:19:14 +08:00
|
|
|
className,
|
2025-06-27 15:56:38 +08:00
|
|
|
)}
|
2025-07-04 15:30:08 +08:00
|
|
|
onClick={(event) => {
|
2025-06-30 14:19:14 +08:00
|
|
|
if (disabled) return
|
2025-07-04 15:30:08 +08:00
|
|
|
onCheck?.(event)
|
2025-06-27 15:56:38 +08:00
|
|
|
}}
|
|
|
|
/>
|
2024-01-23 19:31:56 +08:00
|
|
|
)
|
|
|
|
}
|
|
|
|
export default React.memo(RadioUI)
|