From f1cafdfe5f5cd596a993f47fbd53fe9241188537 Mon Sep 17 00:00:00 2001
From: Samuel Gbafa <skgbafa@gmail.com>
Date: Fri, 18 Jul 2025 12:24:16 +0300
Subject: [PATCH] Fix TypeScript compilation errors in navigation components
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove unused event parameter in BottomNavigation
- Fix AccountPage Grid component usage and remove unused imports
- Replace Grid with Flexbox layout for better compatibility
- All navigation files now pass TypeScript compilation and linting

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/navigation/BottomNavigation.tsx |  2 +-
 src/pages/AccountPage.tsx                      | 16 ++++++++--------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/navigation/BottomNavigation.tsx b/src/components/navigation/BottomNavigation.tsx
index 7c5077b..1128bdc 100644
--- a/src/components/navigation/BottomNavigation.tsx
+++ b/src/components/navigation/BottomNavigation.tsx
@@ -33,7 +33,7 @@ const BottomNavigation = () => {
     return activeItem ? activeItem.path : '/feed';
   };
 
-  const handleChange = (event: React.SyntheticEvent, newValue: string) => {
+  const handleChange = (_event: React.SyntheticEvent, newValue: string) => {
     navigate(newValue);
   };
 
diff --git a/src/pages/AccountPage.tsx b/src/pages/AccountPage.tsx
index 4acad64..62e6052 100644
--- a/src/pages/AccountPage.tsx
+++ b/src/pages/AccountPage.tsx
@@ -1,5 +1,5 @@
-import { Box, Typography, Container, Avatar, Paper, Grid, Button } from '@mui/material';
-import { Settings, Edit } from '@mui/icons-material';
+import { Box, Typography, Container, Avatar, Paper, Button } from '@mui/material';
+import { Edit } from '@mui/icons-material';
 
 const AccountPage = () => {
   return (
@@ -9,8 +9,8 @@ const AccountPage = () => {
           My Account
         </Typography>
         
-        <Grid container spacing={3}>
-          <Grid item xs={12} md={4}>
+        <Box sx={{ display: 'flex', flexDirection: { xs: 'column', md: 'row' }, gap: 3 }}>
+          <Box sx={{ flex: { xs: 1, md: '0 0 33%' } }}>
             <Paper sx={{ p: 3, textAlign: 'center' }}>
               <Avatar
                 sx={{ width: 120, height: 120, mx: 'auto', mb: 2 }}
@@ -29,9 +29,9 @@ const AccountPage = () => {
                 Edit Profile
               </Button>
             </Paper>
-          </Grid>
+          </Box>
           
-          <Grid item xs={12} md={8}>
+          <Box sx={{ flex: 1 }}>
             <Paper sx={{ p: 3 }}>
               <Typography variant="h6" sx={{ mb: 2 }}>
                 Account Settings
@@ -40,8 +40,8 @@ const AccountPage = () => {
                 Manage your account preferences and settings.
               </Typography>
             </Paper>
-          </Grid>
-        </Grid>
+          </Box>
+        </Box>
       </Box>
     </Container>
   );