60 lines
1.8 KiB
TypeScript
60 lines
1.8 KiB
TypeScript
import { For, Show } from 'solid-js'
|
|
|
|
import { useLocalize } from '../../../context/localize'
|
|
|
|
import { Author, Topic } from '../../../graphql/schema/core.gen'
|
|
import { Userpic } from '../../Author/Userpic'
|
|
|
|
import styles from './Subscribers.module.scss'
|
|
|
|
type Props = {
|
|
followers?: Author[]
|
|
followersAmount?: number
|
|
following?: Array<Author | Topic>
|
|
followingAmount?: number
|
|
}
|
|
|
|
export const Subscribers = (props: Props) => {
|
|
const { t } = useLocalize()
|
|
|
|
return (
|
|
<div class={styles.subscribersContainer}>
|
|
<a href="?m=followers" class={styles.subscribers}>
|
|
<Show when={props.followers && props.followers.length > 0}>
|
|
<For each={props.followers.slice(0, 3)}>
|
|
{(f) => <Userpic size={'XS'} name={f.name} userpic={f.pic} class={styles.subscribersItem} />}
|
|
</For>
|
|
</Show>
|
|
<div class={styles.subscribersCounter}>
|
|
{t('SubscriberWithCount', {
|
|
count: props.followersAmount || props.followers.length || 0,
|
|
})}
|
|
</div>
|
|
</a>
|
|
|
|
<a href="?m=following" class={styles.subscribers}>
|
|
<Show when={props.following && props.following.length > 0}>
|
|
<For each={props.following.slice(0, 3)}>
|
|
{(f) => {
|
|
if ('name' in f) {
|
|
return <Userpic size={'XS'} name={f.name} userpic={f.pic} class={styles.subscribersItem} />
|
|
}
|
|
|
|
if ('title' in f) {
|
|
return <Userpic size={'XS'} name={f.title} userpic={f.pic} class={styles.subscribersItem} />
|
|
}
|
|
|
|
return null
|
|
}}
|
|
</For>
|
|
</Show>
|
|
<div class={styles.subscribersCounter}>
|
|
{t('SubscriptionWithCount', {
|
|
count: props.followingAmount || props.following?.length || 0,
|
|
})}
|
|
</div>
|
|
</a>
|
|
</div>
|
|
)
|
|
}
|