1  import { FileOutlined, HighlightOutlined, UserOutlined } from "@ant-design/icons";
 2  import { useTranslate } from "@refinedev/core";
 3  import { List, theme } from "antd";
 4  import { Content } from "antd/es/layout/layout";
 5  import Title from "antd/es/typography/Title";
 6  import dayjs from "dayjs";
 7  import utc from "dayjs/plugin/utc";
 8  import { Trans } from "react-i18next";
 9  import { Link } from "react-router";
10  
11  dayjs.extend(utc);
12  
13  const { useToken } = theme;
14  
15  export const Help = () => {
16    const { token } = useToken();
17    const t = useTranslate();
18  
19    return (
20      <Content
21        style={{
22          padding: 20,
23          minHeight: 280,
24          maxWidth: 1000,
25          margin: "0 auto",
26          backgroundColor: token.colorBgContainer,
27          borderRadius: token.borderRadiusLG,
28          color: token.colorText,
29          fontFamily: token.fontFamily,
30          fontSize: token.fontSizeLG,
31          lineHeight: 1.5,
32        }}
33      >
34        <Trans
35          i18nKey={"help.description"}
36          components={{
37            p: <p />,
38            title: <Title />,
39            filamentCreateLink: <Link to="/filament/create" />,
40            spoolCreateLink: <Link to="/spool/create" />,
41            vendorCreateLink: <Link to="/vendor/create" />,
42            readmeLink: <Link to="https://github.com/Donkie/Spoolman#integration-status" target="_blank" />,
43            itemsHelp: (
44              <List
45                itemLayout="horizontal"
46                size="large"
47                dataSource={[
48                  {
49                    title: t("filament.filament"),
50                    description: t("help.resources.filament"),
51                    icon: <HighlightOutlined />,
52                  },
53                  {
54                    title: t("spool.spool"),
55                    description: t("help.resources.spool"),
56                    icon: <FileOutlined />,
57                  },
58                  {
59                    title: t("vendor.vendor"),
60                    description: t("help.resources.vendor"),
61                    icon: <UserOutlined />,
62                  },
63                ]}
64                renderItem={(item) => (
65                  <List.Item>
66                    <List.Item.Meta avatar={item.icon} title={item.title} description={item.description} />
67                  </List.Item>
68                )}
69              />
70            ),
71          }}
72        />
73      </Content>
74    );
75  };
76  
77  export default Help;