feat: add footer component (#30)

* feat: add footer component

* refactor: change the padding of the card

* refactor: add the flex on the item

* refactor: remove unneccessary classes

* refactor: change the file location

* refactor: add footer component

src/components/Footer.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import Star from "./icons/Star";
+import { getColorByAccess } from "../utils/helpers";
+import { filteredResources } from "../data/data-resources";
+
+const Footer = () => {
+  return (
+    <footer className="flex flex-col items-center my-4 p-4 px-8 text-base font-bold float-end border-2 border-gray-600 mr-14">
+      <h2 className="mb-4">All Resources are Open Access: unless indicated:</h2>
+      {filteredResources.map((data, index) => {
+        const color = getColorByAccess(data);
+        return (
+          <div
+            key={index}
+            className="flex gap-5 w-2/3 justify-center items-center"
+          >
+            <p className="text-center w-full">{data}</p>
+            <Star color={color} />
+          </div>
+        );
+      })}
+    </footer>
+  );
+};
+
+export default Footer;

src/data/data-resources.ts

@@ -0,0 +1,9 @@
+import output from "../../public/data.json";
+
+const dataResources = output
+  .map((entry) => entry?.PARSED_MANUAL_TAGS?.ACCESS)
+  .flat()
+  .filter((resource) => resource && !resource.includes("Open Access"))
+  .filter((data) => data) as string[];
+
+export const filteredResources = Array.from(new Set(dataResources));

src/pages/_app.tsx

@@ -1,16 +1,18 @@
-import { Header } from "@/components/header";
-import "@/styles/globals.css";
+import { Header } from "../components/header";
+import "../styles/globals.css";
 import "reactflow/dist/style.css";
 import type { AppProps } from "next/app";
-import { DefaultSeo } from "next-seo"
-import SEO from "../../next-seo.config"
+import { DefaultSeo } from "next-seo";
+import SEO from "../../next-seo.config";
+import Footer from "../components/Footer";
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
     <>
       <DefaultSeo {...SEO} />
       <Header />
       <Component {...pageProps} />
+      <Footer />
     </>
   );
 }