1
import { Flex, Typography } from "antd";
2
import { TitleProps } from "antd/es/typography/Title";
3

4
import { COLORS } from "@cocalc/util/theme";
5

6
export interface TitleComponentProps {
7
  name: string;
8
  jobTitle?: string;
9
  level?: TitleProps['level'];
10
}
11

12
export const TitleComponent = (
13
  {
14
    name,
15
    jobTitle,
16
    level = 3,
17
  }: TitleComponentProps
18
) => (
19
  <Flex
20
    justify="space-between"
21
    align="baseline"
22
    wrap="wrap"
23
    style={{
24
      marginBottom: "24px"
25
    }}>
26
    <Typography.Title
27
      style={{
28
        margin: 0,
29
      }}
30
      level={level}
31
    >{name}</Typography.Title>
32
    {jobTitle && (
33
      <Typography.Title
34
        style={{
35
          margin: 0,
36
          color: COLORS.GRAY,
37
        }}
38
        level={level}
39
      >{jobTitle}</Typography.Title>
40
    )}
41
  </Flex>
42
);
43

44