feat: search page

packages/website/src/components/Ad.tsx

@@ -23,6 +23,8 @@ type AdProps = BoxProps & {
 };
 
 export function Ad({ type, style, ...props }: AdProps) {
+  return null;
+
   const id = useRef(uniqueId());
   const dimensions = AD_DIMENSIONS[type];
 

packages/website/src/components/AdMidSectionResponsive.tsx

@@ -2,6 +2,8 @@ import { Flex, type FlexProps } from '@radix-ui/themes';
 import { Ad, AdType } from './Ad';
 
 export function AdMidSectionResponsive(props: FlexProps) {
+  return null;
+
   return (
     <Flex justify="center" py="4" gap="4" {...props}>
       <Ad

packages/website/src/components/BlitzKitTheme.tsx

@@ -1,11 +1,11 @@
-import { Theme } from '@radix-ui/themes';
+import { Theme, type ThemeProps } from '@radix-ui/themes';
 import type { ReactNode } from 'react';
 
-interface BlitzKitThemeProps {
+interface BlitzKitThemeProps extends ThemeProps {
   children: ReactNode;
 }
 
-export function BlitzKitTheme({ children }: BlitzKitThemeProps) {
+export function BlitzKitTheme({ children, ...props }: BlitzKitThemeProps) {
   return (
     <Theme
       style={{ minHeight: 'unset' }}
@@ -15,6 +15,7 @@ export function BlitzKitTheme({ children }: BlitzKitThemeProps) {
       accentColor="amber"
       suppressHydrationWarning
       suppressContentEditableWarning
+      {...props}
     >
       {children}
     </Theme>

packages/website/src/components/PageWrapper.tsx

@@ -1,6 +1,7 @@
 import { Flex, type FlexProps, Theme } from '@radix-ui/themes';
 import type { ComponentProps } from 'react';
 import type { RadixSize } from '../stores/embedState';
+import { BlitzKitTheme } from './BlitzKitTheme';
 
 type PageWrapperProps = FlexProps & {
   color?: ComponentProps<typeof Theme>['accentColor'];
@@ -23,7 +24,7 @@ export function PageWrapper({
   ...props
 }: PageWrapperProps) {
   return (
-    <Theme
+    <BlitzKitTheme
       accentColor={color}
       style={{
         flex: noFlex1 ? undefined : 1,
@@ -49,6 +50,6 @@ export function PageWrapper({
       >
         {children}
       </Flex>
-    </Theme>
+    </BlitzKitTheme>
   );
 }

packages/website/src/components/TankSearch/index.tsx

@@ -19,7 +19,6 @@ import { Fragment, memo, useEffect, useMemo, useState } from 'react';
 import { filterTank } from '../../core/blitzkit/filterTank';
 import { resolveReload } from '../../core/blitzkit/resolveReload';
 import { useAdExempt } from '../../hooks/useAdExempt';
-import { useAwait } from '../../hooks/useAwait';
 import { $tankFilters } from '../../stores/tankFilters';
 import {
   SORT_NAMES,
@@ -45,15 +44,20 @@ type TankSearchProps = Omit<FlexProps, 'onSelect'> & {
 const PREVIEW_COUNT = 25;
 const DEFAULT_LOADED_CARDS = 75;
 
+const awaitedGameDefinitions = await gameDefinitions;
+const awaitedModelDefinitions = await modelDefinitions;
+const awaitedTankDefinitions = await tankDefinitions;
+const awaitedTanksDefinitionsArray = await tankDefinitionsArray;
+const awaitedTankNames = await tankNames;
+
 export const TankSearch = memo<TankSearchProps>(
   ({ compact, onSelect, onSelectAll, ...props }) => {
     const exempt = useAdExempt();
-    const awaitedGameDefinitions = useAwait(gameDefinitions);
-    console.log(awaitedGameDefinitions);
-    const awaitedModelDefinitions = useAwait(modelDefinitions);
-    const awaitedTankDefinitions = useAwait(tankDefinitions);
-    const awaitedTanksDefinitionsArray = useAwait(tankDefinitionsArray);
-    const awaitedTankNames = useAwait(tankNames);
+    // const awaitedGameDefinitions = useAwait(gameDefinitions);
+    // const awaitedModelDefinitions = useAwait(modelDefinitions);
+    // const awaitedTankDefinitions = useAwait(tankDefinitions);
+    // const awaitedTanksDefinitionsArray = useAwait(tankDefinitionsArray);
+    // const awaitedTankNames = useAwait(tankNames);
     const tankFilters = useStore($tankFilters);
     const tankopediaSort = useStore($tankopediaSort);
 
@@ -405,7 +409,8 @@ export const TankSearch = memo<TankSearchProps>(
         <Flex mt="2" gap="1" align="center" justify="center" direction="column">
           <Flex gap="2">
             <Text color="gray">
-              {tanksFiltered.length} tank{tanksFiltered.length === 1 ? '' : 's'}
+              {tanksFiltered.length} tank
+              {tanksFiltered.length === 1 ? '' : 's'}
             </Text>
 
             {onSelectAll && (

packages/website/src/layouts/ToolLayout.astro

@@ -41,7 +41,7 @@ const tool = TOOLS.find((tool) => tool.id === toolId);
         style={{
           backgroundImage: `url(${imgur(tool!.image, {
             format: 'jpeg',
-            size: ImgurSize.HugeThumbnail,
+            size: ImgurSize.SmallThumbnail,
           })})`,
           backgroundSize: 'cover',
         }}

packages/website/src/pages/tools/tankopedia/index.astro

@@ -1,7 +1,8 @@
 ---
 import ToolLayout from '../../../layouts/ToolLayout.astro';
+import { Page } from './index';
 ---
 
 <ToolLayout>
-  <!-- <TankSearch client:only="react" /> -->
+  <Page client:load />
 </ToolLayout>

packages/website/src/pages/tools/tankopedia/index.tsx

@@ -0,0 +1,10 @@
+import { PageWrapper } from '../../../components/PageWrapper';
+import { TankSearch } from '../../../components/TankSearch';
+
+export function Page() {
+  return (
+    <PageWrapper color="purple" size={1028}>
+      <TankSearch />
+    </PageWrapper>
+  );
+}