feat: tank card links

packages/website-ue/src/components/TankCard/index.module.css

@@ -23,12 +23,18 @@
     }
 
     .icon {
-      width: 13rem;
-      height: 8rem;
+      width: 11rem;
+      height: 7rem;
       position: relative;
 
       background-size: 140%;
       background-position: 40% center;
+
+      .cover {
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(transparent 75%, var(--gray-1));
+      }
     }
   }
 

packages/website-ue/src/components/TankCard/index.tsx

@@ -1,16 +1,24 @@
 import { api } from "../../core/api/dynamic";
 import { useAwait } from "../../hooks/useAwait";
 import { useGameStrings } from "../../hooks/useGameStrings";
+import { useLocale } from "../../hooks/useLocale";
 import type { PopularTank } from "../../protos/popular_tanks";
+import { LinkI18n } from "../LinkI18n";
 import { Text } from "../Text";
 import styles from "./index.module.css";
 
 export function TankCard({ id }: PopularTank) {
   const tank = useAwait(() => api.tank(id), `tank-${id}`);
   const gameStrings = useGameStrings("TankEntity");
+  const locale = useLocale();
 
   return (
-    <div className={styles["tank-card"]}>
+    <LinkI18n
+      href={`/tanks/${tank.slug}`}
+      underline="never"
+      locale={locale}
+      className={styles["tank-card"]}
+    >
       <div className={styles["icon-wrapper"]}>
         <div
           className={styles.flag}
@@ -24,10 +32,12 @@ export function TankCard({ id }: PopularTank) {
           style={{
             backgroundImage: `url(/api/tanks/${id}.webp)`,
           }}
-        />
+        >
+          <div className={styles.cover} />
+        </div>
       </div>
 
       <Text className={styles.name}>{gameStrings[tank.tank!.name!.value]}</Text>
-    </div>
+    </LinkI18n>
   );
 }