prehistoric-systems/omnivore
1
0
Fork 0
mirror of https://github.com/omnivore-app/omnivore.git synced 2026-03-11 08:54:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Simplify metadata on library cards, handle plural in hacky way

Browse source
This commit is contained in:
Jackson Harper 2023-03-09 18:46:01 +08:00
parent 8cd7e823c5
commit 6bc146f5b0
3 changed files with 50 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx
View file

@ -1,5 +1,8 @@
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
import { useMemo } from 'react'
import { LibraryItem } from '../../../lib/networking/queries/useGetLibraryItemsQuery'
import { Box, HStack, SpanBox } from '../../elements/LayoutPrimitives'
dayjs.extend(relativeTime)
@ -105,3 +108,40 @@ export const siteName = (
} catch {}
return ''
}
type LibraryItemMetadataProps = {
item: LibraryItemNode
showProgress?: boolean
}
export function LibraryItemMetadata(
props: LibraryItemMetadataProps
): JSX.Element {
const highlightCount = useMemo(() => {
return props.item.highlights?.length ?? 0
}, [props.item.highlights])
return (
<Box>
{timeAgo(props.item.savedAt)}
{` `}
{props.item.wordsCount ?? 0 > 0
? ` • ${Math.max(
1,
Math.round((props.item.wordsCount ?? 0) / 235)
)} min read`
: null}
{(props.showProgress && props.item.readingProgressPercent) ?? 0 > 0 ? (
<>
{` • `}
<SpanBox css={{ color: '#55B938' }}>
{`${Math.round(props.item.readingProgressPercent)}%`}
</SpanBox>
</>
) : null}
{highlightCount > 0
? ` • ${highlightCount} highlight${highlightCount > 1 ? 's' : ''}`
: null}
</Box>
)
}

17
packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
View file

@ -4,13 +4,14 @@ import type { LinkedItemCardProps } from './CardTypes'
import { CoverImage } from '../../elements/CoverImage'
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
import { useState } from 'react'
import { useMemo, useState } from 'react'
import { DotsThreeVertical } from 'phosphor-react'
import Link from 'next/link'
import { CardMenu } from '../CardMenu'
import {
AuthorInfoStyle,
DescriptionStyle,
LibraryItemMetadata,
MenuStyle,
MetaStyle,
siteName,
@ -102,19 +103,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
}}
distribution="start"
>
<Box>
{timeAgo(props.item.savedAt)}
{` `}
{props.item.wordsCount ?? 0 > 0
? ` • ${Math.max(
1,
Math.round((props.item.wordsCount ?? 0) / 235)
)} min read`
: null}
{props.item.highlights?.length ?? 0 > 0
? ` • ${props.item.highlights?.length} highlights`
: null}
</Box>
<LibraryItemMetadata item={props.item} />
<Box
css={{
...MenuStyle,

29
packages/web/components/patterns/LibraryCards/LibraryListCard.tsx
View file

@ -1,12 +1,13 @@
import { Box, VStack, HStack, SpanBox } from '../../elements/LayoutPrimitives'
import { LabelChip } from '../../elements/LabelChip'
import type { LinkedItemCardProps } from './CardTypes'
import { useState } from 'react'
import { useMemo, useState } from 'react'
import { DotsThree } from 'phosphor-react'
import Link from 'next/link'
import { CardMenu } from '../CardMenu'
import {
AuthorInfoStyle,
LibraryItemMetadata,
MenuStyle,
MetaStyle,
siteName,
@ -22,6 +23,10 @@ export function LibraryListCard(props: LinkedItemCardProps): JSX.Element {
props.item.siteName ||
siteName(props.item.originalArticleUrl, props.item.url)
const highlightCount = useMemo(() => {
return props.item.highlights?.length ?? 0
}, [props.item.highlights])
return (
<VStack
css={{
@ -62,27 +67,7 @@ export function LibraryListCard(props: LinkedItemCardProps): JSX.Element {
style={{ textDecoration: 'unset', width: '100%', height: '100%' }}
>
<HStack css={MetaStyle} distribution="start">
<Box>
{timeAgo(props.item.savedAt)}
{` `}
{props.item.wordsCount ?? 0 > 0
? ` • ${Math.max(
1,
Math.round((props.item.wordsCount ?? 0) / 235)
)} min read`
: null}
{props.item.readingProgressPercent ?? 0 > 0 ? (
<>
{` • `}
<SpanBox css={{ color: '#55B938' }}>
{`${Math.round(props.item.readingProgressPercent)}%`}
</SpanBox>
</>
) : null}
{props.item.highlights?.length ?? 0 > 0
? ` • ${props.item.highlights?.length} highlights`
: null}
</Box>
<LibraryItemMetadata item={props.item} showProgress={true} />
<Box
css={{
...MenuStyle,