55 lines
1.4 KiB
TypeScript
55 lines
1.4 KiB
TypeScript
import { Box, VStack, HStack } from '../elements/LayoutPrimitives'
|
|
import { StyledText } from '../elements/StyledText'
|
|
import { CoverImage } from '../elements/CoverImage'
|
|
import { ArticleSubtitle } from './ArticleSubtitle'
|
|
|
|
|
|
type ShareArticleViewProps = {
|
|
url: string
|
|
title: string
|
|
imageURL?: string
|
|
author?: string
|
|
description?: string
|
|
originalArticleUrl: string
|
|
publishedAt: string
|
|
}
|
|
|
|
export function ShareArticleView(props: ShareArticleViewProps): JSX.Element {
|
|
return (
|
|
<HStack
|
|
alignment='start'
|
|
distribution='start'
|
|
css={{
|
|
background: 'white',
|
|
width: '100%',
|
|
p: '10px 0px 10px 0px',
|
|
|
|
boxShadow: 'rgb(120 123 134 / 12%) 0px 4px 18px'
|
|
}}>
|
|
{props.imageURL && (
|
|
<CoverImage
|
|
src={props.imageURL}
|
|
alt='Preview Image'
|
|
width={120}
|
|
height={120}
|
|
onError={(e) => {
|
|
(e.target as HTMLElement).style.display = 'none'
|
|
}}
|
|
/>
|
|
)}
|
|
<VStack >
|
|
<Box css={{ pl: '16px', width: '100%', color: 'black', }}>
|
|
<StyledText style='shareTitle'>{props.title}</StyledText>
|
|
<ArticleSubtitle
|
|
style='shareSubtitle'
|
|
hideButton={true}
|
|
author={props.author}
|
|
rawDisplayDate={props.publishedAt}
|
|
href={props.originalArticleUrl}
|
|
/>
|
|
</Box>
|
|
</VStack>
|
|
</HStack>
|
|
)
|
|
}
|