Merge pull request #28 from hytech-racing/checkpoint

Checkpoint

src/App.tsx

@@ -1,12 +1,39 @@
 import "@mantine/core/styles.css";
 import { MantineProvider } from "@mantine/core";
 import { theme } from "@/theme";
-import PreviewCard from "./components/PreviewCard";
+import { data } from "@/data/sampledata";
+import { useState } from "react";
+import Navbar from "@/components/Navbar";
+import SearchBar from "@/components/SearchBar";
+import "@/css/App.css";
+import DataTable from "@/components/DataTable";
+import PreviewCard from "@/components/PreviewCard";
 
 export default function App() {
+  const [filteredData, setFilteredData] = useState<MCAPFileInformation[]>(data);
+
   return (
     <MantineProvider theme={theme}>
-      <PreviewCard />
+      <div className="app-container">
+        <header className="navbar">
+          <Navbar />
+        </header>
+
+        <div className="main-content">
+          <div className="results-container">
+            <div className="table-contain-result">
+              <DataTable data={filteredData} />
+            </div>
+
+            <SearchBar setFilteredData={setFilteredData} />
+          </div>
+          <div className="preview-contain-result">
+            <PreviewCard />
+          </div>
+        </div>
+      </div>
+
+      {/* <PreviewCard /> */}
     </MantineProvider>
   );
 }

src/components/Navbar.tsx

@@ -0,0 +1,38 @@
+import "@mantine/core/styles.css";
+import {} from "@mantine/core";
+import "@/css/Navbar.css";
+import { useState } from "react";
+
+const mainLinksData = [
+  { name: "Files", url: "https://hytechracing.gatech.edu/" },
+  { name: "Documentation", url: "https://hytechracing.gatech.edu/" },
+  { name: "Changelog", url: "https://hytechracing.gatech.edu/" },
+];
+
+export default function Navbar() {
+  const hytechName = "HyTech Racing Checkpoint 1";
+  const [activeLink, setActiveLink] = useState();
+  const links = mainLinksData.map(({ name, url }) => (
+    <a
+      key={name}
+      className={`nav-link ${activeLink === name ? "active" : ""}`}
+      // style={linkStyle(activeLink === link)}
+      // data-active={activeLink === link || undefined}
+      href={url}
+      onClick={() => {
+        setActiveLink(name);
+      }}
+    >
+      {name}
+    </a>
+  ));
+
+  return (
+    <nav>
+      <img src="/favicon.ico" alt="Logo" className="navbar-icon" />
+      {links}
+      {/* Optionally render active link or other content here */}
+      <h3 className="hytechName">{hytechName}</h3>
+    </nav>
+  );
+}

src/components/PreviewCard.stories.tsx

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import PreviewCard from "./PreviewCard";
+
+const meta = {
+  component: PreviewCard,
+} satisfies Meta<typeof PreviewCard>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

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>
+  );
+}

src/components/SearchBar.tsx

@@ -2,19 +2,19 @@ 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 "./DataTable";
 
-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: "",
     beforeDate: "",
     afterDate: "",
   });
-
   useEffect(() => {
     // add code to get data from server here
     // setFilteredData(serverData)
@@ -80,7 +80,9 @@ function SearchBarWithFilter() {
   };
 
   return (
-    <div>
+    <div className="Search">
+      {/* Display Filtered Data */}
+
       <div className="search-filter-container">
         <h1>Search and Filter Data</h1>
 
@@ -150,19 +152,6 @@ function SearchBarWithFilter() {
           </label>
         </div>
       </div>
-
-      {/* Display Filtered Data */}
-      <div className="results-container">
-        <div>
-          <h2>Filtered Results:</h2>
-          {filteredData.length === 0 ? (
-            <p>No results found</p>
-          ) : (
-            // <DataCard filteredData={filteredData} />
-            <DataTable data={filteredData} />
-          )}
-        </div>
-      </div>
     </div>
   );
 }

src/css/App.css

@@ -0,0 +1,38 @@
+.app-container {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.navbar {
+    background-color: #f0f0f0;
+    width: 100%;
+    position: fixed;
+    /*so table doesn't cover it - make sure it stays on top of other elements*/
+    z-index: 1000;
+}
+
+.search-bar {
+    background-color: #e0e0e0;
+    border-radius: 0;
+}
+
+.main-content {
+    display: flex;
+    flex: 1;
+    height: 500px;
+    padding-top: 50px;
+    flex-direction: column;
+}
+
+.results-container {
+    display: flex;
+    flex-direction: row;
+}
+
+.footer {
+    text-align: center;
+    background: #9b8b5de5;
+    color: white;
+}
+

src/css/Navbar.css

@@ -0,0 +1,48 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
+
+nav {
+    padding: 15px 0;
+    background: linear-gradient(90deg, #b8b5aa, #907d48);
+    display: flex;
+    height: 50px;
+    align-items: center;
+}
+
+.nav-link {
+    padding: 10px 20px;
+    text-decoration: none;
+    color: #495057;
+    background-color: transparent;
+    border-radius: 8px;
+    font-weight: bold;
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+    display: inline-block;
+    margin-right: 10px;
+    font-family: 'Roboto', sans-serif;
+}
+
+.nav-link.active {
+    background-color: #FFBF00;
+    font-weight: bold;
+}
+
+.nav-link:hover {
+    color: white;
+    background-color: #FFD700;
+    font-style: oblique;
+}
+
+.navbar-icon {
+    height: 30px;
+    margin-right: 20px;
+    margin-left: 20px;
+}
+
+.hytechName {
+    margin-left: auto;
+    margin-right: 10px;
+    border-radius: 5px;
+    color: white;
+    font-weight: 900;
+}

src/css/PreviewCard.css

@@ -1,8 +1,7 @@
 .preview-container {
-    width: 75%;
-    height: 30%;
+    width: 100%;
+    height: auto;
     justify-content: center;
-    margin: 20px;
     background-color: lightgrey;
   }