Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 | 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 16x 14x 3x 14x 14x 14x 14x | import { TabPanel } from "@mui/lab";
import { Box, Card, styled } from "@mui/material";
import TabBar from "components/TabBar";
import useAccountInfo from "features/auth/useAccountInfo";
import { useProfileUser } from "features/profile/hooks/useProfileUser";
import About from "features/profile/view/About";
import Home from "features/profile/view/Home";
import References from "features/profile/view/References";
import { useTranslation } from "i18n";
import { GLOBAL, PROFILE } from "i18n/namespaces";
import { TFunction } from "i18next";
import { GetAccountInfoRes } from "proto/account_pb";
import { User } from "proto/api_pb";
import { ReactNode } from "react";
import { UserTab } from "routes";
import UserTabContext from "./UserTabContext";
const REQUEST_ID = "request";
export const sectionLabels = (
t: TFunction,
user?: User.AsObject,
isSuperuser?: GetAccountInfoRes.AsObject["isSuperuser"],
) => {
return {
about: t("profile:heading.about_me"),
home: t("profile:heading.home"),
references: (
<Box display="flex" alignItems="center" gap={1}>
{t("profile:heading.references")}
{!!user?.numReferences && (
<StyledNumReferences>{user?.numReferences}</StyledNumReferences>
)}
</Box>
),
...(isSuperuser ? { mod: t("global:mod") } : {}),
};
};
const StyledDetailsCard = styled(Card)(({ theme }) => ({
[theme.breakpoints.down("md")]: {
margin: 0,
width: "100%",
},
flexGrow: 1,
padding: theme.spacing(2),
}));
const StyledNumReferences = styled("div")(({ theme }) => ({
display: "flex",
justifyContent: "center",
alignItems: "center",
backgroundColor: theme.palette.primary.main,
color: theme.palette.common.white,
fontWeight: "bold",
fontSize: "0.65rem",
width: "15px",
height: "15px",
borderRadius: "50%",
padding: theme.spacing(1),
}));
export default function UserCard({
top,
onTabChange,
tab,
modPanel,
}: {
top?: ReactNode;
onTabChange: (tab: UserTab) => void;
tab: UserTab;
modPanel?: ReactNode;
}) {
const { t } = useTranslation([PROFILE, GLOBAL]);
const user = useProfileUser();
const { data: accountInfo } = useAccountInfo();
return (
<StyledDetailsCard id={REQUEST_ID}>
<UserTabContext tab={tab}>
<TabBar
setValue={onTabChange}
labels={sectionLabels(t, user, accountInfo?.isSuperuser)}
ariaLabel={t("profile:section_tabs_a11y_label")}
tabListSx={{
mx: { xs: -2, md: 0 },
mt: { xs: -1, md: 0 },
"& .MuiTabs-scrollButtons": {
"&.Mui-disabled": { opacity: 0.3 },
width: { xs: 24, md: 40 },
},
}}
/>
{top || null}
<TabPanel value="about" sx={{ padding: 0 }}>
<About user={user} />
</TabPanel>
{modPanel}
<TabPanel value="home">
<Home user={user}></Home>
</TabPanel>
<TabPanel value="references">
<References />
</TabPanel>
</UserTabContext>
</StyledDetailsCard>
);
}
|