1
import { Card, Checkbox, Space } from "antd";
2
import { ReactNode } from "react";
3
import { Icon } from "@cocalc/frontend/components/icon";
4
import { redux, useRedux } from "@cocalc/frontend/app-framework";
5

6
const TOUR_NAMES = {
7
  projects: "Projects",
8
  "chatgpt-title-bar-button": "ChatGPT Button",
9
  explorer: "File Explorer",
10
  "frame-terminal": "Linux Terminal",
11
  "flyout-fullpage": "Fullpage Flyout",
12
} as const;
13

14
export type TourName = keyof typeof TOUR_NAMES;
15

16
export default function Tours() {
17
  const tours = useRedux("account", "tours");
18
  const v: ReactNode[] = [];
19
  for (const name in TOUR_NAMES) {
20
    v.push(
21
      <Checkbox
22
        key={name}
23
        checked={tours?.includes(name) || tours?.includes("all")}
24
        onChange={(e) => {
25
          const actions = redux.getActions("account");
26
          if (e.target.checked) {
27
            actions.setTourDone(name);
28
          } else {
29
            actions.setTourNotDone(name);
30
          }
31
        }}
32
      >
33
        {TOUR_NAMES[name]}
34
      </Checkbox>,
35
    );
36
  }
37
  return (
38
    <Card title={<span><Icon name="map"/> Completed Tours</span>}>
39
      <Space wrap>{v}</Space>
40
    </Card>
41
  );
42
}
43

44