From 721cd85005ee9d057986b0ceab24de4a7d8a94dd Mon Sep 17 00:00:00 2001
From: Cecilia Sanare <ceci@sanare.dev>
Date: Wed, 6 Mar 2024 18:27:00 -0600
Subject: [PATCH] feat: reworked visuals of the app image cards

---
 global.d.ts                        |  5 +++++
 src/components/AppImage.module.css | 13 +++++++++++++
 src/components/AppImage.tsx        | 16 +++++++---------
 tailwind.config.ts                 |  2 +-
 4 files changed, 26 insertions(+), 10 deletions(-)
 create mode 100644 global.d.ts
 create mode 100644 src/components/AppImage.module.css

diff --git a/global.d.ts b/global.d.ts
new file mode 100644
index 0000000..48cd86a
--- /dev/null
+++ b/global.d.ts
@@ -0,0 +1,5 @@
+declare module '*.module.css' {
+  const content: Record<string, string>;
+  export default content;
+  export = content;
+}
diff --git a/src/components/AppImage.module.css b/src/components/AppImage.module.css
new file mode 100644
index 0000000..7097e52
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/src/components/AppImage.tsx b/src/components/AppImage.tsx
index 2b5fe70..a4ea150 100644
--- a/src/components/AppImage.tsx
+++ b/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`}
+    />
   );
 };
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 4bc7343..a332d03 100644
--- a/tailwind.config.ts
+++ b/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;