src/shared/components/common/badges.tsx

   1 import { Link } from "inferno-router";
   2 import {
   3   CommunityAggregates,
   4   CommunityView,
   5   SiteAggregates,
   6 } from "lemmy-js-client";
   7 import { i18n } from "../../i18next";
   8 import { numToSI } from "../../utils";
   9
  10 interface BadgesProps {
  11   counts: CommunityAggregates | SiteAggregates;
  12   online: number;
  13   community_view?: CommunityView;
  14 }
  15
  16 const isCommunityAggregates = (
  17   counts: CommunityAggregates | SiteAggregates
  18 ): counts is CommunityAggregates => {
  19   return "subscribers" in counts;
  20 };
  21
  22 export const Badges = ({ counts, community_view, online }: BadgesProps) => {
  23   return (
  24     <ul className="my-1 list-inline">
  25       <li className="list-inline-item badge badge-secondary">
  26         {i18n.t("number_online", {
  27           count: online,
  28           formattedCount: numToSI(online),
  29         })}
  30       </li>
  31       <li
  32         className="list-inline-item badge badge-secondary pointer"
  33         data-tippy-content={i18n.t("active_users_in_the_last_day", {
  34           count: Number(counts.users_active_day),
  35           formattedCount: numToSI(counts.users_active_day),
  36         })}
  37       >
  38         {i18n.t("number_of_users", {
  39           count: Number(counts.users_active_day),
  40           formattedCount: numToSI(counts.users_active_day),
  41         })}{" "}
  42         / {i18n.t("day")}
  43       </li>
  44       <li
  45         className="list-inline-item badge badge-secondary pointer"
  46         data-tippy-content={i18n.t("active_users_in_the_last_week", {
  47           count: Number(counts.users_active_week),
  48           formattedCount: numToSI(counts.users_active_week),
  49         })}
  50       >
  51         {i18n.t("number_of_users", {
  52           count: Number(counts.users_active_week),
  53           formattedCount: numToSI(counts.users_active_week),
  54         })}{" "}
  55         / {i18n.t("week")}
  56       </li>
  57       <li
  58         className="list-inline-item badge badge-secondary pointer"
  59         data-tippy-content={i18n.t("active_users_in_the_last_month", {
  60           count: Number(counts.users_active_month),
  61           formattedCount: numToSI(counts.users_active_month),
  62         })}
  63       >
  64         {i18n.t("number_of_users", {
  65           count: Number(counts.users_active_month),
  66           formattedCount: numToSI(counts.users_active_month),
  67         })}{" "}
  68         / {i18n.t("month")}
  69       </li>
  70       <li
  71         className="list-inline-item badge badge-secondary pointer"
  72         data-tippy-content={i18n.t("active_users_in_the_last_six_months", {
  73           count: Number(counts.users_active_half_year),
  74           formattedCount: numToSI(counts.users_active_half_year),
  75         })}
  76       >
  77         {i18n.t("number_of_users", {
  78           count: Number(counts.users_active_half_year),
  79           formattedCount: numToSI(counts.users_active_half_year),
  80         })}{" "}
  81         / {i18n.t("number_of_months", { count: 6, formattedCount: 6 })}
  82       </li>
  83       {isCommunityAggregates(counts) && (
  84         <li className="list-inline-item badge badge-secondary">
  85           {i18n.t("number_of_subscribers", {
  86             count: Number(counts.subscribers),
  87             formattedCount: numToSI(counts.subscribers),
  88           })}
  89         </li>
  90       )}
  91       <li className="list-inline-item badge badge-secondary">
  92         {i18n.t("number_of_posts", {
  93           count: Number(counts.posts),
  94           formattedCount: numToSI(counts.posts),
  95         })}
  96       </li>
  97       <li className="list-inline-item badge badge-secondary">
  98         {i18n.t("number_of_comments", {
  99           count: Number(counts.comments),
 100           formattedCount: numToSI(counts.comments),
 101         })}
 102       </li>
 103       <li className="list-inline-item">
 104         <Link
 105           className="badge badge-primary"
 106           to={`/modlog/${community_view ?? community_view?.community.id}`}
 107         >
 108           {i18n.t("modlog")}
 109         </Link>
 110       </li>
 111     </ul>
 112   );
 113 };