feat: genre sliders (experiment) (#1182)

src/components/GenreCard/index.tsx

@@ -0,0 +1,58 @@
+import Link from 'next/link';
+import React, { useState } from 'react';
+import { withProperties } from '../../utils/typeHelpers';
+
+interface GenreCardProps {
+  name: string;
+  image: string;
+  url: string;
+}
+
+const GenreCard: React.FC<GenreCardProps> = ({ image, url, name }) => {
+  const [isHovered, setHovered] = useState(false);
+
+  return (
+    <Link href={url}>
+      <a
+        className={`relative flex items-center justify-center h-32 w-56 sm:h-40 sm:w-72 p-8 shadow transition ease-in-out duration-300 cursor-pointer transform-gpu ring-1 ${
+          isHovered
+            ? 'bg-gray-700 scale-105 ring-gray-500 bg-opacity-100'
+            : 'bg-gray-800 scale-100 ring-gray-700 bg-opacity-80'
+        } rounded-xl bg-cover bg-center overflow-hidden`}
+        style={{
+          backgroundImage: `url("${image}")`,
+        }}
+        onMouseEnter={() => {
+          setHovered(true);
+        }}
+        onMouseLeave={() => setHovered(false)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            setHovered(true);
+          }
+        }}
+        role="link"
+        tabIndex={0}
+      >
+        <div
+          className={`absolute z-10 inset-0 w-full h-full transition duration-300 bg-gray-800 ${
+            isHovered ? 'bg-opacity-10' : 'bg-opacity-30'
+          }`}
+        />
+        <div className="relative z-20 w-full text-2xl font-bold text-center text-white truncate whitespace-normal sm:text-3xl">
+          {name}
+        </div>
+      </a>
+    </Link>
+  );
+};
+
+const GenreCardPlaceholder: React.FC = () => {
+  return (
+    <div
+      className={`relative h-32 w-56 sm:h-40 sm:w-72 animate-pulse rounded-xl bg-gray-700`}
+    ></div>
+  );
+};
+
+export default withProperties(GenreCard, { Placeholder: GenreCardPlaceholder });