feat: name fetching

packages/website/src/pages/[...locale]/tanks/index.astro

@@ -1,4 +1,6 @@
 ---
+import { asset, fetchTank } from '@blitzkit/core';
+import { Box, Flex, Text } from '@radix-ui/themes';
 import { LinkI18n } from '../../../components/LinkI18n';
 import { PageWrapper } from '../../../components/PageWrapper';
 import { tanksTool } from '../../../constants/tools';
@@ -10,18 +12,32 @@ export { getStaticPaths } from '../index.astro';
 const locale = Astro.params.locale;
 
 const tanks = await awaitableTanks;
+const fullTanks = await Promise.all(tanks.tanks.map(({ id }) => fetchTank(id)));
 ---
 
 <ToolLayout tool={tanksTool}>
   <PageWrapper>
     {
-      tanks.tanks
+      fullTanks
         .sort((a, b) => a.slug.localeCompare(b.slug))
-        .map((tank) => (
-          <LinkI18n {locale} href={`/tanks/${tank.slug}`}>
-            {tank.slug}
-          </LinkI18n>
-        ))
+        .map((tank) => {
+          return (
+            <LinkI18n {locale} href={`/tanks/${tank.slug}`}>
+              <Flex align="center" gap="2">
+                <Box
+                  width="8rem"
+                  height="6rem"
+                  style={{
+                    backgroundImage: `url(${asset(`tanks/${tank.id}/icons/big.png`)})`,
+                    backgroundSize: '150%',
+                    backgroundPosition: 'center',
+                  }}
+                />
+                <Text>{tank.name.locales.en}</Text>
+              </Flex>
+            </LinkI18n>
+          );
+        })
     }
   </PageWrapper>
 </ToolLayout>