import { ArrowLongLeftIcon } from "@heroicons/react/24/solid";
import Link from "next/link";
import { ReactNode } from "react";

interface Props {
  children: ReactNode;
}

const ArticlesLayout = ({ children }: Props) => {
  return (
    <div className="md:w-1/2 mx-auto p-10 mt-16">
      <Link href="/articles" className="font-bold block mb-5">
        <ArrowLongLeftIcon className="w-[24px] inline "></ArrowLongLeftIcon>{" "}
        Back to Articles
      </Link>
      {children}
      <Link href="/articles" className="font-bold block mt-5">
        <ArrowLongLeftIcon className="w-[24px] inline "></ArrowLongLeftIcon>{" "}
        Back to Articles
      </Link>
    </div>
  );
};

export default ArticlesLayout;