prismic-example-4.ts

const Refer = ({
  headline, body, link, link_text
}: any) => {
  if (!headline) {
    return (
      <EditorAlert block>
        Your refer component is missing a headline, which is required.
      </EditorAlert>
    );
  }

  if (!link) {
    return (
      <EditorAlert block>
        Your refer component is missing a link, which is required.
      </EditorAlert>
    );
  }

  return (
    <aside>
      <h1>{headline}</h1>
      {body
        ? <p>{body}</p>
        : (
          <EditorAlert>
            <p>
              The style guide suggests some body text here, but it’s not required.
            </p>
          </EditorAlert>
        )}
      <a href={link}>{link_text || 'Read more'}</a>
    </aside>
  );
};

export default Refer;