Merge pull request #21 from hytech-racing/decoupling

decoupling preview and data table from searchbar
hytech-racing · Oct 8, 2024 · 2a56b78 · 2a56b78
2 parents 5665f93 + a4a7d72
commit 2a56b78
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 43 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -4,9 +4,14 @@ import { theme } from "@/theme";
 import Navbar from "@/components/Navbar";
 import SearchBar from "@/components/SearchBar";
 import "@/css/App.css";
-
+import DataTable from "@/components/DataTable";
+import PreviewCard from "./components/PreviewCard";
+import { data } from "@/data/sampledata";
+import { useState } from "react";
 
 export default function App() {
+  const [filteredData, setFilteredData] = useState<MCAPFileInformation[]>(data);
+
   return (
     <MantineProvider theme={theme}>
       <div className="app-container">
@@ -15,14 +20,23 @@ export default function App() {
         </header>
 
         <div className="main-content">
-          <SearchBar />
+          <div className="results-container">
+            <div className="table-contain-result">
+              <DataTable data={filteredData} />
+            </div>
+
+            <div className="preview-contain-result">
+              <PreviewCard />
+            </div>
+          </div>
+          <SearchBar setFilteredData={setFilteredData} />
         </div>
 
         <footer className="footer">
-            <h3>made by Frontend team 2024</h3>
-          </footer>
+          <h3>made by Frontend team 2024</h3>
+        </footer>
       </div>
-      
+
       {/* <PreviewCard /> */}
     </MantineProvider>
   );

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -10,7 +10,7 @@ const mainLinksData = [
 ];
 
 export default function Navbar() {
-  const hytechName = "Hytech Racing checkpoint 1";
+  const hytechName = "HyTech Racing Checkpoint 1";
   const [activeLink, setActiveLink] = useState();
   const links = mainLinksData.map(({ name, url }) => (
     <a
@@ -29,10 +29,10 @@ export default function Navbar() {
 
   return (
     <nav>
-     <img src="/favicon.ico" alt="Logo" className="navbar-icon" />
-     {links}
+      <img src="/favicon.ico" alt="Logo" className="navbar-icon" />
+      {links}
       {/* Optionally render active link or other content here */}
       <h3 className="hytechName">{hytechName}</h3>
     </nav>
   );
-}
+}
diff --git a/src/components/PreviewCard.tsx b/src/components/PreviewCard.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import { Text, Button, Grid } from "@mantine/core";
-import { IconDownload } from "@tabler/icons-react";
+import { Text, Button, Grid, Menu, rem } from "@mantine/core";
+import { IconDownload, IconChevronDown, IconFile } from "@tabler/icons-react";
 import "@/css/PreviewCard.css";
 
 function PreviewCard() {
@@ -72,20 +72,8 @@ function PreviewCard() {
               gap: "10px",
             }}
           >
-            <Button
-              variant="filled"
-              size="xs"
-              rightSection={<IconDownload size={20} />}
-            >
-              MAT
-            </Button>
-            <Button
-              variant="filled"
-              size="xs"
-              rightSection={<IconDownload size={20} />}
-            >
-              MCAP
-            </Button>
+            <DownloadButton buttonText="MAT" />
+            <DownloadButton buttonText="MCAP" />
           </div>
         </Grid.Col>
       </Grid>
@@ -94,3 +82,63 @@ function PreviewCard() {
 }
 
 export default PreviewCard;
+
+interface DownloadButtonProps {
+  buttonText: string;
+}
+
+export function DownloadButton({ buttonText }: DownloadButtonProps) {
+  return (
+    <Menu
+      transitionProps={{ transition: "pop-top-right" }}
+      position="top-end"
+      width={150}
+      withinPortal
+    >
+      <Menu.Target>
+        <Button
+          variant="filled"
+          size="xs"
+          rightSection={<IconChevronDown size={20} />}
+          leftSection={<IconDownload size={20} />}
+        >
+          {buttonText}
+        </Button>
+      </Menu.Target>
+      <Menu.Dropdown>
+        <Menu.Item
+          leftSection={
+            <IconFile
+              style={{ width: rem(16), height: rem(16) }}
+              stroke={1.5}
+            />
+          }
+        >
+          File_1
+        </Menu.Item>
+
+        <Menu.Item
+          leftSection={
+            <IconFile
+              style={{ width: rem(16), height: rem(16) }}
+              stroke={1.5}
+            />
+          }
+        >
+          File_2
+        </Menu.Item>
+
+        <Menu.Item
+          leftSection={
+            <IconFile
+              style={{ width: rem(16), height: rem(16) }}
+              stroke={1.5}
+            />
+          }
+        >
+          File_3
+        </Menu.Item>
+      </Menu.Dropdown>
+    </Menu>
+  );
+}
diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
@@ -2,13 +2,13 @@ import React, { useState, useEffect } from "react";
 import { data } from "@/data/sampledata";
 import { eventType, location } from "@/data/dataFilters";
 import "@/css/SearchBar.css";
-// import DataCard from "./DataCard";
-import DataTable from "@components/DataTable";
-import PreviewCard from "@/components/PreviewCard";
 
-function SearchBarWithFilter() {
+interface SearchBarWithFilterProps {
+  setFilteredData: React.Dispatch<React.SetStateAction<MCAPFileInformation[]>>;
+}
+
+function SearchBarWithFilter({ setFilteredData }: SearchBarWithFilterProps) {
   const [searchTerm, setSearchTerm] = useState("");
-  const [filteredData, setFilteredData] = useState<MCAPFileInformation[]>(data);
   const [filters, setFilters] = useState({
     location: "",
     eventType: "",
@@ -81,17 +81,7 @@ function SearchBarWithFilter() {
 
   return (
     <div className="Search">
-
       {/* Display Filtered Data */}
-      <div className="results-container">
-        <div className="table-contain-result">
-          <DataTable data={filteredData} />
-        </div>
-
-        <div className="preview-contain-result">
-          <PreviewCard/>
-        </div>
-      </div>
 
       <div className="search-filter-container">
         <h1>Search and Filter Data</h1>
@@ -162,9 +152,6 @@ function SearchBarWithFilter() {
           </label>
         </div>
       </div>
-
-
-
     </div>
   );
 }