Skip to content

Commit

Permalink
Task #216462 ,Task #216464 - design for footer and header
Browse files Browse the repository at this point in the history
  • Loading branch information
@Ekta29yadav
Ekta29yadav committed Apr 1, 2024
1 parent 640259b commit cd5d275
Show file tree
Hide file tree
Showing 8 changed files with 242 additions and 505 deletions.
130 changes: 35 additions & 95 deletions packages/common-lib/src/components/layout/Footer.js
View file
Original file line number Diff line number Diff line change
@@ -1,99 +1,39 @@
import React, { useEffect } from 'react'
import {
Box,
Text,
HStack,
Center,
Stack,
Pressable,
VStack
} from 'native-base'
import IconByName from '../IconByName'
import { useTranslation } from 'react-i18next'
import { generatePath, useNavigate } from 'react-router-dom'
import { useWindowSize } from '../helper'
import * as React from 'react';
import Box from '@mui/material/Box';
import BottomNavigation from '@mui/material/BottomNavigation';
import BottomNavigationAction from '@mui/material/BottomNavigationAction';
import FavoriteIcon from '@mui/icons-material/Favorite';
import SearchSharpIcon from '@mui/icons-material/SearchSharp';
import GroupsOutlinedIcon from '@mui/icons-material/GroupsOutlined';
import AccountCircleOutlinedIcon from '@mui/icons-material/AccountCircleOutlined';
import EditNoteOutlinedIcon from '@mui/icons-material/EditNoteOutlined';

export default function Footer({ menues, routeDynamics, ...props }) {
const path = window?.location?.pathname.toString()
const { t } = useTranslation()
const navigate = useNavigate()
const styles = {
BottomNavigation: {
width: '100%',
position: 'fixed',
bottom: 0,
},
};

const [width, Height] = useWindowSize()
const footerMenus = menues

const PressableNew = ({ item, children, ...prop }) => {
return item?.route ? (
<Pressable
{...prop}
onPress={() => {
navigate(
routeDynamics
? generatePath(item.route, { ...{ id: item.id } })
: item.route
)
}}
>
{children}
</Pressable>
) : (
<Box {...prop}>{children}</Box>
)
}
export default function Footer() {
const [value, setValue] = React.useState(0);

return (
<Stack>
<Box width={width} flex={1} safeAreaTop position='fixed' bottom='0'>
<Center flex={1}></Center>
<HStack
pl={'20px'}
pr={'20px'}
bg='white'
alignItems='center'
safeAreaBottom
shadow={6}
>
{footerMenus?.map((item, index) => (
<PressableNew
item={item}
key={index}
cursor='pointer'
py='3'
flex={1}
alignItems='center'
>
{Array.isArray(item?.selected) &&
(item?.selected?.find((e) => path.startsWith(e) && e !== '/') ||
item.selected.includes(path)) ? (
<VStack alignItems='center'>
<IconByName
name={item.icon}
isDisabled
p='2'
pb='1'
color={'primary'}
/>
<Text fontSize='12' color={'primary'}>
{t(item.title)}
</Text>
</VStack>
) : (
<VStack alignItems={'center'}>
<IconByName
name={item.icon}
isDisabled
p='2'
pb='1'
color={'lightGray1'}
/>
<Text fontSize='12' color={'lightGray1'}>
{t(item.title)}
</Text>
</VStack>
)}
</PressableNew>
))}
</HStack>
</Box>
</Stack>
)
}
<Box sx={{ width: 500, position: 'fixed',height:'67px', bottom: 0, background:'#fff',width:'100%',boxShadow: '0px -1px 4px 0px #00000040', }}>
<BottomNavigation
sx={{ width: '100%', display: 'flex', position: 'relative',padding:'4px 0' }}
showLabels
value={value}
onChange={(event, newValue) => {
setValue(newValue);
}}
>
<BottomNavigationAction className='navigateActive' label="Search" icon={<SearchSharpIcon />} />
<BottomNavigationAction label="Content" icon={<EditNoteOutlinedIcon />} />
<BottomNavigationAction label="Connections" icon={<GroupsOutlinedIcon />} />
<BottomNavigationAction label="Profile" icon={<AccountCircleOutlinedIcon />} />
</BottomNavigation>
</Box>
);
}
2 changes: 1 addition & 1 deletion packages/common-lib/src/components/layout/Layout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ export default function Layout({
<Box minH={refFoot?.clientHeight ? refFoot?.clientHeight : 85}></Box>
</HeightWidth>
<Box w={width} ref={(e) => serRefFoot(e)}>
<Footer {...(Layout?._footer ? Layout?._footer : {})} {..._footer} />
<Footer {...(Layout?._footer ? Layout?._footer : {})} {..._footer} />
</Box>
</Center>
)
Expand Down
10 changes: 5 additions & 5 deletions packages/nulp_elite/src/components/Card.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export default function BoxCard({ items }) {
// console.log(items.appIcon)

return (
<Card sx={{ maxWidth: 345, position: "relative" }}>
<Card sx={{ position: "relative" }}>
<CardMedia
sx={{
margin: "8px 3px 0 9px",
Expand All @@ -36,19 +36,19 @@ export default function BoxCard({ items }) {
width: '96%',
height: '47%',
background: 'linear-gradient(45deg, RGBA(28, 25, 25, 0.46) 7%, RGBA(20, 18, 18, 0.57) 45%)',
zIndex: 1,
zIndex: 999,
margin: '8px 10px 0 10px',
borderTopLeftRadius: '5px',
borderTopRightRadius:'20px'
}}></div>
<CardContent>
<Typography gutterBottom variant="h5" component="div" className="cardTitle">
<Typography gutterBottom variant="h5" component="div" className="cardTitle" style={{fontSize:'14px',fontWeight:'600'}}>
{items.name}
</Typography>
<Typography gutterBottom variant="h7" component="div" style={{zIndex:'9999',position:'absolute',top:'30px',right:'3px',color:'#fff',textAlign:'center'}}>
<Typography gutterBottom variant="h7" component="div" style={{zIndex:'0 ',fontSize:'14px',position:'absolute',top:'30px',right:'3px',color:'#fff',textAlign:'center'}}>
<Box className="cardCourses"> {items.primaryCategory}</Box>
</Typography>
<Box style={{background:'#fff',padding:'10px',borderRadius:'150px',height:'50px',width:'50px',border:'solid 1px #E1E1E1',position:'absolute',top:'115px',right:'30px',textAlign:'center',zIndex:'99'}}>
<Box style={{background:'#fff',padding:'10px',borderRadius:'150px',height:'50px',width:'50px',border:'solid 1px #E1E1E1',position:'absolute',top:'115px',right:'30px',textAlign:'center',zIndex:'999'}}>
<img src={items.appIcon ? items.appIcon : require("assets/swm.png")} style={{height:'50px',maxWidth:'100%',objectFit:'contain'}} />

</Box>
Expand Down
178 changes: 86 additions & 92 deletions packages/nulp_elite/src/components/Footer.js
View file
Original file line number Diff line number Diff line change
@@ -1,99 +1,93 @@
import React, { useEffect } from "react";
import {
Box,
Text,
HStack,
Center,
Stack,
Pressable,
VStack,
} from "native-base";
// import IconByName from '../IconByName'
// import { useTranslation } from 'react-i18next'
import { generatePath, useNavigate } from "react-router-dom";
// import { useWindowSize } from '../helper'
import * as React from 'react';
import Box from '@mui/material/Box';
import BottomNavigation from '@mui/material/BottomNavigation';
import BottomNavigationAction from '@mui/material/BottomNavigationAction';
import SearchSharpIcon from '@mui/icons-material/SearchSharp';
import GroupsOutlinedIcon from '@mui/icons-material/GroupsOutlined';
import AccountCircleOutlinedIcon from '@mui/icons-material/AccountCircleOutlined';
import EditNoteOutlinedIcon from '@mui/icons-material/EditNoteOutlined';
import Container from '@mui/material/Container';
import Link from '@mui/material/Link';
import Grid from '@mui/material/Grid';

export default function Footer({ menues, routeDynamics, ...props }) {
const path = window?.location?.pathname.toString();
// const { t } = useTranslation()
// const navigate = useNavigate()

// const [width, Height] = useWindowSize()
const footerMenus = menues;

const PressableNew = ({ item, children, ...prop }) => {
return item?.route ? (
<Pressable
{...prop}
onPress={() => {
// navigate(
// routeDynamics
// ? generatePath(item.route, { ...{ id: item.id } })
// : item.route
// )
}}
>
{children}
</Pressable>
) : (
<Box {...prop}>{children}</Box>
);
// const styles = {
// BottomNavigation: {
// width: '100%',
// position: 'fixed',
// bottom: 0,
// },
// };

export default function Footer() {
const [value, setValue] = React.useState(0);
const pages = ['Content', 'Connections', 'Profile'];
const [anchorEl, setAnchorEl] = React.useState(null);

const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};

const handleClose = () => {
setAnchorEl(null);
};



return (
<Stack>
<Box flex={1} safeAreaTop position="fixed" bottom="0">
<Center flex={1}></Center>
<HStack
pl={"20px"}
pr={"20px"}
bg="white"
alignItems="center"
safeAreaBottom
shadow={6}
>
{footerMenus?.map((item, index) => (
<PressableNew
item={item}
key={index}
cursor="pointer"
py="3"
flex={1}
alignItems="center"
>
{Array.isArray(item?.selected) &&
(item?.selected?.find((e) => path.startsWith(e) && e !== "/") ||
item.selected.includes(path)) ? (
<VStack alignItems="center">
{/* <IconByName
name={item.icon}
isDisabled
p='2'
pb='1'
color={'primary'}
/> */}
<Text fontSize="12" color={"primary"}>
{t(item.title)}
</Text>
</VStack>
) : (
<VStack alignItems={"center"}>
{/* <IconByName
name={item.icon}
isDisabled
p='2'
pb='1'
color={'lightGray1'}
/> */}
<Text fontSize="12" color={"lightGray1"}>
{t(item.title)}
</Text>
</VStack>
)}
</PressableNew>
))}
</HStack>
</Box>
</Stack>
<>
<Container maxWidth="xl" className='lg-hide'>
<Box sx={{ position: 'fixed', bottom: 0, left: 0, right: 0 ,width:'100%',zIndex:'9999' }}>
<BottomNavigation
sx={{ width: '100%', display: 'flex', position: 'relative',paddingTop:'10px' }}
showLabels
value={value}
onChange={(event, newValue) => {
setValue(newValue);
}}
>
<BottomNavigationAction label="Recents" className='navigateActive' icon={<SearchSharpIcon />} />
<BottomNavigationAction label="Favorites" icon={<EditNoteOutlinedIcon />} />
<BottomNavigationAction label="Nearby" icon={<GroupsOutlinedIcon />} />
<BottomNavigationAction label="Account" icon={<AccountCircleOutlinedIcon />} />
</BottomNavigation>
</Box>

</Container>
<Container className='xs-hide' maxWidth="xl" style={{background:'#2D2D2D', color:'#fff',padding:'30px 15px 20px 15px'}}>
{/* <Box>dfgdfgsg */}


<Grid container spacing={2} className='footer'>
<Grid item xs={8} md={3} style={{fontSize:'14px', lineHeight:'2.4',fontWeight:'400'}}>
<Link underline="none" href="#" style={{padding:'10px 0 2px',color:'#fff',margin:'0 8px'}}>NIUA</Link>
<Link underline="none" href="#" style={{padding:'10px 0 2px',color:'#fff',margin:'0 8px'}}>MoHUA</Link><br/>
<Link underline="none" href="#" style={{padding:'10px 0 2px',color:'#fff',margin:'0 8px'}}>About Us</Link>
<Link underline="none" href="#" style={{padding:'10px 0 2px',color:'#fff',margin:'0 8px'}}>Contact Us</Link>
<Link underline="none" href="#" style={{padding:'10px 0 2px',color:'#fff',margin:'0 8px'}}>FAQs</Link>
<Link underline="none" href="#" style={{padding:'10px 0 2px',color:'#fff',margin:'0 8px'}}>Log Out</Link>

</Grid>
<Grid item xs={4} md={3} style={{fontSize:'14px', lineHeight:'2.4',fontWeight:'400'}}>
<Link underline="none" href="#" style={{padding:'10px 0 2px',color:'#fff', fontSize:'14px'}}>Center for Digital Governance</Link><br/>
<Link underline="none" href="#" style={{padding:'10px 0 2px',color:'#fff', fontSize:'14px'}}>National Urban Digital Mission</Link>
</Grid>
<Grid item xs={4} md={3} style={{fontSize:'14px', lineHeight:'1.5', fontWeight:'400'}}>
<Box style={{fontSize:'14px',fontWeight:'700'}}>Nodal Ministry:</Box>
Ministry of Housing and Urban Affairs, Government of India<br/>
Nirman Bhawan, New Delhi- 110001, INDIA
</Grid>
<Grid item xs={8} md={3} style={{fontSize:'14px', lineHeight:'1.5',fontWeight:'400'}}>
<Box style={{fontSize:'14px',fontWeight:'700'}}> Anchor Institute:</Box>
National Institute of Urban Affairs<br/>
1st Floor, Core 4B, India Habitat Centre, Lodhi Road, New Delhi - 110003, INDIA<br/>

Phone: (+91 11) 24617517, 24617543, 24617595
</Grid>
</Grid>
</Container>

</>
);
}
}
Loading

0 comments on commit cd5d275

Please sign in to comment.