Fix bugs

components/layout/footer/footer.tsx

@@ -1,23 +1,10 @@
 import React from "react";
-import Link from "next/link";
 import { FaFacebookF, FaGithub, FaTwitter } from "react-icons/fa";
 import { AiFillInstagram } from "react-icons/ai";
 import { Container } from "../../util/container";
-import { RawRenderer } from "./rawRenderer";
 
-export const Footer = ({ data, icon, rawData }) => {
+export const Footer = ({ data }) => {
   const socialIconClasses = "h-7 w-auto";
-  const socialIconColorClasses = {
-    blue: "text-blue-500 dark:text-blue-400 hover:text-blue-300",
-    teal: "text-teal-500 dark:text-teal-400 hover:text-teal-300",
-    green: "text-green-500 dark:text-green-400 hover:text-green-300",
-    red: "text-red-500 dark:text-red-400 hover:text-red-300",
-    pink: "text-pink-500 dark:text-pink-400 hover:text-pink-300",
-    purple: "text-purple-500 dark:text-purple-400 hover:text-purple-300",
-    orange: "text-orange-500 dark:text-orange-400 hover:text-orange-300",
-    yellow: "text-yellow-500 dark:text-yellow-400 hover:text-yellow-300",
-    primary: "text-white opacity-80 hover:opacity-100",
-  };
 
   const footerColor = {
     default:

components/layout/footer/rawRenderer.tsx

@@ -1,20 +1,8 @@
 import React from "react";
 import { Fragment, useState } from "react";
 import { Dialog, Transition } from "@headlessui/react";
-import { useTheme } from "..";
 
 export const RawRenderer = ({ rawData, parentColor }) => {
-  const theme = useTheme();
-  const buttonColorClasses = {
-    blue: "text-blue-500",
-    teal: "text-teal-500",
-    green: "text-green-500",
-    red: "text-red-500",
-    pink: "text-pink-500",
-    purple: "text-purple-500",
-    orange: "text-orange-500",
-    yellow: "text-yellow-600",
-  };
   const [isOpen, setIsOpen] = useState(false);
 
   function closeModal() {
@@ -30,9 +18,7 @@ export const RawRenderer = ({ rawData, parentColor }) => {
       <button
         type="button"
         onClick={openModal}
-        className={`z-10 relative flex items-center px-5 py-2 mx-3 my-2 font-semibold shadow-sm text-sm transition duration-150 ease-out rounded transform focus:shadow-outline focus:outline-none whitespace-nowrap opacity-80 hover:opacity-100 shadow-md ${
-          buttonColorClasses[theme.color]
-        }`}
+        className={`z-10 relative flex items-center px-5 py-2 mx-3 my-2 font-semibold shadow-sm text-sm transition duration-150 ease-out rounded transform focus:shadow-outline focus:outline-none whitespace-nowrap opacity-80 hover:opacity-100 text-blue-500`}
       >
         View Raw Data
         <span

components/layout/header.tsx

@@ -7,6 +7,7 @@ export const Header = ({ data }) => {
   const router = useRouter();
 
   // If we're on an admin path, other links should also link to their admin paths
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [prefix, setPrefix] = useState("");
   const [expanded, setExpanded] = useState(false);
 

components/layout/layout.tsx

@@ -17,7 +17,7 @@ export const Layout = ({ rawData = {}, data = layoutData, children }) => {
           {children}
         </div>
         <Footer
-          rawData={rawData}
+          rawData={rawData as any}
           data={data?.footer}
           icon={data?.header.icon}
         />

components/util/actions.tsx

@@ -2,57 +2,7 @@ import Link from "next/link";
 import * as React from "react";
 import { BiRightArrowAlt } from "react-icons/bi";
 
-export const Actions = ({
-  parentColor = "default",
-  parentField = "",
-  className = "",
-  actions,
-}) => {
-  const buttonColorClasses = {
-    blue: "text-white bg-blue-500 hover:bg-blue-600 bg-gradient-to-r from-blue-400 to-blue-600 hover:from-blue-400 hover:to-blue-500",
-    teal: "text-white bg-teal-500 hover:bg-teal-600 bg-gradient-to-r from-teal-400 to-teal-600 hover:from-teal-400 hover:to-teal-500",
-    green:
-      "text-white bg-green-500 hover:bg-green-600 bg-gradient-to-r from-green-400 to-green-600 hover:from-green-400 hover:to-green-500",
-    red: "text-white bg-red-500 hover:bg-red-600 bg-gradient-to-r from-red-500 to-red-600 hover:from-red-400 hover:to-red-500",
-    pink: "text-white bg-pink-500 hover:bg-pink-600 bg-gradient-to-r from-pink-400 to-pink-600 hover:from-pink-400 hover:to-pink-500",
-    purple:
-      "text-white bg-purple-500 hover:bg-purple-600 bg-gradient-to-r from-purple-400 to-purple-600 hover:from-purple-400 hover:to-purple-500",
-    orange:
-      "text-white bg-orange-500 hover:bg-orange-600 bg-gradient-to-r from-orange-400 to-orange-600 hover:from-orange-400 hover:to-orange-500",
-    yellow:
-      "text-gray-800 bg-yellow-500 hover:bg-yellow-600 bg-gradient-to-r from-yellow-400 to-yellow-600 hover:from-yellow-400 hover:to-yellow-500",
-  };
-
-  const invertedButtonColorClasses = {
-    blue: "text-blue-500 bg-white hover:bg-gray-50 bg-gradient-to-r from-gray-50 to-white hover:to-gray-100",
-    teal: "text-teal-500 bg-white hover:bg-gray-50 bg-gradient-to-r from-gray-50 to-white hover:to-gray-100",
-    green:
-      "text-green-500 bg-white hover:bg-gray-50 bg-gradient-to-r from-gray-50 to-white hover:to-gray-100",
-    red: "text-red-500 bg-white hover:bg-gray-50 bg-gradient-to-r from-gray-50 to-white hover:to-gray-100",
-    pink: "text-pink-500 bg-white hover:bg-gray-50 bg-gradient-to-r from-gray-50 to-white hover:to-gray-100",
-    purple:
-      "text-purple-500 bg-white hover:bg-gray-50 bg-gradient-to-r from-gray-50 to-white hover:to-gray-100",
-    orange:
-      "text-orange-500 bg-white hover:bg-gray-50 bg-gradient-to-r from-gray-50 to-white hover:to-gray-100",
-    yellow:
-      "text-yellow-500 bg-white hover:bg-gray-50 bg-gradient-to-r from-gray-50 to-white hover:to-gray-100",
-  };
-
-  const linkButtonColorClasses = {
-    blue: "text-blue-600 dark:text-blue-400 hover:text-blue-400 dark:hover:text-blue-200",
-    teal: "ttext-teal-600 dark:text-teal-400 hover:text-teal-400 dark:hover:text-teal-200",
-    green:
-      "text-green-600 dark:text-green-400 hover:text-green-400 dark:hover:text-green-200",
-    red: "text-red-600 dark:text-red-400 hover:text-red-400 dark:hover:text-red-200",
-    pink: "text-pink-600 dark:text-pink-400 hover:text-pink-400 dark:hover:text-pink-200",
-    purple:
-      "text-purple-600 dark:text-purple-400 hover:text-purple-400 dark:hover:text-purple-200",
-    orange:
-      "text-orange-600 dark:text-orange-400 hover:text-orange-400 dark:hover:text-orange-200",
-    yellow:
-      "text-yellow-600 dark:text-yellow-400 hover:text-yellow-400 dark:hover:text-yellow-200",
-  };
-
+export const Actions = ({ parentField = "", className = "", actions }) => {
   return (
     <div className={`flex flex-wrap items-center gap-y-4 gap-x-6 ${className}`}>
       {actions &&

pages/[filename].tsx

@@ -2,16 +2,18 @@ import { Blocks } from "../components/blocks-renderer";
 import { useTina } from "tinacms/dist/react";
 import { Layout } from "../components/layout";
 import { client } from "../tina/__generated__/client";
+import { InferGetStaticPropsType } from "next";
 
 export default function HomePage(
-  props: AsyncReturnType<typeof getStaticProps>["props"]
+  props: InferGetStaticPropsType<typeof getStaticProps>
 ) {
   const { data } = useTina({
     query: props.query,
     variables: props.variables,
     data: props.data,
   });
   return (
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     <Layout rawData={data} data={data.global as any}>
       <Blocks {...data.page} />
     </Layout>
@@ -40,6 +42,3 @@ export const getStaticPaths = async () => {
     fallback: false,
   };
 };
-
-export type AsyncReturnType<T extends (...args: any) => Promise<any>> =
-  T extends (...args: any) => Promise<infer R> ? R : any;

pages/reviews/[filename].tsx

@@ -1,18 +1,16 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { client } from "../../tina/__generated__/client";
 import { useTina } from "tinacms/dist/react";
 import { Layout } from "../../components/layout";
-import Image from "next/image";
 import { Section } from "../../components/util/section";
 import { Container } from "../../components/util/container";
 import format from "date-fns/format";
-import { TinaMarkdown, TinaMarkdownContent } from "tinacms/dist/rich-text";
-import { Configuration, OpenAIApi } from "openai";
-import { useState } from "react";
-import { FaSpinner } from "react-icons/fa";
+import { TinaMarkdown } from "tinacms/dist/rich-text";
+import { InferGetStaticPropsType } from "next";
 
 // Use the props returned by get static props
 export default function ReviewPage(
-  props: AsyncReturnType<typeof getStaticProps>["props"]
+  props: InferGetStaticPropsType<typeof getStaticProps>
 ) {
   const { data } = useTina({
     query: props.query,
@@ -108,7 +106,4 @@ export const getStaticPaths = async () => {
     })),
     fallback: "blocking",
   };
-};
-
-export type AsyncReturnType<T extends (...args: any) => Promise<any>> =
-  T extends (...args: any) => Promise<infer R> ? R : any;
+};

pages/reviews/index.tsx

@@ -3,9 +3,10 @@ import { Section } from "../../components/util/section";
 import { client } from "../../tina/__generated__/client";
 import { Layout } from "../../components/layout";
 import { Reviews } from "../../components/posts/reviews";
+import { InferGetStaticPropsType } from "next";
 
 export default function ReviewPage(
-  props: AsyncReturnType<typeof getStaticProps>["props"]
+  props: InferGetStaticPropsType<typeof getStaticProps>
 ) {
   const reviews = props.data.reviewConnection.edges;
 
@@ -28,6 +29,3 @@ export const getStaticProps = async () => {
     },
   };
 };
-
-export type AsyncReturnType<T extends (...args: any) => Promise<any>> =
-  T extends (...args: any) => Promise<infer R> ? R : any;