File size: 1,332 Bytes
3459571 | 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 | import { Fragment, memo } from 'react'
import { Badge, Tooltip } from '@janhq/joi'
import { AlertTriangleIcon, InfoIcon } from 'lucide-react'
type Props = {
compact?: boolean
unit: string
}
const tooltipContent = `Your device doesn't have enough RAM to run this model. Consider upgrading your RAM or using a device with more memory capacity.`
const NotEnoughMemoryLabel = ({ unit, compact }: Props) => (
<>
{compact ? (
<div className="flex h-5 w-5 items-center">
<Tooltip
trigger={
<AlertTriangleIcon
size={14}
className="cursor-pointer text-[hsla(var(--destructive-bg))]"
/>
}
content={
<Fragment>
<b>Not enough RAM:</b> <span>{tooltipContent}</span>
</Fragment>
}
/>
</div>
) : (
<Badge theme="destructive" variant="soft">
<span className="line-clamp-1">Not enough {unit}</span>
<Tooltip
trigger={
<InfoIcon size={14} className="ml-2 flex-shrink-0 cursor-pointer" />
}
content={
<Fragment>
<b>Not enough RAM:</b> <span>{tooltipContent}</span>
</Fragment>
}
/>
</Badge>
)}
</>
)
export default memo(NotEnoughMemoryLabel)
|