webapp/src/components/_shared/Subscribers/Subscribers.tsx

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 (
    <>
      <a href="?m=followers" class={styles.subscribers}>
        <Show when={props.followers && props.followers.length > 0}>
          <div class={styles.subscribersList}>
            <For each={props.followers.slice(0, 3)}>
              {(f) => <Userpic size={'XS'} name={f.name} userpic={f.pic} class={styles.subscribersItem} />}
            </For>
          </div>
        </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}>
          <div class={styles.subscribersList}>
            <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>
          </div>
        </Show>
        <div class={styles.subscribersCounter}>
          {t('SubscriptionWithCount', {
            count: props.followingAmount || props.following?.length || 0,
          })}
        </div>
      </a>
    </>
  )
}