refactor: update Next.js, React.js and Node.js (#815)

* refactor: update Next.js and React.js

* refactor: update Next.js images

* refactor: update ESLint rules and fix warnings/errors

* fix: remove old intl polyfill

* fix: add proper size to next/image components

* fix: adjust full-size for next/image components

* fix: temporary allow all domains for image optimization

* build: fixes an issue where dev env could lead to javascript heap out of memory

* fix: resolve webpack cache issue with country-flag-icons

* refactor: switch compiler from Babel to SWC

* fix: resize logo in sidebar

* fix: break word on long path to avoid text overflow

* chore: added sharp for production image optimisation

* fix: change extract script for i18n to a custom script

* fix: resolve GitHub CodeQL alert

* chore: temporarily remove builds for ARMv7

* fix: resize avatar images

* refactor: update Node.js to v20

* fix: resolve various UI issues

* build: migrate yarn to pnpm and restrict engine to node@^20.0.0

* ci: specify the pnpm version to use in workflow actions

* ci: fix typo in pnpm action-setup for cypress workflow

* test(cypress): use pnpm instead of yarn

* style: ran prettier on pnpm-lock

* ci(cypress): setup nodejs v20 in cypress workflow

* ci: pnpm cache to reduce install time

* ci: use sh shell to get pnpm store directory

* build(dockerfile): migrate to pnpm from yarn in docker builds

* build(dockerfile): copy the proper pnpm lockfile

* build: install pnpm for all platforms

* build(dockerfile): remove unnecessary `&&` on apk installation steps

* build: migrate pnpm 8 to 9

* build(dockerfile): add node-gyp back in

* build(dockerfile): install node-gyp through npm

* build(dockerfile): ignore scripts to not run husky install when devdependencies are pruned

* build: migrate to pnpm from yarn

* chore: remove a section that is no longer relevant

---------

Co-authored-by: fallenbagel <98979876+Fallenbagel@users.noreply.github.com>

src/components/GenreCard/index.tsx

@@ -14,37 +14,41 @@ const GenreCard = ({ image, url, name, canExpand = false }: GenreCardProps) => {
   const [isHovered, setHovered] = useState(false);
 
   return (
-    <Link href={url}>
-      <a
-        className={`relative flex h-32 items-center justify-center sm:h-36 ${
-          canExpand ? 'w-full' : 'w-56 sm:w-72'
-        } transform-gpu cursor-pointer p-8 shadow ring-1 transition duration-300 ease-in-out ${
-          isHovered
-            ? 'scale-105 bg-gray-700 bg-opacity-100 ring-gray-500'
-            : 'scale-100 bg-gray-800 bg-opacity-80 ring-gray-700'
-        } overflow-hidden rounded-xl bg-cover bg-center`}
-        onMouseEnter={() => {
+    <Link
+      href={url}
+      className={`relative flex h-32 items-center justify-center sm:h-36 ${
+        canExpand ? 'w-full' : 'w-56 sm:w-72'
+      } transform-gpu cursor-pointer p-8 shadow ring-1 transition duration-300 ease-in-out ${
+        isHovered
+          ? 'scale-105 bg-gray-700 bg-opacity-100 ring-gray-500'
+          : 'scale-100 bg-gray-800 bg-opacity-80 ring-gray-700'
+      } overflow-hidden rounded-xl bg-cover bg-center`}
+      onMouseEnter={() => {
+        setHovered(true);
+      }}
+      onMouseLeave={() => setHovered(false)}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter') {
           setHovered(true);
-        }}
-        onMouseLeave={() => setHovered(false)}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter') {
-            setHovered(true);
-          }
-        }}
-        role="link"
-        tabIndex={0}
-      >
-        <CachedImage src={image} alt="" layout="fill" objectFit="cover" />
-        <div
-          className={`absolute inset-0 z-10 h-full w-full bg-gray-800 transition duration-300 ${
-            isHovered ? 'bg-opacity-10' : 'bg-opacity-30'
-          }`}
-        />
-        <div className="relative z-20 w-full truncate whitespace-normal text-center text-2xl font-bold text-white sm:text-3xl">
-          {name}
-        </div>
-      </a>
+        }
+      }}
+      role="link"
+      tabIndex={0}
+    >
+      <CachedImage
+        src={image}
+        alt=""
+        style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+        fill
+      />
+      <div
+        className={`absolute inset-0 z-10 h-full w-full bg-gray-800 transition duration-300 ${
+          isHovered ? 'bg-opacity-10' : 'bg-opacity-30'
+        }`}
+      />
+      <div className="relative z-20 w-full truncate whitespace-normal text-center text-2xl font-bold text-white sm:text-3xl">
+        {name}
+      </div>
     </Link>
   );
 };