Show total at end of list

This commit is contained in:
Lim Chee Aun 2024-01-31 09:03:33 +08:00
parent 46d7cba1ea
commit 28bb66f185
2 changed files with 47 additions and 25 deletions

View file

@ -45,19 +45,31 @@ function FollowedHashtags() {
</header> </header>
<main> <main>
{followedHashtags.length > 0 ? ( {followedHashtags.length > 0 ? (
<ul class="link-list"> <>
{followedHashtags.map((tag) => ( <ul class="link-list">
<li> {followedHashtags.map((tag) => (
<Link <li>
to={ <Link
instance ? `/${instance}/t/${tag.name}` : `/t/${tag.name}` to={
} instance
> ? `/${instance}/t/${tag.name}`
<Icon icon="hashtag" /> <span>{tag.name}</span> : `/t/${tag.name}`
</Link> }
</li> >
))} <Icon icon="hashtag" /> <span>{tag.name}</span>
</ul> </Link>
</li>
))}
</ul>
{followedHashtags.length > 1 && (
<footer class="ui-state">
<small class="insignificant">
{followedHashtags.length} hashtag
{followedHashtags.length === 1 ? '' : 's'}
</small>
</footer>
)}
</>
) : uiState === 'loading' ? ( ) : uiState === 'loading' ? (
<p class="ui-state"> <p class="ui-state">
<Loader abrupt /> <Loader abrupt />

View file

@ -61,14 +61,15 @@ function Lists() {
</header> </header>
<main> <main>
{lists.length > 0 ? ( {lists.length > 0 ? (
<ul class="link-list"> <>
{lists.map((list) => ( <ul class="link-list">
<li> {lists.map((list) => (
<Link to={`/l/${list.id}`}> <li>
<span> <Link to={`/l/${list.id}`}>
<Icon icon="list" /> <span>{list.title}</span> <span>
</span> <Icon icon="list" /> <span>{list.title}</span>
{/* <button </span>
{/* <button
type="button" type="button"
class="plain" class="plain"
onClick={(e) => { onClick={(e) => {
@ -81,10 +82,19 @@ function Lists() {
> >
<Icon icon="pencil" /> <Icon icon="pencil" />
</button> */} </button> */}
</Link> </Link>
</li> </li>
))} ))}
</ul> </ul>
{lists.length > 1 && (
<footer class="ui-state">
<small class="insignificant">
{lists.length} list
{lists.length === 1 ? '' : 's'}
</small>
</footer>
)}
</>
) : uiState === 'loading' ? ( ) : uiState === 'loading' ? (
<p class="ui-state"> <p class="ui-state">
<Loader /> <Loader />