1  import React from "react";
  2  import { slugify } from "../../util";
  3  
  4  const AdmonitionTemplate = {
  5    name: "Admonition",
  6    ui: {
  7      defaultItem: {
  8        type: "note",
  9        title: "Note",
 10      },
 11      itemProps: (item) => {
 12        return { label: item?.title };
 13      },
 14    },
 15    fields: [
 16      {
 17        name: "type",
 18        label: "Type",
 19        type: "string",
 20        options: [
 21          {
 22            label: "Note",
 23            value: "note",
 24          },
 25          {
 26            label: "Tip",
 27            value: "tip",
 28          },
 29          {
 30            label: "Info",
 31            value: "info",
 32          },
 33          {
 34            label: "Caution",
 35            value: "caution",
 36          },
 37          {
 38            label: "Danger",
 39            value: "danger",
 40          },
 41        ],
 42      },
 43      {
 44        name: "title",
 45        label: "Title",
 46        type: "string",
 47        isTitle: true,
 48        required: true,
 49      },
 50      {
 51        name: "children",
 52        label: "Content",
 53        type: "rich-text",
 54      },
 55    ],
 56  };
 57  
 58  const DetailsTemplate = {
 59    name: "Details",
 60    fields: [
 61      {
 62        name: "summary",
 63        label: "Summary",
 64        type: "string",
 65        isTitle: true,
 66        required: true,
 67      },
 68      {
 69        name: "children",
 70        label: "Details",
 71        type: "rich-text",
 72      },
 73    ],
 74  };
 75  
 76  const CodeBlockTemplate = {
 77    name: "CodeBlock",
 78    label: "Code Block",
 79    fields: [
 80      {
 81        name: "title",
 82        label: "Filename",
 83        type: "string",
 84      },
 85      {
 86        name: "language",
 87        label: "Language",
 88        type: "string",
 89      },
 90      {
 91        name: "children",
 92        label: "Code",
 93        type: "rich-text",
 94        required: true,
 95      },
 96    ],
 97  };
 98  
 99  const TabsTemplate = {
100    name: "Tabs",
101    fields: [
102      {
103        name: "children",
104        label: "Tabs",
105        type: "rich-text",
106        templates: [
107          {
108            name: "TabItem",
109            label: "Tab",
110            ui: {
111              defaultItem: {
112                label: "Tab",
113                value: "tab",
114              },
115            },
116            fields: [
117              {
118                name: "label",
119                label: "Label",
120                type: "string",
121                isTitle: true,
122                required: true,
123              },
124              {
125                name: "value",
126                type: "string",
127                ui: {
128                  component: ({ input, tinaForm }) => {
129                    React.useEffect(() => {
130                      input.onChange(slugify(tinaForm.values.label));
131                    }, [JSON.stringify(tinaForm.values)]);
132  
133                    return (
134                      <input
135                        type="text"
136                        id={input.name}
137                        className="hidden"
138                        {...input}
139                      />
140                    );
141                  },
142                },
143              },
144              {
145                name: "children",
146                label: "Content",
147                type: "string",
148                ui: {
149                  component: "textarea",
150                },
151              },
152            ],
153          },
154        ],
155      },
156    ],
157  };
158  
159  const DocCardListTemplate = {
160    name: "DocCardList",
161    label: "Doc Card List",
162    fields: [
163      {
164        name: "title",
165        label: "Title",
166        type: "string",
167      },
168    ],
169  };
170  
171  export const MDXTemplates = [
172    AdmonitionTemplate,
173    DetailsTemplate,
174    CodeBlockTemplate,
175    TabsTemplate,
176    DocCardListTemplate,
177  ];