CoCalc -- footer.tsx

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/landing/footer.tsx
Views: ⁶⁸⁷
1
/*
2
 *  This file is part of CoCalc: Copyright © 2021 Sagemath, Inc.
3
 *  License: MS-RSL – see LICENSE.md for details
4
 */
5

6
import { Col, Flex, Layout, Row, Space, Typography } from "antd";
7

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

10
import A from "components/misc/A";
11
import Logo from "components/logo";
12
import { CSS } from "components/misc";
13
import { is_valid_email_address as isValidEmailAddress } from "@cocalc/util/misc";
14
import { MAX_WIDTH } from "lib/config";
15
import { useCustomize } from "lib/customize";
16

17
import SocialMediaIconList from "./social-media-icon-list";
18
import { liveDemoUrl } from "components/landing/live-demo";
19

20
const FOOTER_STYLE: CSS = {
21
  borderTop: "1px solid lightgrey",
22
  backgroundColor: "white",
23
};
24

25
const FOOTER_COLUMNS_STYLE: CSS = {
26
  minWidth: "200px",
27
  flexGrow: 1,
28
};
29

30
const FOOTER_COLUMN_STYLE = {
31
  marginTop: "32px",
32
  minWidth: "128px",
33
};
34

35
const FOOTER_TABLE_STYLE: CSS = {
36
  maxWidth: MAX_WIDTH,
37
  marginBottom: "36px",
38
  width: "100%",
39
};
40

41
const LOGO_COLUMN_STYLE = {
42
  paddingBottom: "24px",
43
  marginTop: "32px",
44
};
45

46
interface FooterLink {
47
  text: string;
48
  url: string;
49
  hide?: boolean;
50
}
51

52
interface FooterColumn {
53
  header: string;
54
  links: Array<FooterLink>;
55
}
56

57
export default function Footer() {
58
  const {
59
    contactEmail,
60
    onCoCalcCom,
61
    organizationName,
62
    organizationURL,
63
    enabledPages,
64
    termsOfServiceURL,
65
    account,
66
  } = useCustomize();
67

68
  const footerColumns: Array<FooterColumn> = [
69
    {
70
      header: "Product",
71
      links: [
72
        {
73
          text: "Store",
74
          url: "/store",
75
          hide: !enabledPages?.store,
76
        },
77
        {
78
          text: "Features",
79
          url: "/features",
80
          hide: !enabledPages?.features,
81
        },
82
        {
83
          text: "Licenses",
84
          url: "/licenses",
85
          hide: !enabledPages?.licenses,
86
        },
87
        {
88
          text: "Pricing",
89
          url: "/pricing",
90
          hide: !enabledPages?.pricing,
91
        },
92
        {
93
          text: "On Premises",
94
          url: "/pricing/onprem",
95
          hide: !enabledPages?.onPrem,
96
        },
97
        {
98
          text: "System Activity",
99
          url: "/info/status",
100
          hide: !enabledPages?.systemActivity,
101
        },
102
        {
103
          text: "Status",
104
          url: "https://status.cocalc.com/",
105
          hide: !enabledPages?.status,
106
        },
107
      ],
108
    },
109
    {
110
      header: "Resources",
111
      links: [
112
        {
113
          text: "Documentation",
114
          url: "/info/doc",
115
          hide: !enabledPages?.info,
116
        },
117
        {
118
          text: "Compute Servers",
119
          url: "https://doc.cocalc.com/compute_server.html",
120
          hide: !enabledPages?.compute,
121
        },
122
        {
123
          text: "Public Share",
124
          url: "/share/public_paths/page/1",
125
          hide: !enabledPages?.share,
126
        },
127
        {
128
          text: "Software",
129
          url: "/software",
130
          hide: !enabledPages?.software,
131
        },
132
        {
133
          text: "Support",
134
          url: "/support",
135
          hide: !enabledPages?.support,
136
        },
137
        {
138
          text: "Get a Live Demo",
139
          url: liveDemoUrl("footer"),
140
          hide: !account || !enabledPages?.support,
141
        },
142
      ],
143
    },
144
    {
145
      header: "Company",
146
      links: [
147
        {
148
          text: "About",
149
          url: "/about",
150
          hide: !enabledPages?.about.index,
151
        },
152
        {
153
          text: "Contact",
154
          url: contactEmail || "",
155
          hide: !enabledPages?.contact,
156
        },
157
        {
158
          text: "Events",
159
          url: "/about/events",
160
          hide: !enabledPages?.about.events,
161
        },
162
        {
163
          text: "Team",
164
          url: "/about/team",
165
          hide: !enabledPages?.about.team,
166
        },
167
        {
168
          text: "Imprint",
169
          url: "/policies/imprint",
170
          hide: !enabledPages?.policies.imprint,
171
        },
172
        {
173
          text: "News",
174
          url: "/news",
175
          hide: !enabledPages?.news,
176
        },
177
        {
178
          text: "Policies",
179
          url: "/policies",
180
          hide: !enabledPages?.policies.index,
181
        },
182
        {
183
          text: "Terms of Service",
184
          url: termsOfServiceURL || "",
185
          hide: !enabledPages?.termsOfService,
186
        },
187
        {
188
          text: organizationName || "Company",
189
          url: organizationURL || "",
190
          hide: !enabledPages?.organization,
191
        },
192
      ],
193
    },
194
  ];
195

196
  function renderFooterColumns() {
197
    return footerColumns.map((column) => (
198
      <Space
199
        key={`footer-column-${column.header}`}
200
        direction="vertical"
201
        size="small"
202
        style={FOOTER_COLUMN_STYLE}
203
      >
204
        <Typography.Title level={5}>{column.header}</Typography.Title>
205
        {column.links
206
          .filter((footerLink) => !footerLink.hide)
207
          .map((footerLink) => (
208
            <A
209
              key={footerLink.url}
210
              href={
211
                isValidEmailAddress(footerLink.url)
212
                  ? `mailto:${footerLink.url}`
213
                  : footerLink.url
214
              }
215
              style={{ color: COLORS.GRAY_D }}
216
            >
217
              {footerLink.text}
218
            </A>
219
          ))}
220
      </Space>
221
    ));
222
  }
223

224
  return (
225
    <Layout.Footer style={FOOTER_STYLE}>
226
      <Flex justify="center">
227
        <Row justify="space-between" style={FOOTER_TABLE_STYLE}>
228
          <Col xs={24} md={8}>
229
            <Flex
230
              justify="space-between"
231
              align="center"
232
              wrap="wrap"
233
              style={LOGO_COLUMN_STYLE}
234
            >
235
              <Logo type="rectangular" width={150} />
236
              {onCoCalcCom && (
237
                <SocialMediaIconList
238
                  links={{
239
                    facebook: "https://www.facebook.com/CoCalcOnline",
240
                    github: "https://github.com/sagemathinc/cocalc",
241
                    linkedin: "https://www.linkedin.com/company/sagemath-inc./",
242
                    twitter: "https://twitter.com/cocalc_com",
243
                    youtube: "https://www.youtube.com/c/SagemathCloud",
244
                  }}
245
                  iconFontSize={20}
246
                />
247
              )}
248
            </Flex>
249
          </Col>
250
          <Col xs={24} md={16}>
251
            <Flex
252
              justify="space-between"
253
              style={FOOTER_COLUMNS_STYLE}
254
              wrap="wrap"
255
            >
256
              {renderFooterColumns()}
257
            </Flex>
258
          </Col>
259
        </Row>
260
      </Flex>
261
    </Layout.Footer>
262
  );
263
}
264

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

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