-
Notifications
You must be signed in to change notification settings - Fork 16
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #652 from Aar-if/subzero
Issue #PS-3384 feat: UI component for pop up of youth profile
- Loading branch information
Showing
9 changed files
with
242 additions
and
44 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
import { MenuItem, FormControl, Select, InputLabel } from '@mui/material'; | ||
import { useState } from 'react'; | ||
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'; | ||
|
||
interface DropdownProps { | ||
name: string; | ||
values: string[]; | ||
onSelect: (value: string) => void; | ||
} | ||
|
||
const Dropdown: React.FC<DropdownProps> = ({ name, values, onSelect }) => { | ||
const [selectedValue, setSelectedValue] = useState(''); | ||
|
||
const handleChange = (event: any) => { | ||
const value = event.target.value; | ||
setSelectedValue(value); | ||
onSelect(value); | ||
}; | ||
|
||
return ( | ||
<FormControl fullWidth> | ||
<InputLabel>{name}</InputLabel> | ||
<Select | ||
value={selectedValue} | ||
label={name} | ||
onChange={handleChange} | ||
IconComponent={KeyboardArrowDownIcon} | ||
> | ||
{values.map((value, index) => ( | ||
<MenuItem key={index} value={value}> | ||
{value} | ||
</MenuItem> | ||
))} | ||
</Select> | ||
</FormControl> | ||
); | ||
}; | ||
|
||
export default Dropdown; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,96 @@ | ||
import withRole from '@/components/withRole'; | ||
import React, { useEffect, useState } from 'react'; | ||
import { TENANT_DATA } from '../../../../app.config'; | ||
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; | ||
import { useRouter } from 'next/router'; | ||
import { useTranslation } from 'react-i18next'; | ||
import { GetStaticPaths } from 'next'; | ||
import Header from '@/components/Header'; | ||
import BackHeader from '@/components/youthNet/BackHeader'; | ||
import { Box, Typography } from '@mui/material'; | ||
import { UserList } from '@/components/youthNet/UserCard'; | ||
import Profile from '@/components/youthNet/Profile'; | ||
import { useTheme } from '@mui/material/styles'; | ||
|
||
const StudentDetails = () => { | ||
const theme = useTheme<any>(); | ||
const { t } = useTranslation(); | ||
const router = useRouter(); | ||
const { id } = router.query; | ||
|
||
const [studentName, setStudentName] = useState<string | undefined>(undefined); | ||
|
||
useEffect(() => { | ||
if (Array.isArray(id)) { | ||
setStudentName(id[0]); | ||
} else { | ||
setStudentName(id); | ||
} | ||
}, [id]); | ||
|
||
const handleBack = () => { | ||
router.back(); | ||
}; | ||
|
||
return ( | ||
<Box minHeight="100vh"> | ||
<Box> | ||
<Header /> | ||
</Box> | ||
<Box ml={2} display={'flex'} flexDirection={'row'}> | ||
<Box sx={{ width: 30 }}> | ||
<BackHeader showBackButton={true} onBackClick={handleBack} /> | ||
</Box> | ||
<Box sx={{ width: '100%' }}> | ||
<UserList | ||
layout="list" | ||
users={[ | ||
{ | ||
name: studentName || '', | ||
village: 'Shivare (Bhor, Pune, Maharashtra)', | ||
showMore: true, | ||
showAvtar: true, | ||
}, | ||
]} | ||
/> | ||
</Box> | ||
</Box> | ||
<Box | ||
sx={{ | ||
background: theme.palette.info.gradient, | ||
padding: '24px 16px 24px 16px', | ||
}} | ||
> | ||
<Typography | ||
variant="h6" | ||
sx={{ | ||
fontSize: '14px', | ||
fontWeight: 500, | ||
color: theme.palette.info.black, | ||
}} | ||
> | ||
{t('YOUTHNET_PROFILE.PROFILE_DETAILS')} | ||
</Typography> | ||
<Profile fullName={studentName || ''} emailId={''} /> | ||
</Box> | ||
</Box> | ||
); | ||
}; | ||
|
||
export async function getStaticProps({ locale }: any) { | ||
return { | ||
props: { | ||
...(await serverSideTranslations(locale, ['common'])), | ||
// Will be passed to the page component as props | ||
}, | ||
}; | ||
} | ||
|
||
export const getStaticPaths: GetStaticPaths<{ slug: string }> = async () => { | ||
return { | ||
paths: [], //indicates that no page needs be created at build time | ||
fallback: 'blocking', //indicates the type of fallback | ||
}; | ||
}; | ||
|
||
export default withRole(TENANT_DATA.YOUTHNET)(StudentDetails); |
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.