Created footer section

app/components/Footer.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import Image from "next/image";
+import { FaGithub } from "react-icons/fa";
+import { FaXTwitter, FaTelegram } from "react-icons/fa6";
+
+const Footer = () => {
+  return (
+    <footer className="flex flex-col mt-8 space-y-2">
+      <hr className=" border-t-2 border-[#00DCF7]" />
+      <div className="flex flex-col sm:flex-row sm:justify-between sm:px-6">
+        <div className="flex flex-row items-center justify-center space-x-2">
+          <Image
+            src={"/images/AmirKakavand.jpg"}
+            width={"80"}
+            height={"80"}
+            alt="Photo of Amir Kakavand"
+            className="rounded-full w-14 h-14 hidden sm:block"
+          />
+          <span className="text-xs sm:text-xl">
+            Designed and developed by Amir Kakavand
+          </span>
+        </div>
+        {/* Social Media */}
+        <div className="flex flex-row items-center justify-center space-x-10 mt-2 sm:mt-0">
+          <a
+            href="https://github.com/AmirKakavand"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <FaGithub className="text-3xl" />
+          </a>
+          <a
+            href="https://x.com/Amirkkvnd"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <FaXTwitter className="text-3xl" />
+          </a>
+          <a
+            href="https://t.me/Amirkkvnd"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <FaTelegram className="text-3xl" />
+          </a>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

app/components/Header.tsx

@@ -1,5 +1,6 @@
 import { useState, Dispatch, SetStateAction } from "react";
-import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import { IoCloseOutline } from "react-icons/io5";
+import { IoIosSearch } from "react-icons/io";
 
 interface IHeaderProps {
   name: string;
@@ -33,9 +34,9 @@ const Header = ({ name, setName, setSearchQuery }: IHeaderProps) => {
         />
         <div className="hidden md:inline text-slate-600 inset-y-auto right-0.5 md:right-4 absolute">
           {name === "" ? (
-            <MagnifyingGlassIcon className="w-7 h-7" />
+            <IoIosSearch className="w-7 h-7" />
           ) : (
-            <XMarkIcon
+            <IoCloseOutline
               className={mouseHover ? "w-7 h-7 cursor-pointer" : "w-7 h-7"}
               onMouseEnter={() => setMouseHover(true)}
               onMouseLeave={() => setMouseHover(false)}

app/page.tsx

@@ -3,6 +3,7 @@ import { useState, useEffect } from "react";
 import { CharactersPage } from "./components/CharactersPage";
 import { handleSearch } from "./utils/handleSearch";
 import Header from "./components/Header";
+import Footer from "./components/Footer";
 
 export default function Home() {
   const [pageNo, setPageNo] = useState<number>(1);
@@ -23,6 +24,8 @@ export default function Home() {
           searchQuery={searchQuery}
         />
       )}
+
+      {searchQuery === "" && pageNo === 1 && <Footer />}
     </main>
   );
 }

package.json

@@ -14,6 +14,7 @@
     "next": "14.2.5",
     "react": "^18",
     "react-dom": "^18",
+    "react-icons": "^5.2.1",
     "swr": "^2.2.5"
   },
   "devDependencies": {