this repo has no description
Custom titleComponent for Timeline
+28
-1
+11
src/app.css
+11
src/app.css
···
1170
1170
text-shadow: 0 1px var(--bg-color);
1171
1171
}
1172
1172
1173
+
/* ACCOUNT STATUSES */
1174
+
1175
+
.header-account {
1176
+
font-size: 90% !important;
1177
+
cursor: pointer;
1178
+
}
1179
+
.header-account div {
1180
+
font-weight: normal;
1181
+
color: var(--text-insignificant-color);
1182
+
}
1183
+
1173
1184
@media (min-width: 40em) {
1174
1185
html,
1175
1186
body {
+3
-1
src/components/timeline.jsx
+3
-1
src/components/timeline.jsx
···
10
10
11
11
function Timeline({
12
12
title,
13
+
titleComponent,
13
14
path,
14
15
id,
15
16
emptyText,
···
90
91
<Icon icon="home" size="l" />
91
92
</Link>
92
93
</div>
93
-
<h1>{title}</h1>
94
+
{uiState !== 'loading' &&
95
+
(titleComponent ? titleComponent : <h1>{title}</h1>)}
94
96
<div class="header-side">
95
97
<Loader hidden={uiState !== 'loading'} />
96
98
</div>
+14
src/pages/account-statuses.jsx
+14
src/pages/account-statuses.jsx
···
2
2
import { useParams } from 'react-router-dom';
3
3
4
4
import Timeline from '../components/timeline';
5
+
import states from '../utils/states';
5
6
6
7
const LIMIT = 20;
7
8
···
34
35
<Timeline
35
36
key={id}
36
37
title={`${account?.acct ? '@' + account.acct : 'Posts'}`}
38
+
titleComponent={
39
+
<h1
40
+
class="header-account"
41
+
onClick={() => {
42
+
states.showAccount = account;
43
+
}}
44
+
>
45
+
{account?.displayName}
46
+
<div>
47
+
<span>@{account?.acct}</span>
48
+
</div>
49
+
</h1>
50
+
}
37
51
path="/a/:id"
38
52
id="account_statuses"
39
53
emptyText="Nothing to see here yet."