feat: tankopedia list

Co-authored-by: Copilot <[email protected]>

packages/website-ue/src/components/BaseStyles.astro

@@ -81,5 +81,7 @@ import "@fontsource-variable/roboto-flex";
 
     --duration-brief: 200ms;
     --duration-subtle: 2s;
+
+    --tank-card-width: 11rem;
   }
 </style>

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

@@ -23,7 +23,7 @@
     }
 
     .icon {
-      width: 11rem;
+      width: var(--tank-card-width);
       height: 7rem;
       position: relative;
 

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

@@ -1,4 +1,3 @@
-import type { PopularTank } from "@protos/blitzkit/popular_tanks";
 import { api } from "../../core/api/dynamic";
 import { useAwait } from "../../hooks/useAwait";
 import { useGameStrings } from "../../hooks/useGameStrings";
@@ -7,7 +6,12 @@ import { LinkI18n } from "../LinkI18n";
 import { Text } from "../Text";
 import styles from "./index.module.css";
 
-export function TankCard({ id }: PopularTank) {
+interface TankCardProps {
+  id: string;
+  subtitle?: string;
+}
+
+export function TankCard({ id }: TankCardProps) {
   const tank = useAwait(() => api.tank(id), `tank-${id}`);
   const gameStrings = useGameStrings("TankEntity");
   const locale = useLocale();

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

@@ -0,0 +1,6 @@
+.tank-cards {
+  display: grid;
+  gap: var(--space-5) var(--space-4);
+  grid-template-columns: repeat(auto-fill, var(--tank-card-width));
+  justify-content: center;
+}

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

@@ -0,0 +1,9 @@
+import styles from "./index.module.css";
+
+interface Props {
+  children: React.ReactNode;
+}
+
+export function TankCards({ children }: Props) {
+  return <div className={styles["tank-cards"]}>{children}</div>;
+}

packages/website-ue/src/pages/[...locale]/tanks/_index.tsx

@@ -0,0 +1,29 @@
+import { TankCard } from "../../../components/TankCard";
+import { TankCards } from "../../../components/TankCards";
+import { api } from "../../../core/api/dynamic";
+import { useAwait } from "../../../hooks/useAwait";
+import { LocaleProvider } from "../../../hooks/useLocale";
+
+interface PageProps {
+  locale: string;
+}
+
+export function Page({ locale, ...props }: PageProps) {
+  return (
+    <LocaleProvider locale={locale}>
+      <Content {...props} />
+    </LocaleProvider>
+  );
+}
+
+function Content() {
+  const tankList = useAwait(() => api.tankList(), "tank-list");
+
+  return (
+    <TankCards>
+      {tankList.list.map(({ id }) => (
+        <TankCard key={id} id={id} />
+      ))}
+    </TankCards>
+  );
+}

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

@@ -1,9 +1,11 @@
 ---
 import "@radix-ui/colors/violet-dark.css";
+import { Section } from "../../../components/Section";
 import ToolBanner from "../../../components/ToolBanner.astro";
 import { api } from "../../../core/api/dynamic";
 import { tools } from "../../../core/tools/tools";
 import BaseLayout from "../../../layouts/BaseLayout.astro";
+import { Page } from "./_index";
 
 export { getStaticPaths } from "../index.astro";
 
@@ -14,16 +16,11 @@ const tankList = await api.tankList();
 <BaseLayout {locale} accent="purple">
   <ToolBanner {locale} tool={tools.tanks} slot="pre-app" />
 
-  <h1>tanks</h1>
+  <Section>
+    <Page {locale} client:load />
+  </Section>
 
-  {
-    tankList.list.map(({ id, slug }) => (
-      <p>
-        <a href={`/tanks/${slug}`}>
-          <img height="128" width="128" src={`/api/tanks/${id}.webp`} />
-          {slug} ({id})
-        </a>
-      </p>
-    ))
-  }
+  <!-- {
+   
+  } -->
 </BaseLayout>