frontend/nextjs/components/Footer.tsx

import Image from "next/image";
import Link from "next/link";
import Modal from './Settings/Modal';

interface ChatBoxSettings {
  report_source: string;
  report_type: string;
  tone: string;
}

interface ChatBoxProps {
  chatBoxSettings: ChatBoxSettings;
  setChatBoxSettings: React.Dispatch<React.SetStateAction<ChatBoxSettings>>;
}

const Footer = ({ setChatBoxSettings, chatBoxSettings}: ChatBoxProps) => {
  
  return (
    <>

      <div className="container flex min-h-[72px] mt-2 items-center justify-between border-t border-[#D2D2D2] px-4 pb-3 pt-5 lg:min-h-[72px] lg:px-0 lg:py-5">

        <Modal setChatBoxSettings={setChatBoxSettings} chatBoxSettings={chatBoxSettings} />

        <div className="text-sm text-gray-100">

            © {new Date().getFullYear()} GPT Researcher. All rights reserved.

        </div>

        <div className="flex items-center gap-3">

          <Link href={"https://github.com/assafelovic/gpt-researcher"} target="_blank">

            <Image

              src={"/img/github.svg"}

              alt="github"

              width={30}

              height={30}

            />{" "}

          </Link>

          <Link href={"https://discord.gg/QgZXvJAccX"} target="_blank">

              <Image

                src={"/img/discord.svg"}

                alt="discord"

                width={30}

                height={30}

              />{" "}

          </Link>

          <Link href={"https://hub.docker.com/r/gptresearcher/gpt-researcher"} target="_blank">

              <Image

                src={"/img/docker.svg"}

                alt="docker"

                width={30}

                height={30}

              />{" "}

          </Link>

        </div>

      </div>

    </>
  );
};

export default Footer;