98 lines
2.6 KiB
TypeScript
98 lines
2.6 KiB
TypeScript
import { VStack, HStack, SpanBox } from '../../elements/LayoutPrimitives'
|
|
import { StyledText } from '../../elements/StyledText'
|
|
import { removeHTMLTags } from '../ArticleSubtitle'
|
|
import { theme } from '../../tokens/stitches.config'
|
|
import { LabelChip } from '../../elements/LabelChip'
|
|
import type { LinkedItemCardProps } from './CardTypes'
|
|
import { ProgressBarVertical } from '../../elements/ProgressBarVertical'
|
|
|
|
//Styles
|
|
const ellipsisText = {
|
|
overflow: 'hidden',
|
|
display: '-webkit-box',
|
|
WebkitLineClamp: 1,
|
|
WebkitBoxOrient: 'vertical',
|
|
pl: '10px',
|
|
margin: 'auto 0',
|
|
}
|
|
|
|
export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
|
|
return (
|
|
<VStack
|
|
distribution="start"
|
|
alignment="start"
|
|
css={{
|
|
width: '100%',
|
|
}}
|
|
>
|
|
<HStack
|
|
alignment="start"
|
|
distribution="between"
|
|
css={{
|
|
width: '100%',
|
|
display: 'grid',
|
|
gridTemplateColumns: '0.01fr 1fr 2fr 150px',
|
|
gridTemplateRows: '1fr',
|
|
borderBottom: '1px solid $graySeparator',
|
|
height: '45px',
|
|
}}
|
|
>
|
|
<ProgressBarVertical
|
|
fillPercentage={props.item.readingProgressPercent}
|
|
fillColor={theme.colors.highlight.toString()}
|
|
backgroundColor={theme.colors.grayProgressBackground.toString()}
|
|
borderRadius={
|
|
props.item.readingProgressPercent === 100 ? '0' : '0px 8px 8px 0px'
|
|
}
|
|
height={'45px'}
|
|
/>
|
|
<CardTitle title={props.item.title} />
|
|
<StyledText
|
|
css={{
|
|
...ellipsisText,
|
|
color: '$grayTextContrast',
|
|
}}
|
|
data-testid="listDesc"
|
|
>
|
|
{/* <Box css={{ display: 'block', py: '12px' }}> */}
|
|
{props.item.labels?.map(({ name, color }, index) => (
|
|
<LabelChip key={index} text={name || ''} color={color} />
|
|
))}
|
|
{/* </Box> */}
|
|
{props.item.description}
|
|
</StyledText>
|
|
|
|
<StyledText
|
|
style="caption"
|
|
css={{ ...ellipsisText, fontWeight: '400' }}
|
|
>
|
|
{props.item.author && (
|
|
<SpanBox>{removeHTMLTags(props.item.author)}</SpanBox>
|
|
)}
|
|
</StyledText>
|
|
</HStack>
|
|
</VStack>
|
|
)
|
|
}
|
|
|
|
type CardTitleProps = {
|
|
title: string
|
|
}
|
|
|
|
function CardTitle(props: CardTitleProps): JSX.Element {
|
|
return (
|
|
<StyledText
|
|
style="listTitle"
|
|
data-testid="listTitle"
|
|
css={{
|
|
...ellipsisText,
|
|
fontSize: '14px',
|
|
fontWeight: '600',
|
|
textAlign: 'left',
|
|
}}
|
|
>
|
|
{props.title}
|
|
</StyledText>
|
|
)
|
|
}
|