chore(frontend): fixed all eslint errors

frontend/src/pages/home/[id].tsx

@@ -1,7 +1,8 @@
 import { useEffect, useState } from 'react';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { useTranslation } from "next-i18next";
+import onboardingCheck from '@app/components/utilities/checks/OnboardingCheck';
+import { getTranslatedServerSideProps } from '@app/components/utilities/withTranslateProps';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { faSlack } from '@fortawesome/free-brands-svg-icons';
 import {
@@ -15,9 +16,6 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
-import onboardingCheck from '~/components/utilities/checks/OnboardingCheck';
-import { getTranslatedServerSideProps } from '~/components/utilities/withTranslateProps';
-
 import registerUserAction from '../api/userActions/registerUserAction';
 
 type ItemProps = {
@@ -46,10 +44,14 @@ const learningItem = ({
           target={`${link.includes('https') ? '_blank' : '_self'}`}
           rel="noopener noreferrer"
           className="w-full"
+          href="#"
         >
           <div
+            onKeyDown={() => null}
+            role="button"
+            tabIndex={0}
             onClick={async () => {
-              if (userAction && userAction != 'first_time_secrets_pushed') {
+              if (userAction && userAction !== 'first_time_secrets_pushed') {
                 await registerUserAction({
                   action: userAction
                 });
@@ -61,10 +63,7 @@ const learningItem = ({
               <FontAwesomeIcon icon={icon} className="text-4xl mx-2 w-16" />
               {complete && (
                 <div className="bg-bunker-700 w-7 h-7 rounded-full absolute left-12 top-10 p-2 flex items-center justify-center">
-                  <FontAwesomeIcon
-                    icon={faCheckCircle}
-                    className="text-4xl w-5 h-5 text-green"
-                  />
+                  <FontAwesomeIcon icon={faCheckCircle} className="text-4xl w-5 h-5 text-green" />
                 </div>
               )}
               <div className="flex flex-col items-start">
@@ -73,59 +72,51 @@ const learningItem = ({
               </div>
             </div>
             <div
-              className={`pr-4 font-semibold text-sm w-28 text-right ${
-                complete && 'text-green'
-              }`}
+              className={`pr-4 font-semibold text-sm w-28 text-right ${complete && 'text-green'}`}
             >
-              {complete ? 'Complete!' : 'About ' + time}
+              {complete ? 'Complete!' : `About ${time}`}
             </div>
-            {complete && (
-              <div className="absolute bottom-0 left-0 h-1 w-full bg-green"></div>
-            )}
+            {complete && <div className="absolute bottom-0 left-0 h-1 w-full bg-green" />}
           </div>
         </a>
       </Link>
     );
-  } else {
-    return (
-      <div
-        onClick={async () => {
-          if (userAction) {
-            await registerUserAction({
-              action: userAction
-            });
-          }
-        }}
-        className="relative bg-bunker-700 hover:bg-bunker-500 shadow-xl duration-200 rounded-md border border-dashed border-bunker-400 pl-2 pr-6 py-2 h-[5.5rem] w-full flex items-center justify-between overflow-hidden my-1.5 cursor-pointer"
-      >
-        <div className="flex flex-row items-center mr-4">
-          <FontAwesomeIcon icon={icon} className="text-4xl mx-2 w-16" />
-          {complete && (
-            <div className="bg-bunker-700 w-7 h-7 rounded-full absolute left-11 top-10">
-              <FontAwesomeIcon
-                icon={faCheckCircle}
-                className="absolute text-4xl left-12 top-16 w-5 h-5 text-green"
-              />
-            </div>
-          )}
-          <div className="flex flex-col items-start">
-            <div className="text-xl font-semibold mt-0.5">{text}</div>
-            <div className="text-sm font-normal mt-0.5">{subText}</div>
-          </div>
-        </div>
-        <div
-          className={`pr-4 font-semibold text-sm w-28 text-right ${
-            complete && 'text-green'
-          }`}
-        >
-          {complete ? 'Complete!' : 'About ' + time}
-        </div>
-        {complete && (
-          <div className="absolute bottom-0 left-0 h-1 w-full bg-green"></div>
-        )}
-      </div>
-    );
   }
+  return (
+    <div
+      onKeyDown={() => null}
+      role="button"
+      tabIndex={0}
+      onClick={async () => {
+        if (userAction) {
+          await registerUserAction({
+            action: userAction
+          });
+        }
+      }}
+      className="relative bg-bunker-700 hover:bg-bunker-500 shadow-xl duration-200 rounded-md border border-dashed border-bunker-400 pl-2 pr-6 py-2 h-[5.5rem] w-full flex items-center justify-between overflow-hidden my-1.5 cursor-pointer"
+    >
+      <div className="flex flex-row items-center mr-4">
+        <FontAwesomeIcon icon={icon} className="text-4xl mx-2 w-16" />
+        {complete && (
+          <div className="bg-bunker-700 w-7 h-7 rounded-full absolute left-11 top-10">
+            <FontAwesomeIcon
+              icon={faCheckCircle}
+              className="absolute text-4xl left-12 top-16 w-5 h-5 text-green"
+            />
+          </div>
+        )}
+        <div className="flex flex-col items-start">
+          <div className="text-xl font-semibold mt-0.5">{text}</div>
+          <div className="text-sm font-normal mt-0.5">{subText}</div>
+        </div>
+      </div>
+      <div className={`pr-4 font-semibold text-sm w-28 text-right ${complete && 'text-green'}`}>
+        {complete ? 'Complete!' : `About ${time}`}
+      </div>
+      {complete && <div className="absolute bottom-0 left-0 h-1 w-full bg-green" />}
+    </div>
+  );
 };
 
 /**
@@ -141,8 +132,6 @@ export default function Home() {
   const [hasUserPushedSecrets, setHasUserPushedSecrets] = useState(false);
   const [usersInOrg, setUsersInOrg] = useState(false);
 
-  const { t } = useTranslation();
-
   useEffect(() => {
     onboardingCheck({
       setHasUserClickedIntro,
@@ -156,9 +145,7 @@ export default function Home() {
   return (
     <div className="mx-6 lg:mx-0 w-full overflow-y-scroll pt-20 h-screen">
       <div className="flex flex-col items-center text-gray-300 text-lg mx-auto max-w-2xl lg:max-w-3xl xl:max-w-4xl py-6">
-        <div className="text-3xl font-bold text-left w-full">
-          Your quick start guide
-        </div>
+        <div className="text-3xl font-bold text-left w-full">Your quick start guide</div>
         <div className="text-md text-left w-full pt-2 pb-4 text-bunker-300">
           Click on the items below and follow the instructions.
         </div>
@@ -178,12 +165,11 @@ export default function Home() {
           icon: faPlus,
           time: '2 min',
           userAction: 'first_time_secrets_pushed',
-          link: '/dashboard/' + router.query.id
+          link: `/dashboard/${router.query.id}`
         })}
         {learningItem({
           text: 'Inject secrets locally',
-          subText:
-            'Replace .env files with a more secure an efficient alternative.',
+          subText: 'Replace .env files with a more secure an efficient alternative.',
           complete: false,
           icon: faNetworkWired,
           time: '8 min',
@@ -191,8 +177,7 @@ export default function Home() {
         })}
         {learningItem({
           text: 'Integrate Infisical with your infrastructure',
-          subText:
-            'Only a few integrations are currently available. Many more coming soon!',
+          subText: 'Only a few integrations are currently available. Many more coming soon!',
           complete: false,
           icon: faPlug,
           time: '15 min',
@@ -204,7 +189,7 @@ export default function Home() {
           complete: usersInOrg,
           icon: faUserPlus,
           time: '2 min',
-          link: '/settings/org/' + router.query.id + '?invite'
+          link: `/settings/org/${router.query.id}?invite`
         })}
         {learningItem({
           text: 'Join Infisical Slack',
@@ -231,4 +216,4 @@ export default function Home() {
 
 Home.requireAuth = true;
 
-export const getServerSideProps = getTranslatedServerSideProps(["home"]);
+export const getServerSideProps = getTranslatedServerSideProps(['home']);