File size: 1,557 Bytes
a8b3f00 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
import React from 'react'
import {
RiQuestionLine,
} from '@remixicon/react'
import Switch from '@/app/components/base/switch'
import Tooltip from '@/app/components/base/tooltip'
type Props = {
icon: any
title: any
tooltip?: any
value: any
description?: string
children?: React.ReactNode
disabled?: boolean
onChange?: (state: any) => void
onMouseEnter?: () => void
onMouseLeave?: () => void
}
const FeatureCard = ({
icon,
title,
tooltip,
value,
description,
children,
disabled,
onChange,
onMouseEnter,
onMouseLeave,
}: Props) => {
return (
<div
className='mb-1 p-3 border-t-[0.5px] border-l-[0.5px] border-effects-highlight rounded-xl bg-background-section-burn'
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
>
<div className='mb-2 flex items-center gap-2'>
{icon}
<div className='grow flex items-center text-text-secondary system-sm-semibold'>
{title}
{tooltip && (
<Tooltip
popupContent={tooltip}
>
<div className='ml-0.5 p-px'><RiQuestionLine className='w-3.5 h-3.5 text-text-quaternary' /></div>
</Tooltip>
)}
</div>
<Switch disabled={disabled} className='shrink-0' onChange={state => onChange?.(state)} defaultValue={value} />
</div>
{description && (
<div className='min-h-8 text-text-tertiary system-xs-regular line-clamp-2'>{description}</div>
)}
{children}
</div>
)
}
export default FeatureCard
|