40 lines
888 B
TypeScript
40 lines
888 B
TypeScript
import React from 'react'
|
|
import { Tooltip, Text, useColorMode } from '@chakra-ui/react'
|
|
import { useTranslation } from 'react-i18next'
|
|
|
|
interface ShortTextProps {
|
|
text: string
|
|
maxLength?: number
|
|
}
|
|
|
|
export const ShortText = ({ text, maxLength = 30 }: ShortTextProps) => {
|
|
const { t } = useTranslation()
|
|
const { colorMode } = useColorMode()
|
|
|
|
if (!text) {
|
|
return <Text>{t('journal.pl.common.noData')}</Text>
|
|
}
|
|
|
|
if (text.length <= maxLength) {
|
|
return <Text>{text}</Text>
|
|
}
|
|
|
|
const shortText = `${text.substring(0, maxLength)}...`
|
|
|
|
return (
|
|
<Tooltip
|
|
label={text}
|
|
fontSize="sm"
|
|
bg={colorMode === 'dark' ? 'gray.700' : 'white'}
|
|
color={colorMode === 'dark' ? 'white' : 'gray.800'}
|
|
boxShadow="md"
|
|
borderRadius="md"
|
|
p={2}
|
|
hasArrow
|
|
>
|
|
<Text>{shortText}</Text>
|
|
</Tooltip>
|
|
)
|
|
}
|
|
|
|
export default ShortText
|