text: import React from 'react';
  
  import PropTypes from 'prop-types';
  import { Link } from 'gatsby';
  
  const ContentNav = ({ prev, next, pathPrefix }) => (
    <div className="mt-32 flex flex-col-reverse sm:flex-row items-stretch rounded border border-teal-500 divide-x-0 sm:divide-x divide-y divide-y-reverse sm:divide-y-0 divide-teal-500">
      {prev && (
        <Link
          className="group flex-1 w-full h-full py-4 px-8 flex flex-col duration-200"
          to={`${pathPrefix}/${prev.node.fields.slug}`}
        >
          <span className="font-semibold text-teal-500 dark:text-teal-400">
            &larr; PREV
          </span>
          <span className="mt-2 text-gray-500 dark:text-gray-300 text-sm sm:text-md">
            {prev.node.frontmatter.title}
          </span>
        </Link>
      )}
      {next && (
        <Link
          className="group flex-1 w-full h-full py-4 px-8 flex flex-col duration-200"
          to={`${pathPrefix}/${next.node.fields.slug}`}
        >
          <span className="self-end font-semibold text-teal-500 dark:text-teal-400">
            NEXT &rarr;
          </span>
          <span className="self-end mt-2 text-gray-500 dark:text-gray-300 text-sm sm:text-md">
            {next.node.frontmatter.title}
          </span>
        </Link>
      )}
    </div>
  );
  
  ContentNav.propTypes = {
    prev: PropTypes.object,
    next: PropTypes.object,
    pathPrefix: PropTypes.string.isRequired,
  };
  
  export default ContentNav;
  