@theguild/components
Version:
81 lines (80 loc) • 3.59 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { createElement } from "react";
import { useState } from "react";
import { buildSchema } from "graphql";
import { ExecutableDocumentEditor, SchemaEditor } from "@theguild/editor";
import { CaretSlimIcon, MoreIcon, ShareIcon } from "./icons";
import { Image } from "./image";
import { Tag, TagsContainer } from "./tag";
const Editor = ({
title,
frameworks = [],
image,
children
}) => {
return /* @__PURE__ */ jsxs("div", { className: "min-w-full max-w-full pr-px lg:min-w-[25%] lg:max-w-[25%]", children: [
/* @__PURE__ */ jsxs("div", { className: "flex h-[85px] items-center justify-between bg-gray-100 p-3.5 dark:bg-transparent", children: [
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
image && /* @__PURE__ */ jsx(Image, { src: image, alt: "logo", className: "size-14" }),
/* @__PURE__ */ jsxs("span", { children: [
title && /* @__PURE__ */ jsx("p", { className: "text-sm dark:text-gray-50", children: title }),
frameworks.length > 0 && /* @__PURE__ */ jsx("span", { className: "text-sm dark:text-gray-50", children: frameworks.map((name) => /* @__PURE__ */ jsx(
"span",
{
className: "before:mx-1.5 before:content-['\u2022'] before:first-of-type:hidden",
children: name
},
name
)) })
] })
] }),
/* @__PURE__ */ jsx(Button, { children: /* @__PURE__ */ jsx(CaretSlimIcon, { className: "size-4" }) })
] }),
children
] });
};
const Button = ({ children }) => {
return /* @__PURE__ */ jsx(
"button",
{
type: "button",
className: "rounded-md bg-gray-300 p-3 text-black transition hover:opacity-70",
children
}
);
};
const SchemaPage = ({
schemaName,
tags = [],
editorData
}) => {
const [schemaObj, setSchemaObj] = useState(() => buildSchema(editorData[0].schema));
return /* @__PURE__ */ jsxs("section", { className: "w-full bg-white dark:bg-dark", children: [
/* @__PURE__ */ jsxs("div", { className: "container flex max-w-[90rem] justify-between py-6 max-md:flex-col md:gap-16", children: [
/* @__PURE__ */ jsxs("span", { className: "pb-6 md:pb-0", children: [
/* @__PURE__ */ jsx("h2", { className: "mb-4 mt-0 text-xl font-bold text-black md:text-2xl dark:text-gray-50", children: schemaName }),
/* @__PURE__ */ jsx(TagsContainer, { children: tags.map((tagName) => /* @__PURE__ */ jsx(Tag, { children: tagName }, tagName)) })
] }),
/* @__PURE__ */ jsxs("span", { className: "flex items-start gap-2.5", children: [
/* @__PURE__ */ jsx(Button, { children: /* @__PURE__ */ jsx(ShareIcon, {}) }),
/* @__PURE__ */ jsx(Button, { children: /* @__PURE__ */ jsx(MoreIcon, {}) })
] })
] }),
/* @__PURE__ */ jsxs("div", { className: "flex", children: [
/* @__PURE__ */ jsx(Editor, { ...editorData[0], children: /* @__PURE__ */ jsx(
SchemaEditor,
{
schema: editorData[0].schema,
onSchemaChange: (newSchemaObject) => {
setSchemaObj(newSchemaObject);
}
}
) }),
/* @__PURE__ */ jsx(Editor, { ...editorData[1], children: /* @__PURE__ */ jsx(ExecutableDocumentEditor, { schema: schemaObj, defaultValue: editorData[1].operations }) }),
editorData.slice(2).map((data) => /* @__PURE__ */ createElement(Editor, { ...data, key: data.title }, /* @__PURE__ */ jsx(SchemaEditor, { schema: data.schema })))
] })
] });
};
export {
SchemaPage
};