import { Playground, Props } from "@slytrunk/docs";
import { View } from "../View";
import StructuredContent from "./StructuredContent";

# StructuredContent

Used to render structured content from the CMS as react nodes

<Props of={StructuredContent} />

## Usage

<Playground>
  {() => {
    const data = {
      type: "text",
      content: [
        {
          type: "heading",
          text: "Big Text",
        },
        {
          type: "paragraph",
          content: [
            {
              type: "text",
              text: "At RSG, we are ",
            },
            {
              type: "text",
              marks: [
                {
                  type: "strong",
                },
              ],
              text: "driven ",
            },
            {
              type: "text",
              text:
                "by our mission to grow the sport of soccer in the US and Asia.  Our company’s evolution and multi-cultural global following has allowed us to attract a ",
            },
            {
              type: "text",
              marks: [
                {
                  type: "strong",
                },
              ],
              text: "curious, ",
            },
            {
              type: "text",
              text:
                "diverse and talented team, while staying true to our passion. Building ",
            },
            {
              type: "text",
              marks: [
                {
                  type: "strong",
                },
              ],
              text: "trust",
            },
            {
              type: "text",
              text:
                " among our team and those we partner with is at the core of who we are. Our commitment to ",
            },
            {
              type: "text",
              marks: [
                {
                  type: "strong",
                },
              ],
              text: "inclusion",
            },
            {
              type: "text",
              text:
                " enables our employees to bring their authentic selves to work each day.  We are striving to build and nurture a culture where differences are celebrated. ",
            },
            {
              type: "text",
              text: "Click me",
              marks: [
                {
                  type: "link",
                  attrs: {
                    href: "https://slytrunk.com",
                  },
                },
                {
                  type: "em",
                },
              ],
            },
          ],
        },
        {
          type: "heading",
          text: "Kind of Big Text",
          attrs: {
            level: 2,
          },
        },
        {
          type: "blockquote",
          content: [
            {
              type: "paragraph",
              content: [
                {
                  type: "text",
                  text: "Example block quote.",
                },
              ],
            },
          ],
        },
        {
          type: "bullet_list",
          content: [
            {
              type: "list_item",
              content: [
                {
                  type: "paragraph",
                  content: [
                    {
                      type: "text",
                      text:
                        "This is an example of a particularly long list item so we can see how it wraps.",
                    },
                  ],
                },
              ],
            },
            {
              type: "list_item",
              content: [
                {
                  type: "paragraph",
                  content: [
                    {
                      type: "text",
                      text: "test 2",
                    },
                  ],
                },
              ],
            },
          ],
        },
        {
          type: "ordered_list",
          attrs: {
            order: 1,
          },
          content: [
            {
              type: "list_item",
              content: [
                {
                  type: "paragraph",
                  content: [
                    {
                      type: "text",
                      text: "test 2",
                    },
                  ],
                },
              ],
            },
            {
              type: "list_item",
              content: [
                {
                  type: "paragraph",
                  content: [
                    {
                      type: "text",
                      text: "test 3",
                    },
                  ],
                },
              ],
            },
            {
              type: "list_item",
              content: [
                {
                  type: "paragraph",
                  content: [
                    {
                      type: "text",
                      text: "test 3",
                    },
                  ],
                },
              ],
            },
            {
              type: "list_item",
              content: [
                {
                  type: "paragraph",
                  content: [
                    {
                      type: "text",
                      text: "test 3",
                    },
                  ],
                },
              ],
            },
            {
              type: "list_item",
              content: [
                {
                  type: "paragraph",
                  content: [
                    {
                      type: "text",
                      text: "test 3",
                    },
                  ],
                },
              ],
            },
            {
              type: "list_item",
              content: [
                {
                  type: "paragraph",
                  content: [
                    {
                      type: "text",
                      text: "test 3",
                    },
                  ],
                },
              ],
            },
            {
              type: "list_item",
              content: [
                {
                  type: "paragraph",
                  content: [
                    {
                      type: "text",
                      text: "test 3",
                    },
                  ],
                },
              ],
            },
            {
              type: "list_item",
              content: [
                {
                  type: "paragraph",
                  content: [
                    {
                      type: "text",
                      text: "test 3",
                    },
                  ],
                },
              ],
            },
            {
              type: "list_item",
              content: [
                {
                  type: "paragraph",
                  content: [
                    {
                      type: "text",
                      text: "test 3",
                    },
                  ],
                },
              ],
            },
            {
              type: "list_item",
              content: [
                {
                  type: "paragraph",
                  content: [
                    {
                      type: "text",
                      text: "test 3",
                    },
                  ],
                },
              ],
            },
            {
              type: "list_item",
              content: [
                {
                  type: "paragraph",
                  content: [
                    {
                      type: "text",
                      text: "test 3",
                    },
                  ],
                },
              ],
            },
          ],
        },
        {
          type: "image",
          image: {
            attributes: {
              url: "https://placekitten.com/200/300",
              meta: {
                width: 200,
                height: 300,
              },
            },
          },
        },
      ],
    };
    return (
      <View>
        <StructuredContent content={data.content} />
      </View>
    );
  }}
</Playground>