feat: reworked visuals of the app image cards

global.d.ts

@@ -0,0 +1,5 @@
+declare module '*.module.css' {
+  const content: Record<string, string>;
+  export default content;
+  export = content;
+}

src/components/AppImage.module.css

@@ -0,0 +1,13 @@
+.appImage {
+  @apply relative rounded-md overflow-hidden;
+}
+
+a.appImage {
+  @apply shadow-black shadow-md hover:shadow-black hover:shadow-sm;
+
+  &:after {
+    content: '';
+
+    @apply rounded-md pointer-events-none opacity-0 inset-0 absolute bg-white/10 transition-opacity hover:opacity-100;
+  }
+}

src/components/AppImage.tsx

@@ -1,6 +1,7 @@
 import { type FC } from 'react';
 import { Link } from 'react-router-dom';
 import { cn } from '../utils/cn';
+import * as styles from './AppImage.module.css';
 
 type Props = {
   className?: string;
@@ -10,16 +11,13 @@ type Props = {
 
 export const AppImage: FC<Props> = ({ className, id, to }) => {
   return to ? (
-    <Link
-      className={cn(
-        'relative rounded-md hover:after:opacity-100 after:content-[""] after:pointer-events-none after:opacity-0 after:inset-0 after:absolute after:bg-black/20 after:transition-opacity',
-        className
-      )}
-      to={to}
-    >
-      <img className="rounded-md" src={`https://steamcdn-a.akamaihd.net/steam/apps/${id}/header.jpg`} />
+    <Link className={cn(styles.appImage, className)} to={to}>
+      <img src={`https://steamcdn-a.akamaihd.net/steam/apps/${id}/header.jpg`} />
     </Link>
   ) : (
-    <img className={cn('rounded-md', className)} src={`https://steamcdn-a.akamaihd.net/steam/apps/${id}/header.jpg`} />
+    <img
+      className={cn(styles.appImage, className)}
+      src={`https://steamcdn-a.akamaihd.net/steam/apps/${id}/header.jpg`}
+    />
   );
 };

tailwind.config.ts

@@ -1,7 +1,7 @@
 import type { Config } from 'tailwindcss';
 
 export default {
-  content: ['./src/**/*.{html,js,mjs,ts,tsx}', './components/**/*.{html,js,mjs,ts,tsx}'],
+  content: ['./src/**/*.{html,js,mjs,ts,tsx}'],
   theme: {},
   plugins: [],
 } satisfies Config;