61 lines
1.7 KiB
TypeScript
61 lines
1.7 KiB
TypeScript
import { Fragment, useMemo } from 'react'
|
|
import type { Highlight } from '../../lib/networking/fragments/highlightFragment'
|
|
import { LabelChip } from '../elements/LabelChip'
|
|
import { Box, VStack, Blockquote, SpanBox } from '../elements/LayoutPrimitives'
|
|
import { StyledText } from '../elements/StyledText'
|
|
import { styled } from '../tokens/stitches.config'
|
|
|
|
type HighlightViewProps = {
|
|
highlight: Highlight
|
|
author?: string
|
|
title?: string
|
|
scrollToHighlight?: (arg: string) => void
|
|
}
|
|
|
|
const StyledQuote = styled(Blockquote, {
|
|
margin: '0px 0px 0px 0px',
|
|
fontSize: '18px',
|
|
lineHeight: '27px',
|
|
color: '$grayText',
|
|
padding: '0px 16px',
|
|
borderLeft: '2px solid $omnivoreCtaYellow',
|
|
})
|
|
|
|
export function HighlightView(props: HighlightViewProps): JSX.Element {
|
|
const lines = useMemo(
|
|
() => props.highlight.quote.split('\n'),
|
|
[props.highlight.quote]
|
|
)
|
|
|
|
return (
|
|
<VStack css={{ width: '100%', boxSizing: 'border-box' }}>
|
|
<StyledQuote
|
|
onClick={() => {
|
|
if (props.scrollToHighlight) {
|
|
props.scrollToHighlight(props.highlight.id)
|
|
}
|
|
}}
|
|
>
|
|
<SpanBox css={{ p: '1px', borderRadius: '2px' }}>
|
|
{lines.map((line: string, index: number) => (
|
|
<Fragment key={index}>
|
|
{line}
|
|
{index !== lines.length - 1 && (
|
|
<>
|
|
<br />
|
|
<br />
|
|
</>
|
|
)}
|
|
</Fragment>
|
|
))}
|
|
</SpanBox>
|
|
</StyledQuote>
|
|
<Box css={{ display: 'block', pt: '16px' }}>
|
|
{props.highlight.labels?.map(({ name, color }, index) => (
|
|
<LabelChip key={index} text={name || ''} color={color} />
|
|
))}
|
|
</Box>
|
|
</VStack>
|
|
)
|
|
}
|