this repo has no description
1import { Trans, useLingui } from '@lingui/react/macro';
2import { useContext } from 'preact/hooks';
3
4import { ThreadCountContext } from '../utils/thread-count-context';
5
6import Icon from './icon';
7
8function ThreadIcon({ alt }) {
9 return <Icon icon="thread" size="s" alt={alt} />;
10}
11
12function ThreadBadge({ index, showIcon, showText }) {
13 const { t } = useLingui();
14 const total = useContext(ThreadCountContext);
15 const hasIndex = index > 0;
16 const hasTotal = total > 0;
17
18 return (
19 <div class="status-thread-badge">
20 {showIcon && (
21 <>
22 <ThreadIcon alt={showText ? '' : t`Thread`} />{' '}
23 </>
24 )}
25 {showText ? (
26 hasIndex ? (
27 hasTotal ? (
28 <Trans>
29 Thread {index}/{total}
30 </Trans>
31 ) : (
32 <Trans comment="X is the unspecified total number of posts in a thread">
33 Thread {index}/X
34 </Trans>
35 )
36 ) : (
37 t`Thread`
38 )
39 ) : hasIndex ? (
40 hasTotal ? (
41 t({
42 message: `${index}/${total}`,
43 comment: 'index/total posts in a thread',
44 })
45 ) : (
46 t({
47 message: `${index}/X`,
48 comment: 'X is the unspecified total number of posts in a thread',
49 })
50 )
51 ) : (
52 !showIcon && <ThreadIcon alt={t`Thread`} />
53 )}
54 </div>
55 );
56}
57
58export default ThreadBadge;