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 { Breadcrumb, Layout } from "antd";
7
import type { JSX } from "react";
8
const { Content } = Layout;
9

10
interface Props {
11
  children: React.ReactNode;
12
  style?: React.CSSProperties;
13
  nav?: JSX.Element[]; // list of links
14
}
15

16
const STYLE: React.CSSProperties = {
17
  background: "white",
18
  minHeight: "75vh",
19
  maxWidth: "992px", // Antd screen-lg
20
  width: "100%",
21
  margin: "0 auto",
22
  padding: "0 20px",
23
} as const;
24

25
export default function Main(props: Props) {
26
  const { nav, children } = props;
27

28
  const style = { ...STYLE, ...props.style };
29

30
  function renderNav() {
31
    if (nav == null) return null;
32
    const items = nav.map((entry, idx) => ({
33
      key: idx,
34
      title: entry,
35
    }));
36
    return <Breadcrumb style={{ margin: "50px 0 25px 0" }} items={items} />;
37
  }
38

39
  return (
40
    <Content style={style}>
41
      {renderNav()}
42
      {children}
43
    </Content>
44
  );
45
}
46

47