basic grid layout

package.json

@@ -8,8 +8,8 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
-    "@types/node": "^16.18.114",
-    "@types/react": "^18.3.11",
+    "@types/node": "^16.18.115",
+    "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

src/Components/TopNavBar.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import {Flex, Heading, MenuTrigger, ActionButton, Menu, Item} from '@adobe/react-spectrum';
+
+const TopNavBar: React.FC = () => {
+    return (
+        <Flex margin="auto" justifyContent="space-between" alignItems="center" width="95%" height="100%">
+            <Heading level={1}>Metroll</Heading>
+            <MenuTrigger>
+                <ActionButton>☰</ActionButton>
+                <Menu onAction={(key) => alert(key)}>
+                    <Item key="auth">Login/Sign In</Item>
+                    <Item key="home">Home</Item>
+                    <Item key="about">About</Item>
+                </Menu>
+            </MenuTrigger>
+        </Flex>
+    );
+}
+
+export default TopNavBar;

src/Components/TransitBar.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import {Flex, Heading, MenuTrigger, ActionButton, Menu, Item, ActionGroup} from '@adobe/react-spectrum';
+
+const TransitBar: React.FC = () => {
+    return (
+        <Flex margin="auto" alignItems="center" justifyContent="center" height="100%">
+            <ActionGroup selectionMode="single" width="fit-content" defaultSelectedKeys={['planner']}>
+                <Item key="departures">Departures</Item>
+                <Item key="planner">Trip Planner</Item>
+                <Item key="routes">Routes</Item>
+            </ActionGroup>
+
+        </Flex>
+    );
+}
+
+export default TransitBar;

src/Home.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import TopNavBar from './Components/TopNavBar';
+import {Provider, defaultTheme, Grid, View} from "@adobe/react-spectrum";
+import TransitBar from "./Components/TransitBar";
+
+function Home() {
+    return (
+        <Provider theme={defaultTheme}>
+            <Grid
+                areas={[
+                    'header  header',
+                    'subheader  subheader',
+                    'sidebar content',
+                    'footer  footer'
+                ]}
+                columns={['1fr', '2fr']}
+                rows={['size-1000', "size-1000", '1fr', 'size-1000']}
+                height="100vh"
+                gap="size-0"
+            >
+                <View colorVersion={6} borderWidth="thin"  backgroundColor="orange-500" gridArea="header">
+                    <TopNavBar />
+                </View>
+                <View colorVersion={6} borderWidth="thin"  backgroundColor="orange-500" gridArea="subheader">
+                    <TransitBar />
+                </View>
+                <View colorVersion={6} borderWidth="thin" backgroundColor="orange-500" gridArea="sidebar" />
+                <View colorVersion={6} borderWidth="thin" backgroundColor="orange-500" gridArea="content" />
+                <View colorVersion={6} borderWidth="thin" backgroundColor="orange-500" gridArea="footer" />
+            </Grid>
+        </Provider>
+    );
+}
+
+export default Home;

src/index.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import App from './App';
+import Home from './Home';
 import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
 root.render(
   <React.StrictMode>
-    <App />
-  </React.StrictMode>
+    <Home />
+  </React.StrictMode> 
 );
 
 // If you want to start measuring performance in your app, pass a function