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 { Icon } from "@cocalc/frontend/components/icon";
7
import { Menu, MenuProps, Typography } from "antd";
8
import { useRouter } from "next/router";
9
const { Text } = Typography;
10

11
type MenuItem = Required<MenuProps>["items"][number];
12

13
export default function ConfigMenu({ main }) {
14
  const router = useRouter();
15

16
  function select(e) {
17
    router.push(`/billing/${e.keyPath[0]}`, undefined, {
18
      scroll: false,
19
    });
20
  }
21

22
  const items: MenuItem[] = [
23
    { label: <Text strong>Billing</Text>, key: "" },
24
    { label: "Cards", key: "cards", icon: <Icon name={"credit-card"} /> },
25
    {
26
      label: "Invoices and Receipts",
27
      key: "receipts",
28
      icon: <Icon name={"list"} />,
29
    },
30
    {
31
      label: "Subscriptions",
32
      key: "subscriptions",
33
      icon: <Icon name={"calendar"} />,
34
    },
35
  ];
36

37
  return (
38
    <Menu
39
      mode="horizontal"
40
      selectedKeys={[main]}
41
      style={{ height: "100%", marginBottom: "24px" }}
42
      onSelect={select}
43
      items={items}
44
    />
45
  );
46
}
47

48