minor fixes

NishilJ · Nov 15, 2024 · df86012 · df86012
1 parent 8e72c3a
commit df86012
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 7 deletions.
diff --git a/src/components/Departures.tsx b/src/components/Departures.tsx
@@ -111,7 +111,7 @@ const Departures: React.FC = () => {
 
     return (
         <Flex direction="column" alignItems="center" gap="size-200">
-            <View backgroundColor="gray-100" padding="size-300" borderRadius="medium" width="size-6000">
+            <View backgroundColor="gray-50" padding="size-300" borderRadius="medium" width="size-6000">
                 <Heading level={3}>Stop Departures</Heading>
                 <Divider marginBottom="size-200" />
 

diff --git a/src/components/TransitBar.tsx b/src/components/TransitBar.tsx
@@ -12,18 +12,18 @@ const TransitBar: React.FC<TransitBarProps> = ({ onSelect }) => {
                 selectionMode="single"
                 width="fit-content"
                 defaultSelectedKeys={['planner']}
-                onSelectionChange={(key) => {
+                onSelectionChange={(selected) => {
+                    const key = Array.from(selected)[0] as string; // Correctly extract and cast the selected key
                     if (key) {
-                        onSelect(key.toString()); // Pass the selected key to onSelect
+                        onSelect(key); // Pass the selected key to onSelect
                     }
                 }}
             >
-                <Item href="/departures" key="departures">Departures</Item>
-                <Item href="/plan" key="planner">Trip Planner</Item>
-                <Item href="/routes" key="routes">Routes</Item>
+                <Item key="departures">Departures</Item>
+                <Item key="planner">Trip Planner</Item>
             </ActionGroup>
         </Flex>
     );
 }
 
-export default TransitBar;
+export default TransitBar;
diff --git a/src/components/TripPlanner.tsx b/src/components/TripPlanner.tsx
@@ -151,6 +151,8 @@ const TripPlanner: React.FC = () => {
         <Flex direction="row" gap="size-200" justifyContent="center">
             <Flex direction="column" justifyContent="space-between" gap="size-200">
                 <View backgroundColor="gray-50" padding="size-300" marginX="auto" borderRadius="medium">
+                    <Heading level={3}>Trip Planner</Heading>
+                    <Divider marginBottom="size-200" />
                     <Flex gap="size-100" direction="column" width="size-6000">
                         {/* Start Location ComboBox */}
                         <ComboBox

diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
@@ -3,6 +3,7 @@ import TopNavBar from '../components/TopNavBar';
 import { Provider, defaultTheme, Grid, View } from '@adobe/react-spectrum';
 import TransitBar from "../components/TransitBar";
 import TripPlanner from '../components/TripPlanner';
+import Departures from "../components/Departures";
 
 // Nishil
 // Arranges home page layout using react-spectrum and grid
@@ -31,6 +32,7 @@ const HomePage: React.FC = () => {
                 </View>
                 <View colorVersion={6} borderWidth="thin" backgroundColor="orange-500" gridArea="content">
                     {selectedView === 'planner' && <TripPlanner />}
+                    {selectedView === 'departures' && <Departures />}
                 </View>
                 <View colorVersion={6} borderWidth="thin" backgroundColor="orange-500" gridArea="footer" />
             </Grid>