Sam Gbafa
2 months ago
committed by
GitHub
commit
d6d61b745f
@ -0,0 +1,3 @@ |
||||
Ultrathink about the given task. Create a plan on how to implement it. |
||||
|
||||
Optional context: #$ARGUMENTS |
||||
@ -0,0 +1,5 @@ |
||||
Step back to the previous commit. Stash the changes. |
||||
|
||||
This command is being called by someone who does not know what git is. Your job is to do the process on their behalf. |
||||
|
||||
Optional context: #$ARGUMENTS |
||||
@ -0,0 +1,79 @@ |
||||
import { useLocation, useNavigate } from 'react-router-dom'; |
||||
import {
|
||||
BottomNavigation as MuiBottomNavigation,
|
||||
BottomNavigationAction,
|
||||
Paper
|
||||
} from '@mui/material'; |
||||
import { |
||||
Home, |
||||
People, |
||||
PostAdd, |
||||
Message, |
||||
AccountCircle, |
||||
} from '@mui/icons-material'; |
||||
|
||||
const BottomNavigation = () => { |
||||
const location = useLocation(); |
||||
const navigate = useNavigate(); |
||||
|
||||
const navigationItems = [ |
||||
{ label: 'Feed', icon: <Home />, path: '/feed' }, |
||||
{ label: 'Contacts', icon: <People />, path: '/contacts' }, |
||||
{ label: 'Posts', icon: <PostAdd />, path: '/posts' }, |
||||
{ label: 'Messages', icon: <Message />, path: '/messages' }, |
||||
{ label: 'Account', icon: <AccountCircle />, path: '/account' }, |
||||
]; |
||||
|
||||
const getCurrentValue = () => { |
||||
const currentPath = location.pathname; |
||||
if (currentPath === '/' || currentPath === '/feed') return '/feed'; |
||||
const activeItem = navigationItems.find(item =>
|
||||
item.path === currentPath || (item.path !== '/feed' && currentPath.startsWith(item.path)) |
||||
); |
||||
return activeItem ? activeItem.path : '/feed'; |
||||
}; |
||||
|
||||
const handleChange = (_event: React.SyntheticEvent, newValue: string) => { |
||||
navigate(newValue); |
||||
}; |
||||
|
||||
return ( |
||||
<Paper
|
||||
sx={{
|
||||
position: 'fixed',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
zIndex: 1000, |
||||
borderTop: 1, |
||||
borderColor: 'divider', |
||||
}}
|
||||
elevation={3} |
||||
> |
||||
<MuiBottomNavigation |
||||
value={getCurrentValue()} |
||||
onChange={handleChange} |
||||
showLabels |
||||
sx={{ |
||||
'& .MuiBottomNavigationAction-root': { |
||||
color: 'text.secondary', |
||||
'&.Mui-selected': { |
||||
color: 'primary.main', |
||||
}, |
||||
}, |
||||
}} |
||||
> |
||||
{navigationItems.map((item) => ( |
||||
<BottomNavigationAction |
||||
key={item.path} |
||||
label={item.label} |
||||
value={item.path} |
||||
icon={item.icon} |
||||
/> |
||||
))} |
||||
</MuiBottomNavigation> |
||||
</Paper> |
||||
); |
||||
}; |
||||
|
||||
export default BottomNavigation; |
||||
@ -0,0 +1,50 @@ |
||||
import { Box, Typography, Container, Avatar, Paper, Button } from '@mui/material'; |
||||
import { Edit } from '@mui/icons-material'; |
||||
|
||||
const AccountPage = () => { |
||||
return ( |
||||
<Container maxWidth="lg"> |
||||
<Box sx={{ py: 4 }}> |
||||
<Typography variant="h4" sx={{ mb: 3, fontWeight: 600 }}> |
||||
My Account |
||||
</Typography> |
||||
|
||||
<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 }} |
||||
alt="Profile" |
||||
src="/static/images/avatar/2.jpg" |
||||
> |
||||
U |
||||
</Avatar> |
||||
<Typography variant="h6" sx={{ mb: 1 }}> |
||||
User Name |
||||
</Typography> |
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}> |
||||
user@example.com |
||||
</Typography> |
||||
<Button variant="outlined" startIcon={<Edit />}> |
||||
Edit Profile |
||||
</Button> |
||||
</Paper> |
||||
</Box> |
||||
|
||||
<Box sx={{ flex: 1 }}> |
||||
<Paper sx={{ p: 3 }}> |
||||
<Typography variant="h6" sx={{ mb: 2 }}> |
||||
Account Settings |
||||
</Typography> |
||||
<Typography variant="body1" color="text.secondary"> |
||||
Manage your account preferences and settings. |
||||
</Typography> |
||||
</Paper> |
||||
</Box> |
||||
</Box> |
||||
</Box> |
||||
</Container> |
||||
); |
||||
}; |
||||
|
||||
export default AccountPage; |
||||
@ -0,0 +1,18 @@ |
||||
import { Box, Typography, Container } from '@mui/material'; |
||||
|
||||
const FeedPage = () => { |
||||
return ( |
||||
<Container maxWidth="lg"> |
||||
<Box sx={{ py: 4 }}> |
||||
<Typography variant="h4" sx={{ mb: 3, fontWeight: 600 }}> |
||||
Feed |
||||
</Typography> |
||||
<Typography variant="body1" color="text.secondary"> |
||||
Your personalized network feed will appear here. |
||||
</Typography> |
||||
</Box> |
||||
</Container> |
||||
); |
||||
}; |
||||
|
||||
export default FeedPage; |
||||
@ -0,0 +1,18 @@ |
||||
import { Box, Typography, Container } from '@mui/material'; |
||||
|
||||
const MessagesPage = () => { |
||||
return ( |
||||
<Container maxWidth="lg"> |
||||
<Box sx={{ py: 4 }}> |
||||
<Typography variant="h4" sx={{ mb: 3, fontWeight: 600 }}> |
||||
Messages |
||||
</Typography> |
||||
<Typography variant="body1" color="text.secondary"> |
||||
Your messages and conversations will appear here. |
||||
</Typography> |
||||
</Box> |
||||
</Container> |
||||
); |
||||
}; |
||||
|
||||
export default MessagesPage; |
||||
@ -0,0 +1,18 @@ |
||||
import { Box, Typography, Container } from '@mui/material'; |
||||
|
||||
const PostsOffersPage = () => { |
||||
return ( |
||||
<Container maxWidth="lg"> |
||||
<Box sx={{ py: 4 }}> |
||||
<Typography variant="h4" sx={{ mb: 3, fontWeight: 600 }}> |
||||
Posts & Offers |
||||
</Typography> |
||||
<Typography variant="body1" color="text.secondary"> |
||||
Share posts and view offers from your network. |
||||
</Typography> |
||||
</Box> |
||||
</Container> |
||||
); |
||||
}; |
||||
|
||||
export default PostsOffersPage; |
||||
Loading…
Reference in new issue