CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutSign UpSign In
sagemathinc

Real-time collaboration for Jupyter Notebooks, Linux Terminals, LaTeX, VS Code, R IDE, and more,
all in one place.

GitHub Repository: sagemathinc/cocalc
 Path: blob/master/src/packages/next/components/about/team.tsx
Views: 687
1
import { ReactNode } from "react";

2


3
import { Card, Col, Layout, List, Row, Space, Typography } from "antd";

4


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

6


7
import Footer from "components/landing/footer";

8
import Header from "components/landing/header";

9
import Head from "components/landing/head";

10
import Image, { StaticImageData } from "components/landing/image";

11


12
import { MAX_WIDTH } from "lib/config";

13
import { Customize, CustomizeType } from "lib/customize";

14


15
import { TitleComponent } from "./title-component";

16


17
interface ExperienceComponentProps {

18
  experiences: Array<{

19
    institution: string;

20
    position: string;

21
    timeframe?: string;

22
  }>;

23
};

24


25
const ExperienceComponent = (

26
  { experiences }: ExperienceComponentProps

27
) => (

28
  <List

29
    size="small"

30
    dataSource={experiences}

31
    renderItem={(item) => (

32
      <List.Item>

33
        <List.Item.Meta

34
          title={

35
            <>

36
              <Typography.Text>{item.institution}</Typography.Text>

37
              {item.timeframe && (

38
                <span style={{color: COLORS.GRAY }}> &middot; {item.timeframe} </span>

39
              )}

40
            </>

41
          }

42
          description={

43
            <>

44
              <em>{item.position}</em>

45
            </>

46
          }

47
        />

48
      </List.Item>

49
    )}

50
  />

51
);

52


53
export interface TeamBioProps {

54
  customize: CustomizeType;

55
  givenName: string;

56
  surname: string;

57
  position: string;

58
  positionShort: string;

59
  positionTimeframe: string;

60
  image?: string | StaticImageData;

61
  imageAlt?: string;

62
  background: ReactNode;

63
  companyRole: ReactNode;

64
  personalSection: ReactNode;

65
  pastExperience: ExperienceComponentProps['experiences'];

66
}

67


68
export const TeamBio = (props: TeamBioProps) => {

69
  const fullName = `${props.givenName} ${props.surname}`;

70


71
  return (

72
    <Customize value={props.customize}>

73
    <Head title={`Team - ${fullName}`}/>

74
    <Layout>

75
      <Header page="about" subPage="team"/>

76
      <Layout.Content

77
        style={{

78
          backgroundColor: "white",

79
        }}

80
      >

81
        <div

82
          style={{

83
            maxWidth: MAX_WIDTH,

84
            margin: "15px auto",

85
            padding: "15px",

86
            backgroundColor: "white",

87
          }}

88
        >

89
          <Space direction="vertical" size="middle">

90
            <TitleComponent name={`Meet ${fullName}.`} level={2}/>

91


92
            <Row wrap gutter={24}>

93
              <Col xs={24} md={12}>

94
                <Card

95
                  style={{

96
                    maxWidth: "512px"

97
                  }}

98
                  cover={props.image && (

99
                    <Image

100
                      src={props.image}

101
                      alt={props.imageAlt || fullName}

102
                    />

103
                  )}

104
                >

105
                  <Card.Meta

106
                    title={`${fullName}, ${props.positionShort}`}

107
                    description={props.positionTimeframe}

108
                  />

109
                </Card>

110
              </Col>

111
              <Col xs={24} md={12}>

112
                <Typography.Title level={5}>

113
                  {props.position}

114
                </Typography.Title>

115


116
                {props.companyRole}

117


118
                {props.personalSection}

119
              </Col>

120
            </Row>

121


122
            <Typography.Title level={4}>Background</Typography.Title>

123
            {props.background}

124


125
            <Typography.Title level={4}>Previous Experience</Typography.Title>

126
            <ExperienceComponent experiences={props.pastExperience} />

127
          </Space>

128
        </div>

129
        <Footer/>

130
      </Layout.Content>

131
    </Layout>

132
  </Customize>

133
  )

134
}

135


136