73 lines
1.7 KiB
TypeScript
73 lines
1.7 KiB
TypeScript
import { SpanBox, VStack } from '../../elements/LayoutPrimitives'
|
|
|
|
type FallbackImageProps = {
|
|
title: string
|
|
width: string
|
|
height: string
|
|
fontSize: string
|
|
}
|
|
|
|
export const GridFallbackImage = (props: FallbackImageProps): JSX.Element => {
|
|
return (
|
|
<VStack
|
|
distribution="center"
|
|
alignment="center"
|
|
css={{
|
|
width: props.width,
|
|
height: props.height,
|
|
fontSize: '16px',
|
|
fontFamily: 'FuturaBold',
|
|
padding: '40px',
|
|
borderRadius: '4px',
|
|
color: '$thFallbackImageForeground',
|
|
backgroundColor: '$thFallbackImageBackground',
|
|
}}
|
|
>
|
|
<SpanBox
|
|
css={{
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
wordBreak: 'break-word',
|
|
display: '-webkit-box',
|
|
'-webkit-line-clamp': '2',
|
|
'-webkit-box-orient': 'vertical',
|
|
}}
|
|
>
|
|
{props.title}
|
|
</SpanBox>
|
|
</VStack>
|
|
)
|
|
}
|
|
|
|
export const ListFallbackImage = (props: FallbackImageProps): JSX.Element => {
|
|
return (
|
|
<VStack
|
|
distribution="center"
|
|
alignment="center"
|
|
css={{
|
|
width: props.width,
|
|
height: props.height,
|
|
fontSize: '16px',
|
|
fontFamily: 'FuturaBold',
|
|
padding: '5px',
|
|
borderRadius: '4px',
|
|
color: '$thFallbackImageForeground',
|
|
backgroundColor: '$thFallbackImageBackground',
|
|
}}
|
|
>
|
|
<SpanBox
|
|
css={{
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
wordBreak: 'break-word',
|
|
display: '-webkit-box',
|
|
'-webkit-line-clamp': '2',
|
|
'-webkit-box-orient': 'vertical',
|
|
}}
|
|
>
|
|
{props.title.substring(0, 3).toLocaleUpperCase()}
|
|
</SpanBox>
|
|
</VStack>
|
|
)
|
|
}
|