mirror of https://github.com/coder/coder.git
65 lines
1.3 KiB
TypeScript
65 lines
1.3 KiB
TypeScript
import { Avatar } from "components/Avatar/Avatar";
|
|
import { FC, PropsWithChildren } from "react";
|
|
import { Stack } from "components/Stack/Stack";
|
|
import { makeStyles } from "@mui/styles";
|
|
|
|
export interface AvatarDataProps {
|
|
title: string | JSX.Element;
|
|
subtitle?: string;
|
|
src?: string;
|
|
avatar?: React.ReactNode;
|
|
}
|
|
|
|
export const AvatarData: FC<PropsWithChildren<AvatarDataProps>> = ({
|
|
title,
|
|
subtitle,
|
|
src,
|
|
avatar,
|
|
}) => {
|
|
const styles = useStyles();
|
|
|
|
if (!avatar) {
|
|
avatar = <Avatar src={src}>{title}</Avatar>;
|
|
}
|
|
|
|
return (
|
|
<Stack
|
|
spacing={1.5}
|
|
direction="row"
|
|
alignItems="center"
|
|
className={styles.root}
|
|
>
|
|
{avatar}
|
|
|
|
<Stack spacing={0} className={styles.info}>
|
|
<span className={styles.title}>{title}</span>
|
|
{subtitle && <span className={styles.subtitle}>{subtitle}</span>}
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
const useStyles = makeStyles((theme) => ({
|
|
root: {
|
|
minHeight: theme.spacing(5), // Make it predictable for the skeleton
|
|
width: "100%",
|
|
lineHeight: "150%",
|
|
},
|
|
|
|
info: {
|
|
width: "100%",
|
|
},
|
|
|
|
title: {
|
|
color: theme.palette.text.primary,
|
|
fontWeight: 600,
|
|
},
|
|
|
|
subtitle: {
|
|
fontSize: 12,
|
|
color: theme.palette.text.secondary,
|
|
lineHeight: "150%",
|
|
maxWidth: 540,
|
|
},
|
|
}));
|