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 } from "@cocalc/frontend/components";
9
import { FONT_FACES } 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
  font?: string;
16
}
17

18
export default function FontFamilyMenu(props: Props) {
19
  const { onClick, style } = props;
20

21
  const items: MenuItems = useMemo((): MenuItems => {
22
    return FONT_FACES.map((family) => {
23
      return {
24
        key: family,
25
        onClick: () => onClick(family),
26
        label: <span style={{ fontFamily: family }}>{family}</span>,
27
      };
28
    });
29
  }, [onClick]);
30

31
  return (
32
    <DropdownMenu
33
      style={style}
34
      button={true}
35
      title={
36
        props.font ? (
37
          <span style={{ fontFamily: props.font }}>{props.font}</span>
38
        ) : (
39
          "Sans"
40
        )
41
      }
42
      key={"font-family"}
43
      items={items}
44
    />
45
  );
46
}
47

48