-
Notifications
You must be signed in to change notification settings - Fork 0
/
IllustMeta.tsx
59 lines (56 loc) · 1.65 KB
/
IllustMeta.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
import { IllustId } from '../../api';
import { useIllustMeta } from '../../hooks/useIllustMeta';
import { BookmarkRate } from '../BookmarkRate';
import * as Icon from '../Icon';
import * as Layout from '../Layout';
import { Number } from '../Number';
import { Time } from '../Time';
export type IllustMetaProps = {
illustId: IllustId;
};
export function IllustMeta({ illustId }: IllustMetaProps) {
const {
data: { viewCount, bookmarkCount, postedAt },
} = useIllustMeta(illustId);
return (
<Layout.Container role="contentinfo">
<Layout.Row>
<Layout.Column>
<Time dateTime={postedAt} data-testid="absoluteTime">
{postedAt.format('lll')}
</Time>
<span>
(
<Time dateTime={postedAt} data-testid="relativeTime">
{postedAt.fromNow()}
</Time>
)
</span>
</Layout.Column>
</Layout.Row>
<Layout.Row>
<Layout.Column>
<Icon.Eye />
<Number data-testid="viewCount">{viewCount}</Number>
</Layout.Column>
<Layout.Column
as="a"
href={`https://www.pixiv.net/bookmark_detail.php?illust_id=${illustId}`}
>
<Icon.Heart />
<Number data-testid="bookmarkCount">{bookmarkCount}</Number>
{viewCount > 0 && bookmarkCount > 0 && (
<span data-testid="bookmarkRate">
(
<BookmarkRate
viewCount={viewCount}
bookmarkCount={bookmarkCount}
/>
)
</span>
)}
</Layout.Column>
</Layout.Row>
</Layout.Container>
);
}