dify

dify/web/app/components/base/radio-card/simple/index.tsx

@@ -0,0 +1,45 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import s from './style.module.css'
+import cn from '@/utils/classnames'
+
+type Props = {
+  className?: string
+  title: string | React.JSX.Element | null
+  description: string
+  isChosen: boolean
+  onChosen: () => void
+  chosenConfig?: React.ReactNode
+  icon?: React.JSX.Element
+  extra?: React.ReactNode
+}
+
+const RadioCard: FC<Props> = ({
+  title,
+  description,
+  isChosen,
+  onChosen,
+  icon,
+  extra,
+}) => {
+  return (
+    <div
+      className={cn(s.item, isChosen && s.active)}
+      onClick={onChosen}
+    >
+      <div className='flex px-3 py-2'>
+        {icon}
+        <div>
+          <div className='flex items-center justify-between'>
+            <div className='text-sm font-medium leading-5 text-gray-900'>{title}</div>
+            <div className={s.radio}></div>
+          </div>
+          <div className='text-xs font-normal leading-[18px] text-gray-500'>{description}</div>
+        </div>
+      </div>
+      {extra}
+    </div>
+  )
+}
+export default React.memo(RadioCard)

dify/web/app/components/base/radio-card/simple/style.module.css

@@ -0,0 +1,25 @@
+.item {
+  @apply relative rounded-xl border border-gray-100 cursor-pointer;
+  background-color: #fcfcfd;
+}
+
+.item.active {
+  border-width: 1.5px;
+  border-color: #528BFF;
+  box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);
+}
+
+.item:hover {
+  background-color: #ffffff;
+  border-color: #B2CCFF;
+  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+}
+
+.radio {
+  @apply w-4 h-4 border-[2px] border-gray-200 rounded-full;
+}
+
+.item.active .radio {
+  border-width: 5px;
+  border-color: #155EEF;
+}