feat: put tables in disclosures

thraizz · Dec 14, 2023 · 10ff3e7 · 10ff3e7
1 parent 59b7fe1
commit 10ff3e7
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 20 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "@types/papaparse": "^5.3.14",
     "ag-grid-react": "^31.0.1",
     "autoprefixer": "^10.4.16",
+    "clsx": "^2.0.0",
     "eslint-plugin-prettier": "^5.0.1",
     "firebase": "^10.7.1",
     "papaparse": "^5.4.1",

diff --git a/src/AveragesTable.tsx b/src/AveragesTable.tsx
@@ -1,5 +1,8 @@
+import { Disclosure } from "@headlessui/react";
+import { ChevronUpIcon } from "@heroicons/react/20/solid";
 import { AgGridReact } from "ag-grid-react";
 import { useContext } from "react";
+import { Label } from "./Label";
 import { SessionContext } from "./SessionContext";
 
 export const AveragesTable = () => {
@@ -38,13 +41,28 @@ export const AveragesTable = () => {
   });
 
   return sessions ? (
-    <div className="ag-theme-quartz" style={{ height: 500 }}>
-      <h2 className="text-2xl font-bold">Averages</h2>
-      <p className="text-md">
-        Averages for all sessions selected in the Session Picker.
-      </p>
-      <AgGridReact rowData={dataAverages} columnDefs={columnDefs} />
-    </div>
+    <Disclosure defaultOpen={true} as="div" className="mt-2">
+      {({ open }) => (
+        <>
+          <Disclosure.Button className="flex w-full justify-between rounded-lg bg-purple-100 px-4 py-2 text-left text-sm font-medium text-purple-900 hover:bg-purple-200 focus:outline-none focus-visible:ring focus-visible:ring-purple-500/75">
+            <h3 className="text-xl font-bold">Average Values</h3>
+            <ChevronUpIcon
+              className={`${
+                open ? "rotate-180 transform" : ""
+              } h-5 w-5 text-purple-500 self-center`}
+            />
+          </Disclosure.Button>
+          <Disclosure.Panel className="mt-2 pt-4 text-sm text-gray-500">
+            <div className="ag-theme-quartz" style={{ height: 500 }}>
+              <Label className="px-4">
+                Averages for all sessions selected in the Session Picker.
+              </Label>
+              <AgGridReact rowData={dataAverages} columnDefs={columnDefs} />
+            </div>
+          </Disclosure.Panel>
+        </>
+      )}
+    </Disclosure>
   ) : (
     <p className="text-md text-sky-900">
       Select a session to display data here.

diff --git a/src/DataTable.tsx b/src/DataTable.tsx
@@ -1,6 +1,8 @@
+import { Disclosure } from "@headlessui/react";
+import { ChevronUpIcon } from "@heroicons/react/20/solid";
 import "ag-grid-community/styles/ag-grid.css"; // Core CSS
 import "ag-grid-community/styles/ag-theme-quartz.css"; // Theme
-import { AgGridReact } from "ag-grid-react";
+import { AgGridReact } from "ag-grid-react/lib/agGridReact";
 import { useContext, useState } from "react";
 import { SessionContext } from "./SessionContext";
 
@@ -58,20 +60,35 @@ export const DataTable = () => {
     : [];
 
   return (
-    <>
-      <h3 className="text-xl font-bold">Data</h3>
+    <div>
       {jsonFileWithoutEmptyRows ? (
-        <div className="ag-theme-quartz" style={{ height: 500 }}>
-          <AgGridReact
-            rowData={jsonFileWithoutEmptyRows}
-            columnDefs={columnDefs}
-          />
-        </div>
+        <Disclosure defaultOpen={true} as="div" className="mt-2">
+          {({ open }) => (
+            <>
+              <Disclosure.Button className="flex w-full justify-between rounded-lg bg-purple-100 px-4 py-2 text-left text-sm font-medium text-purple-900 hover:bg-purple-200 focus:outline-none focus-visible:ring focus-visible:ring-purple-500/75">
+                <h3 className="text-xl font-bold">All Data</h3>
+                <ChevronUpIcon
+                  className={`${
+                    open ? "rotate-180 transform" : ""
+                  } h-5 w-5 text-purple-500 self-center`}
+                />
+              </Disclosure.Button>
+              <Disclosure.Panel className="mt-2 pt-4 text-sm text-gray-500">
+                <div className="ag-theme-quartz" style={{ height: 500 }}>
+                  <AgGridReact
+                    rowData={jsonFileWithoutEmptyRows}
+                    columnDefs={columnDefs}
+                  />
+                </div>
+              </Disclosure.Panel>
+            </>
+          )}
+        </Disclosure>
       ) : (
         <p className="text-md text-sky-900">
           Select a session to display data here.
         </p>
       )}
-    </>
+    </div>
   );
 };
diff --git a/src/Label.tsx b/src/Label.tsx
@@ -1,5 +1,9 @@
-import { FC, PropsWithChildren } from "react";
+import clsx from "clsx";
+import { PropsWithChildren } from "react";
 
-export const Label: FC<PropsWithChildren> = ({ children }) => (
-  <p className="text-xs text-gray-500">{children}</p>
+export const Label = ({
+  className,
+  children,
+}: { className?: string } & PropsWithChildren) => (
+  <p className={clsx("text-xs text-gray-500", className)}>{children}</p>
 );