From f1c31c6d79b8d5bb6ee8f7988ee38e2fcdc3f563 Mon Sep 17 00:00:00 2001
From: tresabhi <43380238+tresabhi@users.noreply.github.com>
Date: Sun, 17 Nov 2024 16:41:43 -0600
Subject: [PATCH] feat: filters

---
 .../website/src/components/PageWrapper.tsx    |  3 ---
 .../src/components/TierList/Controls.tsx      | 23 +++++++++++++++++++
 .../src/components/TierList/Table/index.tsx   |  2 +-
 .../website/src/components/TierList/Tiles.tsx | 13 ++++++++---
 .../pages/tools/tankopedia/[id]/_index.tsx    |  2 +-
 .../src/pages/tools/tier-list/_index.tsx      |  6 ++++-
 6 files changed, 40 insertions(+), 9 deletions(-)
 create mode 100644 packages/website/src/components/TierList/Controls.tsx

diff --git a/packages/website/src/components/PageWrapper.tsx b/packages/website/src/components/PageWrapper.tsx
index b1dfaffe9..d78a9f245 100644
--- a/packages/website/src/components/PageWrapper.tsx
+++ b/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,
diff --git a/packages/website/src/components/TierList/Controls.tsx b/packages/website/src/components/TierList/Controls.tsx
new file mode 100644
index 000000000..15c27d588
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/packages/website/src/components/TierList/Table/index.tsx b/packages/website/src/components/TierList/Table/index.tsx
index 04d3d47cf..7c5b74c55 100644
--- a/packages/website/src/components/TierList/Table/index.tsx
+++ b/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} />
diff --git a/packages/website/src/components/TierList/Tiles.tsx b/packages/website/src/components/TierList/Tiles.tsx
index 8e48c4dca..a033ce4e3 100644
--- a/packages/website/src/components/TierList/Tiles.tsx
+++ b/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,11 +9,15 @@ const tankDefinitions = await fetchTankDefinitions();
 const tanks = Object.values(tankDefinitions.tanks);
 
 export function TierListTiles() {
+  const filters = useStore($tankFilters);
+
   return (
     <TankCardWrapper>
-      {tanks.map((tank) => (
-        <TierListTile key={tank.id} tank={tank} />
-      ))}
+      {tanks
+        .filter((tank) => filterTank(filters, tank))
+        .map((tank) => (
+          <TierListTile key={tank.id} tank={tank} />
+        ))}
     </TankCardWrapper>
   );
 }
diff --git a/packages/website/src/pages/tools/tankopedia/[id]/_index.tsx b/packages/website/src/pages/tools/tankopedia/[id]/_index.tsx
index dd8e7917d..d6bf50ce8 100644
--- a/packages/website/src/pages/tools/tankopedia/[id]/_index.tsx
+++ b/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"
             >
diff --git a/packages/website/src/pages/tools/tier-list/_index.tsx b/packages/website/src/pages/tools/tier-list/_index.tsx
index 4c187a756..1bd55d237 100644
--- a/packages/website/src/pages/tools/tier-list/_index.tsx
+++ b/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>
   );