knowledge base node
zxhlyh
1 year ago
parent
53f2882077
commit
abbba1d004
@ -0,0 +1,12 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="214" height="124" viewBox="0 0 214 124" fill="none">
|
||||||
|
<g opacity="0.5" filter="url(#filter0_f_6128_89310)">
|
||||||
|
<circle cx="26" cy="26" r="28" fill="#6172F3"/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<filter id="filter0_f_6128_89310" x="-162" y="-162" width="376" height="376" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||||
|
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||||
|
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||||
|
<feGaussianBlur stdDeviation="80" result="effect1_foregroundBlur_6128_89310"/>
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 638 B |
@ -0,0 +1,12 @@
|
|||||||
|
<svg width="220" height="220" viewBox="0 0 220 220" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g id="Effect" opacity="0.8" filter="url(#filter0_f_481_16338)">
|
||||||
|
<circle cx="32" cy="32" r="28" fill="#EF6820"/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<filter id="filter0_f_481_16338" x="-156" y="-156" width="376" height="376" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||||
|
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||||
|
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||||
|
<feGaussianBlur stdDeviation="80" result="effect1_foregroundBlur_481_16338"/>
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 610 B |
@ -0,0 +1,12 @@
|
|||||||
|
<svg width="220" height="220" viewBox="0 0 220 220" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g id="Effect" opacity="0.8" filter="url(#filter0_f_481_16453)">
|
||||||
|
<circle cx="32" cy="32" r="28" fill="#6938EF"/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<filter id="filter0_f_481_16453" x="-156" y="-156" width="376" height="376" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||||
|
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||||
|
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||||
|
<feGaussianBlur stdDeviation="80" result="effect1_foregroundBlur_481_16453"/>
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 610 B |
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="24" height="11" viewBox="0 0 24 11" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path id="Arrow Shape" d="M9.87868 1.12132C11.0503 -0.0502525 12.9497 -0.0502525 14.1213 1.12132L23.3137 10.3137H0.686292L9.87868 1.12132Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 258 B |
@ -0,0 +1,89 @@
|
|||||||
|
{
|
||||||
|
"icon": {
|
||||||
|
"type": "element",
|
||||||
|
"isRootNode": true,
|
||||||
|
"name": "svg",
|
||||||
|
"attributes": {
|
||||||
|
"xmlns": "http://www.w3.org/2000/svg",
|
||||||
|
"width": "214",
|
||||||
|
"height": "124",
|
||||||
|
"viewBox": "0 0 214 124",
|
||||||
|
"fill": "none"
|
||||||
|
},
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"type": "element",
|
||||||
|
"name": "g",
|
||||||
|
"attributes": {
|
||||||
|
"opacity": "0.5",
|
||||||
|
"filter": "url(#filter0_f_6128_89310)"
|
||||||
|
},
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"type": "element",
|
||||||
|
"name": "circle",
|
||||||
|
"attributes": {
|
||||||
|
"cx": "26",
|
||||||
|
"cy": "26",
|
||||||
|
"r": "28",
|
||||||
|
"fill": "#6172F3"
|
||||||
|
},
|
||||||
|
"children": []
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "element",
|
||||||
|
"name": "defs",
|
||||||
|
"attributes": {},
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"type": "element",
|
||||||
|
"name": "filter",
|
||||||
|
"attributes": {
|
||||||
|
"id": "filter0_f_6128_89310",
|
||||||
|
"x": "-162",
|
||||||
|
"y": "-162",
|
||||||
|
"width": "376",
|
||||||
|
"height": "376",
|
||||||
|
"filterUnits": "userSpaceOnUse",
|
||||||
|
"color-interpolation-filters": "sRGB"
|
||||||
|
},
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"type": "element",
|
||||||
|
"name": "feFlood",
|
||||||
|
"attributes": {
|
||||||
|
"flood-opacity": "0",
|
||||||
|
"result": "BackgroundImageFix"
|
||||||
|
},
|
||||||
|
"children": []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "element",
|
||||||
|
"name": "feBlend",
|
||||||
|
"attributes": {
|
||||||
|
"mode": "normal",
|
||||||
|
"in": "SourceGraphic",
|
||||||
|
"in2": "BackgroundImageFix",
|
||||||
|
"result": "shape"
|
||||||
|
},
|
||||||
|
"children": []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "element",
|
||||||
|
"name": "feGaussianBlur",
|
||||||
|
"attributes": {
|
||||||
|
"stdDeviation": "80",
|
||||||
|
"result": "effect1_foregroundBlur_6128_89310"
|
||||||
|
},
|
||||||
|
"children": []
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"name": "OptionCardEffectBlue"
|
||||||
|
}
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
// GENERATE BY script
|
||||||
|
// DON NOT EDIT IT MANUALLY
|
||||||
|
|
||||||
|
import * as React from 'react'
|
||||||
|
import data from './OptionCardEffectBlue.json'
|
||||||
|
import IconBase from '@/app/components/base/icons/IconBase'
|
||||||
|
import type { IconData } from '@/app/components/base/icons/IconBase'
|
||||||
|
|
||||||
|
const Icon = (
|
||||||
|
{
|
||||||
|
ref,
|
||||||
|
...props
|
||||||
|
}: React.SVGProps<SVGSVGElement> & {
|
||||||
|
ref?: React.RefObject<React.MutableRefObject<HTMLOrSVGElement>>;
|
||||||
|
},
|
||||||
|
) => <IconBase {...props} ref={ref} data={data as IconData} />
|
||||||
|
|
||||||
|
Icon.displayName = 'OptionCardEffectBlue'
|
||||||
|
|
||||||
|
export default Icon
|
||||||
@ -0,0 +1,90 @@
|
|||||||
|
{
|
||||||
|
"icon": {
|
||||||
|
"type": "element",
|
||||||
|
"isRootNode": true,
|
||||||
|
"name": "svg",
|
||||||
|
"attributes": {
|
||||||
|
"width": "220",
|
||||||
|
"height": "220",
|
||||||
|
"viewBox": "0 0 220 220",
|
||||||
|
"fill": "none",
|
||||||
|
"xmlns": "http://www.w3.org/2000/svg"
|
||||||
|
},
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"type": "element",
|
||||||
|
"name": "g",
|
||||||
|
"attributes": {
|
||||||
|
"id": "Effect",
|
||||||
|
"opacity": "0.8",
|
||||||
|
"filter": "url(#filter0_f_481_16338)"
|
||||||
|
},
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"type": "element",
|
||||||
|
"name": "circle",
|
||||||
|
"attributes": {
|
||||||
|
"cx": "32",
|
||||||
|
"cy": "32",
|
||||||
|
"r": "28",
|
||||||
|
"fill": "#EF6820"
|
||||||
|
},
|
||||||
|
"children": []
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "element",
|
||||||
|
"name": "defs",
|
||||||
|
"attributes": {},
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"type": "element",
|
||||||
|
"name": "filter",
|
||||||
|
"attributes": {
|
||||||
|
"id": "filter0_f_481_16338",
|
||||||
|
"x": "-156",
|
||||||
|
"y": "-156",
|
||||||
|
"width": "376",
|
||||||
|
"height": "376",
|
||||||
|
"filterUnits": "userSpaceOnUse",
|
||||||
|
"color-interpolation-filters": "sRGB"
|
||||||
|
},
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"type": "element",
|
||||||
|
"name": "feFlood",
|
||||||
|
"attributes": {
|
||||||
|
"flood-opacity": "0",
|
||||||
|
"result": "BackgroundImageFix"
|
||||||
|
},
|
||||||
|
"children": []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "element",
|
||||||
|
"name": "feBlend",
|
||||||
|
"attributes": {
|
||||||
|
"mode": "normal",
|
||||||
|
"in": "SourceGraphic",
|
||||||
|
"in2": "BackgroundImageFix",
|
||||||
|
"result": "shape"
|
||||||
|
},
|
||||||
|
"children": []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "element",
|
||||||
|
"name": "feGaussianBlur",
|
||||||
|
"attributes": {
|
||||||
|
"stdDeviation": "80",
|
||||||
|
"result": "effect1_foregroundBlur_481_16338"
|
||||||
|
},
|
||||||
|
"children": []
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"name": "OptionCardEffectOrange"
|
||||||
|
}
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
// GENERATE BY script
|
||||||
|
// DON NOT EDIT IT MANUALLY
|
||||||
|
|
||||||
|
import * as React from 'react'
|
||||||
|
import data from './OptionCardEffectOrange.json'
|
||||||
|
import IconBase from '@/app/components/base/icons/IconBase'
|
||||||
|
import type { IconData } from '@/app/components/base/icons/IconBase'
|
||||||
|
|
||||||
|
const Icon = (
|
||||||
|
{
|
||||||
|
ref,
|
||||||
|
...props
|
||||||
|
}: React.SVGProps<SVGSVGElement> & {
|
||||||
|
ref?: React.RefObject<React.MutableRefObject<HTMLOrSVGElement>>;
|
||||||
|
},
|
||||||
|
) => <IconBase {...props} ref={ref} data={data as IconData} />
|
||||||
|
|
||||||
|
Icon.displayName = 'OptionCardEffectOrange'
|
||||||
|
|
||||||
|
export default Icon
|
||||||
@ -0,0 +1,90 @@
|
|||||||
|
{
|
||||||
|
"icon": {
|
||||||
|
"type": "element",
|
||||||
|
"isRootNode": true,
|
||||||
|
"name": "svg",
|
||||||
|
"attributes": {
|
||||||
|
"width": "220",
|
||||||
|
"height": "220",
|
||||||
|
"viewBox": "0 0 220 220",
|
||||||
|
"fill": "none",
|
||||||
|
"xmlns": "http://www.w3.org/2000/svg"
|
||||||
|
},
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"type": "element",
|
||||||
|
"name": "g",
|
||||||
|
"attributes": {
|
||||||
|
"id": "Effect",
|
||||||
|
"opacity": "0.8",
|
||||||
|
"filter": "url(#filter0_f_481_16453)"
|
||||||
|
},
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"type": "element",
|
||||||
|
"name": "circle",
|
||||||
|
"attributes": {
|
||||||
|
"cx": "32",
|
||||||
|
"cy": "32",
|
||||||
|
"r": "28",
|
||||||
|
"fill": "#6938EF"
|
||||||
|
},
|
||||||
|
"children": []
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "element",
|
||||||
|
"name": "defs",
|
||||||
|
"attributes": {},
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"type": "element",
|
||||||
|
"name": "filter",
|
||||||
|
"attributes": {
|
||||||
|
"id": "filter0_f_481_16453",
|
||||||
|
"x": "-156",
|
||||||
|
"y": "-156",
|
||||||
|
"width": "376",
|
||||||
|
"height": "376",
|
||||||
|
"filterUnits": "userSpaceOnUse",
|
||||||
|
"color-interpolation-filters": "sRGB"
|
||||||
|
},
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"type": "element",
|
||||||
|
"name": "feFlood",
|
||||||
|
"attributes": {
|
||||||
|
"flood-opacity": "0",
|
||||||
|
"result": "BackgroundImageFix"
|
||||||
|
},
|
||||||
|
"children": []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "element",
|
||||||
|
"name": "feBlend",
|
||||||
|
"attributes": {
|
||||||
|
"mode": "normal",
|
||||||
|
"in": "SourceGraphic",
|
||||||
|
"in2": "BackgroundImageFix",
|
||||||
|
"result": "shape"
|
||||||
|
},
|
||||||
|
"children": []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "element",
|
||||||
|
"name": "feGaussianBlur",
|
||||||
|
"attributes": {
|
||||||
|
"stdDeviation": "80",
|
||||||
|
"result": "effect1_foregroundBlur_481_16453"
|
||||||
|
},
|
||||||
|
"children": []
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"name": "OptionCardEffectPurple"
|
||||||
|
}
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
// GENERATE BY script
|
||||||
|
// DON NOT EDIT IT MANUALLY
|
||||||
|
|
||||||
|
import * as React from 'react'
|
||||||
|
import data from './OptionCardEffectPurple.json'
|
||||||
|
import IconBase from '@/app/components/base/icons/IconBase'
|
||||||
|
import type { IconData } from '@/app/components/base/icons/IconBase'
|
||||||
|
|
||||||
|
const Icon = (
|
||||||
|
{
|
||||||
|
ref,
|
||||||
|
...props
|
||||||
|
}: React.SVGProps<SVGSVGElement> & {
|
||||||
|
ref?: React.RefObject<React.MutableRefObject<HTMLOrSVGElement>>;
|
||||||
|
},
|
||||||
|
) => <IconBase {...props} ref={ref} data={data as IconData} />
|
||||||
|
|
||||||
|
Icon.displayName = 'OptionCardEffectPurple'
|
||||||
|
|
||||||
|
export default Icon
|
||||||
@ -0,0 +1,27 @@
|
|||||||
|
{
|
||||||
|
"icon": {
|
||||||
|
"type": "element",
|
||||||
|
"isRootNode": true,
|
||||||
|
"name": "svg",
|
||||||
|
"attributes": {
|
||||||
|
"width": "24",
|
||||||
|
"height": "11",
|
||||||
|
"viewBox": "0 0 24 11",
|
||||||
|
"fill": "none",
|
||||||
|
"xmlns": "http://www.w3.org/2000/svg"
|
||||||
|
},
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"type": "element",
|
||||||
|
"name": "path",
|
||||||
|
"attributes": {
|
||||||
|
"id": "Arrow Shape",
|
||||||
|
"d": "M9.87868 1.12132C11.0503 -0.0502525 12.9497 -0.0502525 14.1213 1.12132L23.3137 10.3137H0.686292L9.87868 1.12132Z",
|
||||||
|
"fill": "currentColor"
|
||||||
|
},
|
||||||
|
"children": []
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"name": "ArrowShape"
|
||||||
|
}
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
// GENERATE BY script
|
||||||
|
// DON NOT EDIT IT MANUALLY
|
||||||
|
|
||||||
|
import * as React from 'react'
|
||||||
|
import data from './ArrowShape.json'
|
||||||
|
import IconBase from '@/app/components/base/icons/IconBase'
|
||||||
|
import type { IconData } from '@/app/components/base/icons/IconBase'
|
||||||
|
|
||||||
|
const Icon = (
|
||||||
|
{
|
||||||
|
ref,
|
||||||
|
...props
|
||||||
|
}: React.SVGProps<SVGSVGElement> & {
|
||||||
|
ref?: React.RefObject<React.MutableRefObject<HTMLOrSVGElement>>;
|
||||||
|
},
|
||||||
|
) => <IconBase {...props} ref={ref} data={data as IconData} />
|
||||||
|
|
||||||
|
Icon.displayName = 'ArrowShape'
|
||||||
|
|
||||||
|
export default Icon
|
||||||
@ -0,0 +1,62 @@
|
|||||||
|
import { useTranslation } from 'react-i18next'
|
||||||
|
import { RiQuestionLine } from '@remixicon/react'
|
||||||
|
import {
|
||||||
|
Economic,
|
||||||
|
HighQuality,
|
||||||
|
} from '@/app/components/base/icons/src/vender/knowledge'
|
||||||
|
import Tooltip from '@/app/components/base/tooltip'
|
||||||
|
import Slider from '@/app/components/base/slider'
|
||||||
|
import Input from '@/app/components/base/input'
|
||||||
|
import OptionCard from './option-card'
|
||||||
|
|
||||||
|
const IndexMethod = () => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div className='system-sm-semibold-uppercase mb-0.5 flex h-6 items-center text-text-secondary'>Index method</div>
|
||||||
|
<div className='space-y-1'>
|
||||||
|
<OptionCard
|
||||||
|
icon={<HighQuality className='h-[15px] w-[15px] text-util-colors-orange-orange-500' />}
|
||||||
|
title={t('datasetCreation.stepTwo.qualified')}
|
||||||
|
description={t('datasetSettings.form.indexMethodHighQualityTip')}
|
||||||
|
showHighlightBorder
|
||||||
|
></OptionCard>
|
||||||
|
<OptionCard
|
||||||
|
icon={<Economic className='h-[15px] w-[15px] text-text-tertiary' />}
|
||||||
|
title={t('datasetSettings.form.indexMethodEconomy')}
|
||||||
|
description={t('datasetSettings.form.indexMethodEconomyTip')}
|
||||||
|
showChildren
|
||||||
|
showHighlightBorder
|
||||||
|
>
|
||||||
|
<div className='flex items-center'>
|
||||||
|
<div className='flex grow items-center'>
|
||||||
|
<div className='system-xs-medium truncate text-text-secondary'>
|
||||||
|
Number of Keywords
|
||||||
|
</div>
|
||||||
|
<Tooltip
|
||||||
|
popupContent='number of keywords'
|
||||||
|
>
|
||||||
|
<RiQuestionLine className='ml-0.5 h-3.5 w-3.5 text-text-quaternary' />
|
||||||
|
</Tooltip>
|
||||||
|
</div>
|
||||||
|
<Slider
|
||||||
|
className='mr-3 w-24 shrink-0'
|
||||||
|
value={0}
|
||||||
|
onChange={() => {
|
||||||
|
console.log('change')
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
className='shrink-0'
|
||||||
|
wrapperClassName='shrink-0 w-[72px]'
|
||||||
|
type='number'
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</OptionCard>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default IndexMethod
|
||||||
@ -0,0 +1,104 @@
|
|||||||
|
import type { ReactNode } from 'react'
|
||||||
|
import { memo } from 'react'
|
||||||
|
import cn from '@/utils/classnames'
|
||||||
|
import Badge from '@/app/components/base/badge'
|
||||||
|
import { ArrowShape } from '@/app/components/base/icons/src/vender/knowledge'
|
||||||
|
import {
|
||||||
|
OptionCardEffectBlue,
|
||||||
|
OptionCardEffectOrange,
|
||||||
|
OptionCardEffectPurple,
|
||||||
|
} from '@/app/components/base/icons/src/public/knowledge'
|
||||||
|
|
||||||
|
const EffectMap = {
|
||||||
|
blue: <OptionCardEffectBlue className='absolute left-1 top-1 h-14 w-14 fill-util-colors-indigo-indigo-500 text-util-colors-indigo-indigo-500 opacity-80 blur-[80px]' />,
|
||||||
|
orange: <OptionCardEffectOrange className='absolute left-1 top-1 h-14 w-14 opacity-80 blur-[80px]' />,
|
||||||
|
purple: <OptionCardEffectPurple className='absolute left-1 top-1 h-14 w-14 opacity-80 blur-[80px]' />,
|
||||||
|
}
|
||||||
|
type OptionCardProps = {
|
||||||
|
showHighlightBorder?: boolean
|
||||||
|
showRadio?: boolean
|
||||||
|
radioIsActive?: boolean
|
||||||
|
icon?: ReactNode
|
||||||
|
title: string
|
||||||
|
description?: string
|
||||||
|
isRecommended?: boolean
|
||||||
|
children?: ReactNode
|
||||||
|
showChildren?: boolean
|
||||||
|
effectColor?: 'blue' | 'orange' | 'purple'
|
||||||
|
}
|
||||||
|
const OptionCard = ({
|
||||||
|
showHighlightBorder,
|
||||||
|
showRadio,
|
||||||
|
radioIsActive,
|
||||||
|
icon,
|
||||||
|
title,
|
||||||
|
description,
|
||||||
|
isRecommended,
|
||||||
|
children,
|
||||||
|
showChildren,
|
||||||
|
effectColor = 'blue',
|
||||||
|
}: OptionCardProps) => {
|
||||||
|
return (
|
||||||
|
<div className={cn(
|
||||||
|
'cursor-pointer rounded-xl border border-components-option-card-option-border bg-components-option-card-option-bg',
|
||||||
|
showHighlightBorder && 'border-[2px] border-components-option-card-option-selected-border',
|
||||||
|
)}>
|
||||||
|
<div className='relative flex p-2'>
|
||||||
|
{
|
||||||
|
showChildren && (
|
||||||
|
<ArrowShape className='absolute bottom-[-13px] left-[13px] h-4 w-4 text-components-panel-bg' />
|
||||||
|
)
|
||||||
|
}
|
||||||
|
{
|
||||||
|
showChildren && effectColor && EffectMap[effectColor]
|
||||||
|
}
|
||||||
|
{
|
||||||
|
icon && (
|
||||||
|
<div className='mr-1 shrink-0 p-[3px]'>
|
||||||
|
{icon}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
<div className='grow py-1'>
|
||||||
|
<div className='flex items-center'>
|
||||||
|
<div className='system-sm-medium flex grow items-center text-text-secondary'>
|
||||||
|
{title}
|
||||||
|
{
|
||||||
|
isRecommended && (
|
||||||
|
<Badge>
|
||||||
|
Recommend
|
||||||
|
</Badge>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
{
|
||||||
|
showRadio && (
|
||||||
|
<div className={cn(
|
||||||
|
'ml-2 h-4 w-4 shrink-0 rounded-full border border-components-radio-border bg-components-radio-bg',
|
||||||
|
radioIsActive && 'border-[5px] border-components-radio-border-checked',
|
||||||
|
)}>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
{
|
||||||
|
description && (
|
||||||
|
<div className='system-xs-regular mt-1 text-text-tertiary'>
|
||||||
|
{description}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{
|
||||||
|
children && showChildren && (
|
||||||
|
<div className='p-3'>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default memo(OptionCard)
|
||||||
Loading…
Reference in New Issue