1
/*
2
 *  This file is part of CoCalc: Copyright © 2020 Sagemath, Inc.
3
 *  License: MS-RSL – see LICENSE.md for details
4
 */
5

6
import { CSSProperties, useMemo } from "react";
7

8
import { DropdownMenu, Icon } from "@cocalc/frontend/components";
9
import { FONT_SIZES } from "@cocalc/frontend/editors/editor-button-bar";
10
import { MenuItems } from "./dropdown-menu";
11

12
interface Props {
13
  onClick: (family: string) => void;
14
  style?: CSSProperties;
15
}
16

17
export default function FontSizeMenu({ onClick, style }: Props) {
18
  const items: MenuItems = useMemo(() => {
19
    return FONT_SIZES.map((size) => {
20
      return {
21
        key: size,
22
        onClick: () => onClick(size),
23
        label: (
24
          <span style={{ fontSize: size }}>
25
            {size} {size === "medium" ? "(default)" : undefined}
26
          </span>
27
        ),
28
      };
29
    });
30
  }, [onClick]);
31

32
  return (
33
    <DropdownMenu
34
      style={style}
35
      button={true}
36
      title={<Icon name={"text-height"} />}
37
      key={"font-size"}
38
      items={items}
39
    />
40
  );
41
}
42

43