fix #989

Author: bluebill1049

src/components/FormFields.tsx

@@ -8,14 +8,14 @@ const errorStyle = {
 }
 
 const FormFields = ({ formData, errors, register }) => {
-  return (formData || []).map((field) => {
+  return (formData || []).map((field, i) => {
     switch (field.type) {
       case "select":
         return (
           <select
             aria-label={field.name}
             {...register(field.name, { required: field.required })}
-            key={field.name}
+            key={field.name + i}
             style={{
               marginBottom: 20,
               ...(errors[field.name] ? errorStyle : null),

src/components/Nav.tsx

@@ -151,7 +151,7 @@ export default function Nav() {
             </Link>
 
             <Link
-              className={router.pathname == "/dev-tools" ? "active" : ""}
+              className={router.asPath == "/dev-tools" ? "active" : ""}
               href="/dev-tools"
             >
               <div className={styles.iconWrapper}>
@@ -172,7 +172,7 @@ export default function Nav() {
             <span>{nav.home}</span>
           </Link>
           <Link
-            className={router.pathname == "/get-started" ? "active" : ""}
+            className={router.asPath == "/get-started" ? "active" : ""}
             href="/get-started"
           >
             <div className={styles.iconWrapper}>
@@ -196,7 +196,7 @@ export default function Nav() {
             </div>
             <span>API</span>
           </Link>
-          <Link className={router.pathname == "/ts" ? "active" : ""} href="/ts">
+          <Link className={router.asPath == "/ts" ? "active" : ""} href="/ts">
             <div className={styles.iconWrapper}>
               <span
                 style={{
@@ -217,7 +217,7 @@ export default function Nav() {
             <span>TS</span>
           </Link>
           <Link
-            className={router.pathname == "/advanced-usage" ? "active" : ""}
+            className={router.asPath == "/advanced-usage" ? "active" : ""}
             href="/advanced-usage"
           >
             <div className={styles.iconWrapper}>
@@ -226,7 +226,7 @@ export default function Nav() {
             <span>{nav.advanced}</span>
           </Link>
           <Link
-            className={router.pathname == "/faqs" ? "active" : ""}
+            className={router.asPath == "/faqs" ? "active" : ""}
             href="/faqs"
           >
             <div className={styles.iconWrapper}>
@@ -315,7 +315,16 @@ export default function Nav() {
             </div>
           </span>
 
-          <span className="desktopOnly">
+          <span
+            className="desktopOnly"
+            style={
+              pathname.includes("resources")
+                ? {
+                    borderBottom: "1px solid #bf1650",
+                  }
+                : {}
+            }
+          >
             <span className={styles.tools}>
               <span
                 style={{