feat: display app name on hover

src/components/AppImage.module.css

@@ -14,4 +14,15 @@ a.appImage {
 
     @apply rounded-md pointer-events-none opacity-0 inset-0 absolute bg-white/10 transition-opacity hover:opacity-100;
   }
+
+  &:hover .name {
+    @apply translate-y-0 opacity-100;
+  }
+}
+
+.name {
+  border-bottom-left-radius: inherit;
+  border-bottom-right-radius: inherit;
+
+  @apply flex justify-center py-2 bg-black/50 rounded-t-none font-bold text-lg translate-y-full opacity-0 transition-all;
 }

src/components/AppImage.tsx

@@ -2,18 +2,22 @@ import { type FC } from 'react';
 import { Link } from 'react-router-dom';
 import { cn } from '../utils/cn';
 import * as styles from './AppImage.module.css';
+import type { App } from '@/types';
 
 type Props = {
   className?: string;
-  id: string;
+  app: App;
   to?: string;
 };
 
-export const AppImage: FC<Props> = ({ className, id, to }) => {
-  const url = `https://steamcdn-a.akamaihd.net/steam/apps/${id}/header.jpg`;
+export const AppImage: FC<Props> = ({ className, app, to }) => {
+  const url = `https://steamcdn-a.akamaihd.net/steam/apps/${app.id}/header.jpg`;
 
   return to ? (
     <Link className={cn(styles.appImage, 'group', className)} to={to}>
+      <div className="absolute inset-0 overflow-hidden flex flex-col justify-end">
+        <div className={styles.name}>{app.name}</div>
+      </div>
       <img src={url} />
       <img className="blur-none group-hover:blur absolute inset-0 -z-10 transition-all" src={url} />
     </Link>

src/pages/apps/AppPage.tsx

@@ -26,7 +26,7 @@ export const Component: FC = () => {
   return (
     <>
       <div className="flex flex-col gap-2 items-center">
-        <AppImage id={app.id} />
+        <AppImage app={app} />
         <div className="text-md">
           {app.name} ({app.id})
         </div>