All files / app/features/badges BadgeDetail.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { useFeatureValue } from "@growthbook/growthbook-react";
import { Box, Typography } from "@mui/material";
import CenteredSpinner from "components/CenteredSpinner/CenteredSpinner";
import Badge from "features/badges/Badge";
import { useBadges } from "features/badges/hooks";
import { useTranslation } from "i18n";
import { PROFILE } from "i18n/namespaces";
 
import BadgeUserList from "./BadgeUserList";
 
interface BadgeDetailProps {
  badgeId: string;
}
 
export default function BadgeDetail({ badgeId }: BadgeDetailProps) {
  const { t } = useTranslation([PROFILE]);
  const { badges, isLoading } = useBadges();
 
  const showModeratorBadge = useFeatureValue("show_moderator_badge", true);
  const isHidden = badgeId === "moderator" && !showModeratorBadge;
 
  Iif (isLoading) return <CenteredSpinner />;
  Iif (!badges || !(badgeId in badges) || isHidden) {
    return <Typography>{t("profile:badges.not_found")}</Typography>;
  }
 
  const badge = badges[badgeId];
  return (
    <>
      <Box sx={{ display: "flex", gap: 1, alignItems: "center", mb: 2 }}>
        <Badge badge={badge} />
        <Typography variant="body1">{badge.description}</Typography>
      </Box>
      <BadgeUserList badgeId={badgeId} />
    </>
  );
}