From e7bfe81940a24b18f58bf9adbe6d06e4f1b72988 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Wed, 6 Dec 2023 16:43:36 -0600
Subject: [PATCH] feat: bounded filters

---
 src/app/tools/tankopedia/page.tsx | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/app/tools/tankopedia/page.tsx b/src/app/tools/tankopedia/page.tsx
index 3e47b3485..24fb6be16 100644
--- a/src/app/tools/tankopedia/page.tsx
+++ b/src/app/tools/tankopedia/page.tsx
@@ -1,7 +1,11 @@
 'use client';
 
 import { slateDark } from '@radix-ui/colors';
-import { CaretDownIcon, MagnifyingGlassIcon } from '@radix-ui/react-icons';
+import {
+  CaretDownIcon,
+  CaretUpIcon,
+  MagnifyingGlassIcon,
+} from '@radix-ui/react-icons';
 import {
   Button,
   Card,
@@ -83,6 +87,7 @@ export default function Page() {
   );
   const [searchedList, setSearchedList] = useState(searchableTanks);
   const [page, setPage] = useState(0);
+  const [showFilters, setShowFilters] = useState(false);
 
   useEffect(() => {
     setSearchedList(searchableTanks);
@@ -173,9 +178,22 @@ export default function Page() {
                 </DropdownMenu.RadioGroup>
               </DropdownMenu.Content>
             </DropdownMenu.Root>
+
+            <Button
+              variant="soft"
+              onClick={() => setShowFilters((state) => !state)}
+            >
+              Filters {showFilters ? <CaretUpIcon /> : <CaretDownIcon />}
+            </Button>
           </Flex>
 
-          <Options />
+          {showFilters && (
+            <Card>
+              <Suspense fallback={<Text>Loading...</Text>}>
+                <Options />
+              </Suspense>
+            </Card>
+          )}
         </Flex>
 
         <PageTurner