import { clsx } from 'clsx' import { createEffect, createSignal, Show } from 'solid-js' import { useFollowing } from '../../../context/following' import { useLocalize } from '../../../context/localize' import { useMediaQuery } from '../../../context/mediaQuery' import { useSession } from '../../../context/session' import { FollowingEntity, Topic } from '../../../graphql/schema/core.gen' import { capitalize } from '../../../utils/capitalize' import { getImageUrl } from '../../../utils/getImageUrl' import { Button } from '../../_shared/Button' import { CheckButton } from '../../_shared/CheckButton' import styles from './TopicBadge.module.scss' type Props = { topic: Topic minimizeSubscribeButton?: boolean } export const TopicBadge = (props: Props) => { const { t, lang } = useLocalize() const { mediaMatches } = useMediaQuery() const [isMobileView, setIsMobileView] = createSignal(false) const { actions: { requireAuthentication }, } = useSession() const { setFollowing, loading: subLoading } = useFollowing() const [followed, setFollowed] = createSignal() const handleFollowClick = () => { const value = !followed() requireAuthentication(() => { setFollowed(value) setFollowing(FollowingEntity.Topic, props.topic.slug, value) }, 'subscribe') } createEffect(() => { setIsMobileView(!mediaMatches.sm) }) const title = () => lang() === 'en' ? capitalize(props.topic.slug.replaceAll('-', ' ')) : props.topic.title return (
{title()} {t('PublicationsWithCount', { count: props.topic.stat.shouts ?? 0 })}
} >
{props.topic.body}
} > } >
) }