From eab46d424e97b5fd45ca66235788373b80d9714a Mon Sep 17 00:00:00 2001 From: "Daniel S. Hansen" Date: Fri, 11 Jul 2025 15:58:38 -0700 Subject: [PATCH] Add CanvasHeader along with sub components CanvasHeaderNav, SearchBar, SettingsButton --- README.md | 20 --------------- client/package-lock.json | 1 + client/src/App.jsx | 25 ++++++++++++++++--- client/src/components/CanvasHeader.jsx | 30 +++++++++++++++++++++++ client/src/components/CanvasHeaderNav.jsx | 22 +++++++++++++++++ client/src/components/SearchBar.jsx | 10 ++++++++ client/src/components/SettingsButton.jsx | 25 +++++++++++++++++++ client/src/components/Widget.jsx | 7 +++++- 8 files changed, 116 insertions(+), 24 deletions(-) delete mode 100644 README.md create mode 100644 client/src/components/CanvasHeader.jsx create mode 100644 client/src/components/CanvasHeaderNav.jsx create mode 100644 client/src/components/SearchBar.jsx create mode 100644 client/src/components/SettingsButton.jsx diff --git a/README.md b/README.md deleted file mode 100644 index 650bfeb..0000000 --- a/README.md +++ /dev/null @@ -1,20 +0,0 @@ -# website-framework - - -## Add your files - -- [ ] [Create](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#create-a-file) or [upload](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#upload-a-file) files -- [ ] [Add files using the command line](https://docs.gitlab.com/topics/git/add_files/#add-files-to-a-git-repository) or push an existing Git repository with the following command: - -``` -cd existing_repo -git remote add origin https://code.usgs.gov/vkuchenik/website-framework.git -git branch -M main -git push -uf origin main -``` - -## Name -Basic Webapp Framework - -## Description -Building a foundational webapp framework that can be repurposed. \ No newline at end of file diff --git a/client/package-lock.json b/client/package-lock.json index e8ead07..b015727 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -4286,6 +4286,7 @@ "version": "5.5.0", "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz", "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==", + "license": "MIT", "peerDependencies": { "react": "*" } diff --git a/client/src/App.jsx b/client/src/App.jsx index 591c1c2..75d84e6 100644 --- a/client/src/App.jsx +++ b/client/src/App.jsx @@ -2,10 +2,22 @@ import { useState } from 'react' import Header from './components/header.jsx'; import Sidebar from './components/sidebar.jsx'; import Widget from './components/Widget.jsx' +import CanvasHeader from './components/CanvasHeader.jsx' +// import { CanvasHeaderNav } from './components/CanvasHeaderNav.jsx' +// import { SearchBar } from './components/SearchBar.jsx' +// import { SettingsButton } from './components/SettingsButton.jsx' import { Grid, GridItem } from "@chakra-ui/react" function App() { + // UGLY SANITY CHECK - DELETE LATER + // return ( + //
+ // {/* */} + // {/* */} + // {/* */} + //
+ // ) return ( - + + + + + + @@ -34,3 +51,5 @@ function App() { } export default App + + diff --git a/client/src/components/CanvasHeader.jsx b/client/src/components/CanvasHeader.jsx new file mode 100644 index 0000000..dbbb111 --- /dev/null +++ b/client/src/components/CanvasHeader.jsx @@ -0,0 +1,30 @@ +import { Flex, HStack } from "@chakra-ui/react"; +import { CanvasHeaderNav } from "./CanvasHeaderNav"; +import { SearchBar } from "./SearchBar"; +import { SettingsButton } from "./SettingsButton"; + +export default function CanvasHeader() { + return ( + <> + + + + + + + + + ); +} \ No newline at end of file diff --git a/client/src/components/CanvasHeaderNav.jsx b/client/src/components/CanvasHeaderNav.jsx new file mode 100644 index 0000000..32b914e --- /dev/null +++ b/client/src/components/CanvasHeaderNav.jsx @@ -0,0 +1,22 @@ +import { HStack, Link } from "@chakra-ui/react" + +const navItems = [ + { label: "My Dashboard", href: "#dashboard" }, + { label: "Gas", href: "gas" }, + { label: "Seismic", href: "#seismic" }, + { label: "Remote Sensing", href: "#remote" }, + { label: "Daily Activity", href: "#daily" }, +]; + +export function CanvasHeaderNav() { + return ( + + {navItems.map(({ label, href }) => ( + + {label} + + ))} + + ); +} + diff --git a/client/src/components/SearchBar.jsx b/client/src/components/SearchBar.jsx new file mode 100644 index 0000000..93bd743 --- /dev/null +++ b/client/src/components/SearchBar.jsx @@ -0,0 +1,10 @@ +import { Input, InputGroup } from "@chakra-ui/react"; +import { FiSearch } from "react-icons/fi" + +export function SearchBar({ placeholder="Search...", size="sm", width="200px"}) { + return ( + }> + + + ); +} \ No newline at end of file diff --git a/client/src/components/SettingsButton.jsx b/client/src/components/SettingsButton.jsx new file mode 100644 index 0000000..5ce122d --- /dev/null +++ b/client/src/components/SettingsButton.jsx @@ -0,0 +1,25 @@ +import { IconButton, Box } from "@chakra-ui/react"; +import { FiSettings } from "react-icons/fi"; + +export function SettingsButton(props) { + return ( + + + + ); +} + + + + + diff --git a/client/src/components/Widget.jsx b/client/src/components/Widget.jsx index a23327d..b3413ad 100644 --- a/client/src/components/Widget.jsx +++ b/client/src/components/Widget.jsx @@ -1,8 +1,13 @@ +// This component defines a generic Widget that can be dynamically resized and +// dragged inside the canvas +// Content not included, must be populated using custom charts plots and notifications + import { useState } from 'react'; import GridLayout from 'react-grid-layout'; export default function Widget() { - // Define widgets initial position and size + // Define widgets initial position and size + // TODO Add dynamic adding/deleting of widgets via options button const [layout, setLayout] = useState([ { i: 'myWidget1', x: 0, y: 0, w: 3, h: 3, minH: 3, static: false }, { i: 'myWidget2', x: 3, y: 0, w: 3, h: 3, minH: 3, static: false },