fix: hot tanks context

packages/website/src/components/HomePageHotTanks.tsx

@@ -0,0 +1,50 @@
+import { fetchAverageDefinitions, fetchTankDefinitions } from '@blitzkit/core';
+import { Box, Flex, Heading } from '@radix-ui/themes';
+import { TankopediaPersistent } from '../stores/tankopediaPersistent';
+import { TankCard } from './TankSearch/components/TankCard';
+
+const tankDefinitions = await fetchTankDefinitions();
+const averageDefinitions = await fetchAverageDefinitions();
+const tanks = Object.values(tankDefinitions.tanks);
+const tankAverages = Object.entries(averageDefinitions.averages).map(
+  ([id, average]) => ({
+    id: Number(id),
+    ...average,
+  }),
+);
+
+// lol don't ask questions
+const testTanks = tanks
+  .filter((tank) => tank.testing && tank.tier >= 8)
+  .sort((a, b) => b.tier - a.tier);
+const mostPlayedTanks = tankAverages
+  .sort((a, b) => b.samples.d_1 - a.samples.d_1)
+  .map(({ id }) => tankDefinitions.tanks[id])
+  .filter((tank) => tank !== undefined && !tank.testing);
+const popularTanks = [...testTanks, ...mostPlayedTanks].slice(0, 8);
+
+export function HomePageHotTanks() {
+  return (
+    <TankopediaPersistent.Provider>
+      <Content />
+    </TankopediaPersistent.Provider>
+  );
+}
+
+function Content() {
+  return (
+    <Flex direction="column" gap="5" pt="4" pb="8">
+      <Heading align="center" size="5">
+        Popular tanks
+      </Heading>
+
+      <Flex justify="center" gap="4" wrap="wrap">
+        {popularTanks.map((tank) => (
+          <Box width="7rem">
+            <TankCard tank={tank} />
+          </Box>
+        ))}
+      </Flex>
+    </Flex>
+  );
+}

packages/website/src/pages/index.astro

@@ -1,9 +1,8 @@
 ---
-import { fetchAverageDefinitions, fetchTankDefinitions } from '@blitzkit/core';
 import { Box, Flex, Heading } from '@radix-ui/themes';
 import HomeHero from '../components/HomeHero.astro';
+import { HomePageHotTanks } from '../components/HomePageHotTanks';
 import { Plugs } from '../components/Plugs.tsx';
-import { TankCard } from '../components/TankSearch/components/TankCard';
 import ToolCard from '../components/ToolCard.astro';
 import {
   compareTool,
@@ -16,26 +15,6 @@ import {
   tankopediaTool,
 } from '../constants/tools';
 import BaseLayout from '../layouts/BaseLayout.astro';
-
-const tankDefinitions = await fetchTankDefinitions();
-const averageDefinitions = await fetchAverageDefinitions();
-const tanks = Object.values(tankDefinitions.tanks);
-const tankAverages = Object.entries(averageDefinitions.averages).map(
-  ([id, average]) => ({
-    id: Number(id),
-    ...average,
-  }),
-);
-
-// lol don't ask questions
-const testTanks = tanks
-  .filter((tank) => tank.testing && tank.tier >= 8)
-  .sort((a, b) => b.tier - a.tier);
-const mostPlayedTanks = tankAverages
-  .sort((a, b) => b.samples.d_1 - a.samples.d_1)
-  .map(({ id }) => tankDefinitions.tanks[id])
-  .filter((tank) => tank !== undefined && !tank.testing);
-const popularTanks = [...testTanks, ...mostPlayedTanks].slice(0, 8);
 ---
 
 <BaseLayout>
@@ -47,19 +26,7 @@ const popularTanks = [...testTanks, ...mostPlayedTanks].slice(0, 8);
     <Flex maxWidth="64rem" flexGrow="1" gap="4" direction="column">
       <ToolCard tool={tankopediaTool} />
 
-      <Flex direction="column" gap="4" pt="4" pb="8">
+      <HomePageHotTanks />
-        <Heading align="center" size="5">Popular tanks</Heading>
-
-        <Flex justify="center" gap="4" wrap="wrap">
-          {
-            popularTanks.map((tank) => (
-              <Box width="7rem">
-                <TankCard {tank} />
-              </Box>
-            ))
-          }
-        </Flex>
-      </Flex>
 
       <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
         {/* <ToolCard tool={playerStatsTool} /> */}