diff --git a/src/App.tsx b/src/App.tsx index fbc0092..545cf7e 100644 --- a/src/App.tsx +++ b/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(data); + return ( - +
+
+ +
+ +
+
+
+ +
+ + +
+
+ +
+
+
+ + {/* */} ); } diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx new file mode 100644 index 0000000..1d1289d --- /dev/null +++ b/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 }) => ( + { + setActiveLink(name); + }} + > + {name} + + )); + + return ( + + ); +} diff --git a/src/components/PreviewCard.stories.tsx b/src/components/PreviewCard.stories.tsx new file mode 100644 index 0000000..2a2bdf4 --- /dev/null +++ b/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; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = {}; diff --git a/src/components/PreviewCard.tsx b/src/components/PreviewCard.tsx index dc1f82d..d656484 100644 --- 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", }} > - - + + @@ -94,3 +82,63 @@ function PreviewCard() { } export default PreviewCard; + +interface DownloadButtonProps { + buttonText: string; +} + +export function DownloadButton({ buttonText }: DownloadButtonProps) { + return ( + + + + + + + } + > + File_1 + + + + } + > + File_2 + + + + } + > + File_3 + + + + ); +} diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx index 9c46067..d130fa5 100644 --- a/src/components/SearchBar.tsx +++ b/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>; +} + +function SearchBarWithFilter({ setFilteredData }: SearchBarWithFilterProps) { const [searchTerm, setSearchTerm] = useState(""); - const [filteredData, setFilteredData] = useState(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 ( -
+
+ {/* Display Filtered Data */} +

Search and Filter Data

@@ -150,19 +152,6 @@ function SearchBarWithFilter() {
- - {/* Display Filtered Data */} -
-
-

Filtered Results:

- {filteredData.length === 0 ? ( -

No results found

- ) : ( - // - - )} -
-
); } diff --git a/src/css/App.css b/src/css/App.css new file mode 100644 index 0000000..cfa9c85 --- /dev/null +++ b/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; +} + diff --git a/src/css/Navbar.css b/src/css/Navbar.css new file mode 100644 index 0000000..bcbb948 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/css/PreviewCard.css b/src/css/PreviewCard.css index 0c54e9c..11cf424 100644 --- a/src/css/PreviewCard.css +++ b/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; } diff --git a/src/css/SearchBar.css b/src/css/SearchBar.css index 478ee81..1ac2651 100644 --- a/src/css/SearchBar.css +++ b/src/css/SearchBar.css @@ -1,29 +1,39 @@ .results-container { - width: 100vw; - height: auto; + flex: 1; display: flex; - justify-content: center; - align-items: center; + flex-direction: column; } -.results-container h2 { - width: 100%; + +.table-contain-result { text-align: center; + flex: 1; +} + +.preview-contain-result { + text-align: center; +} + +.Search { + display: flex; + max-width: 360px; + font-size: 15px; + } + .search-filter-container { background-color: #f8f9fa; padding: 20px; border-radius: 10px; width: 100%; - max-width: 800px; - margin: 0 auto; + flex: 1; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - margin-top: 2em; + max-width: 500px; } .search-filter-container h1 { - font-size: 1.8em; + font-size: 25px; text-align: center; color: #333; margin-bottom: 20px; @@ -34,7 +44,6 @@ padding: 12px; border-radius: 30px; border: 1px solid #ddd; - font-size: 1em; outline: none; transition: box-shadow 0.2s ease-in-out; } @@ -54,16 +63,13 @@ .filter-options label { display: flex; flex-direction: column; - font-size: 1em; color: #555; margin-bottom: 10px; flex: 1 1 48%; } .filter-select { - margin-top: 8px; padding: 10px; - font-size: 1em; border-radius: 10px; border: 1px solid #ddd; background-color: #fff; @@ -76,7 +82,6 @@ } .date-picker { - margin-top: 8px; padding: 10px; font-size: 1em; border-radius: 10px;