fix: build errors, formList link on whole box

components/FormList.tsx

@@ -1,6 +1,3 @@
-import Link from "next/link";
-import Router from "next/router";
-import { Fragment } from "react";
 import { Menu, Transition } from "@headlessui/react";
 import {
   DocumentAddIcon,
@@ -8,11 +5,13 @@ import {
   TerminalIcon,
   ViewGridAddIcon,
 } from "@heroicons/react/outline";
-import EmptyPageFiller from "./layout/EmptyPageFiller";
 import { DotsHorizontalIcon, TrashIcon } from "@heroicons/react/solid";
-import { classNames } from "../lib/utils";
+import Link from "next/link";
+import Router from "next/router";
+import { Fragment } from "react";
 import { createForm, useForms } from "../lib/forms";
-import Image from "next/image";
+import { classNames } from "../lib/utils";
+import EmptyPageFiller from "./layout/EmptyPageFiller";
 
 export default function FormList() {
   const { forms, mutateForms } = useForms();
@@ -47,8 +46,7 @@ export default function FormList() {
               hintText="Start by creating a form."
               buttonText="create form"
               borderStyles="border-4 border-dotted border-red"
-              icon="BsFilePlus"
-              button="true"
+              button={true}
             >
               <DocumentAddIcon className="w-24 h-24 mx-auto text-ui-gray-medium stroke-thin" />
             </EmptyPageFiller>
@@ -68,14 +66,11 @@ export default function FormList() {
             {forms
               .sort((a, b) => b.updatedAt - a.updatedAt)
               .map((form, formIdx) => (
-                <li key={form.id} className="col-span-1 ">
+                <li key={form.id} className="col-span-1 realative ">
                   <div className="flex flex-col justify-between h-full bg-white rounded-md shadow">
+                    <div className="px-4 py-5 text-lg sm:p-6">{form.name}</div>
                     <Link href={`/forms/${form.id}`}>
-                      <a>
-                        <div className="px-4 py-5 text-lg sm:p-6">
-                          {form.name}
-                        </div>
-                      </a>
+                      <a className="absolute w-full h-full" />
                     </Link>
                     <div className="divide-y divide-ui-gray-light ">
                       <div className="inline-flex px-2 py-1 mb-2 ml-4 text-sm rounded-sm bg-ui-gray-light text-ui-gray-dark">

components/StandardButton.tsx

@@ -1,27 +1,29 @@
 import React from "react";
+import { classNames } from "../lib/utils";
 
 interface Props {
   children: React.ReactNode;
-  onClick: () => void;
+  onClick?: () => void;
   disabled?: boolean;
   fullwidth?: boolean;
+  [key: string]: any;
 }
 
 // button component, consuming props
 const StandardButton: React.FC<Props> = ({
   children,
-  onClick,
+  onClick = () => {},
   disabled = false,
   fullwidth = false,
   ...rest
 }) => {
   return (
     <button
-      className={
-        `inline-flex items-center px-5 py-3 text-sm text-white rounded shadow-sm bg-snoopfade focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 ` +
-        (disabled ? " disabled" : "") +
-        (fullwidth ? " w-full justify-center " : "")
-      }
+      className={classNames(
+        `inline-flex items-center px-5 py-3 text-sm text-white rounded shadow-sm bg-snoopfade focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500`,
+        disabled ? "disabled:opacity-50" : "",
+        fullwidth ? " w-full justify-center " : ""
+      )}
       onClick={onClick}
       disabled={disabled}
       {...rest}

components/layout/EmptyPageFiller.tsx

@@ -3,23 +3,22 @@ import StandardButton from "../StandardButton";
 
 interface Props {
   children: React.ReactNode;
-  onClick: () => void;
+  onClick?: () => void;
   alertText: string;
   hintText: string;
-  buttonText: string;
-  borderStyles: string;
-  button: boolean;
+  buttonText?: string;
+  borderStyles?: string;
+  button?: boolean;
 }
 
 const EmptyPageFiller: React.FC<Props> = ({
   children,
-  onClick,
+  onClick = () => {},
   alertText,
   hintText,
   buttonText,
   borderStyles,
   button = false,
-  ...rest
 }) => {
   return (
     <div
@@ -33,9 +32,11 @@ const EmptyPageFiller: React.FC<Props> = ({
         {alertText}
       </h3>
       <p className="mt-1 text-xs font-light text-ui-gray-medium">{hintText}</p>
-      <div className={`mt-6` + (button ? " " : " hidden")}>
-        <StandardButton onClick={onClick}>{buttonText}</StandardButton>
-      </div>
+      {button && (
+        <div className="mt-6">
+          <StandardButton onClick={onClick}>{buttonText}</StandardButton>
+        </div>
+      )}
     </div>
   );
 };