dify

dify/web/app/components/base/radio/ui.tsx

@@ -0,0 +1,37 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import cn from '@/utils/classnames'
+
+type Props = {
+  isChecked: boolean
+  disabled?: boolean
+  onCheck?: (event: React.MouseEvent<HTMLDivElement>) => void
+  className?: string
+}
+
+const RadioUI: FC<Props> = ({
+  isChecked,
+  disabled = false,
+  onCheck,
+  className,
+}) => {
+  return (
+    <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',
+        className,
+      )}
+      onClick={(event) => {
+        if (disabled) return
+        onCheck?.(event)
+      }}
+    />
+  )
+}
+export default React.memo(RadioUI)