feat: filters

packages/website/src/components/PageWrapper.tsx

@@ -6,7 +6,6 @@ import { BlitzKitTheme } from './BlitzKitTheme';
 
 type PageWrapperProps = FlexProps & {
   color?: ComponentProps<typeof Theme>['accentColor'];
-  size?: number | string;
   noMaxWidth?: boolean;
   containerProps?: ComponentProps<typeof Theme>;
   noFlex1?: boolean;
@@ -17,7 +16,6 @@ type PageWrapperProps = FlexProps & {
 export function PageWrapper({
   style,
   color,
-  size = 800,
   children,
   noMaxWidth = false,
   noFlex1 = false,
@@ -44,7 +42,6 @@ export function PageWrapper({
         p={padding}
         style={{
           width: '100%',
-          maxWidth: noMaxWidth ? undefined : size,
           margin: 'auto',
           boxSizing: 'border-box',
           flex: 1,

packages/website/src/components/TierList/Controls.tsx

@@ -0,0 +1,23 @@
+import { ReloadIcon } from '@radix-ui/react-icons';
+import { Button, Flex } from '@radix-ui/themes';
+import { TierList } from '../../stores/tierList';
+import { tierListRows } from './Table/constants';
+
+export function TierListControls() {
+  const mutateTierList = TierList.useMutation();
+
+  return (
+    <Flex justify="center">
+      <Button
+        color="red"
+        onClick={() => {
+          mutateTierList((draft) => {
+            draft.tanks = tierListRows.map(() => []);
+          });
+        }}
+      >
+        <ReloadIcon /> Reset
+      </Button>
+    </Flex>
+  );
+}

packages/website/src/components/TierList/Table/index.tsx

@@ -4,7 +4,7 @@ import { tierListRows } from './constants';
 
 export function TierListTable() {
   return (
-    <Table.Root variant="surface">
+    <Table.Root variant="surface" mb="6">
       <Table.Body>
         {tierListRows.map((_, index) => (
           <TierListRow index={index} key={index} />

packages/website/src/components/TierList/Tiles.tsx

@@ -1,4 +1,7 @@
 import { fetchTankDefinitions } from '@blitzkit/core';
+import { useStore } from '@nanostores/react';
+import { filterTank } from '../../core/blitzkit/filterTank';
+import { $tankFilters } from '../../stores/tankFilters';
 import { TankCardWrapper } from '../TankSearch/components/TankCardWrapper';
 import { TierListTile } from './Tile';
 
@@ -6,9 +9,13 @@ const tankDefinitions = await fetchTankDefinitions();
 const tanks = Object.values(tankDefinitions.tanks);
 
 export function TierListTiles() {
+  const filters = useStore($tankFilters);
+
   return (
     <TankCardWrapper>
-      {tanks.map((tank) => (
+      {tanks
+        .filter((tank) => filterTank(filters, tank))
+        .map((tank) => (
           <TierListTile key={tank.id} tank={tank} />
         ))}
     </TankCardWrapper>

packages/website/src/pages/tools/tankopedia/[id]/_index.tsx

@@ -41,7 +41,7 @@ export function Page({ id, skeleton }: PageProps) {
               p="0"
               noMaxWidth
               color="purple"
-              size={1600}
+              maxWidth="100rem"
               gap="9"
               pb="9"
             >

packages/website/src/pages/tools/tier-list/_index.tsx

@@ -1,4 +1,6 @@
 import { PageWrapper } from '../../../components/PageWrapper';
+import { FilterControl } from '../../../components/TankSearch/components/FilterControl';
+import { TierListControls } from '../../../components/TierList/Controls';
 import { TierListTable } from '../../../components/TierList/Table';
 import { TierListTiles } from '../../../components/TierList/Tiles';
 import { TankopediaPersistent } from '../../../stores/tankopediaPersistent';
@@ -16,8 +18,10 @@ export function Page() {
 
 function Content() {
   return (
-    <PageWrapper color="orange">
+    <PageWrapper color="orange" maxWidth="100rem">
+      <TierListControls />
       <TierListTable />
+      <FilterControl />
       <TierListTiles />
     </PageWrapper>
   );