Skip to content

Commit d073db1

Browse files
weaponsforgeweaponsforge
authored
Merge pull request #22 from weaponsforge/dev
v1.0.5
2 parents a25ca0b + 9e96559 commit d073db1

File tree

17 files changed

+452
-5
lines changed

17 files changed

+452
-5
lines changed

‎components/countries/index.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import Container from '@mui/material/Container'
2+
import Typography from '@mui/material/Typography'
3+
import CountryList from '@/domain/profile/countrylist'
4+
5+
function CountriesComponent ({
6+
countries,
7+
handleSelectCountry
8+
}) {
9+
return (
10+
<Container maxWidth='lg' sx={{ margin: 'auto', textAlign: 'center' }}>
11+
<Typography variant='h3'>
12+
Country Profile
13+
</Typography>
14+
<Typography variant='h5' sx={{ marginBottom: '48px' }}>
15+
Select a country to view its profile
16+
</Typography>
17+
18+
<CountryList
19+
countries={countries}
20+
handleSelectCountry={handleSelectCountry}
21+
/>
22+
</Container>
23+
)
24+
}
25+
26+
export default CountriesComponent

‎components/profiletabs/index.js‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import { useState } from 'react'
2+
import Link from 'next/link'
3+
import Button from '@mui/material/Button'
4+
import Box from '@mui/material/Box'
5+
import Container from '@mui/material/Container'
6+
import Grid from '@mui/material/Grid'
7+
import Typography from '@mui/material/Typography'
8+
9+
import NavigationTabs from '@/domain/profiletabs/navigationtabs'
10+
import TabPanel from '@/domain/profiletabs/tabpanel'
11+
12+
// Main tab sections
13+
import GHGEmmissions from '@/domain/profiletabs/sections/ghgemmissions'
14+
import ClimateRisks from '@/domain/profiletabs/sections/climaterisks'
15+
import ClimateChange from '@/domain/profiletabs/sections/climatechange'
16+
import ArticleText from '@/components/common/layout/articletext'
17+
import styles from './styles'
18+
19+
function ProfileTabsComponent ({
20+
country,
21+
// countries,
22+
textData,
23+
donutData,
24+
barData,
25+
// handleSelectCountry
26+
}) {
27+
const [tab, setTab] = useState(0)
28+
29+
return (
30+
<Grid container>
31+
{/** Header */}
32+
<Grid item xs={12} sx={styles.headerContainer}>
33+
<Container maxWidth='lg' sx={styles.headerContent}>
34+
<Box sx={styles.headerTitle}>
35+
<Box>
36+
<Typography variant='h1'>
37+
{country}
38+
</Typography>
39+
<Typography variant='h4'>
40+
Country Profile
41+
</Typography>
42+
</Box>
43+
44+
<Link href='/countries' passHref>
45+
<Button variant='outlined'>
46+
Countries
47+
</Button>
48+
</Link>
49+
</Box>
50+
51+
<NavigationTabs
52+
onTabSelect={(newValue) => {
53+
setTab(newValue)
54+
}}
55+
/>
56+
</Container>
57+
</Grid>
58+
59+
<Grid item xs={12}>
60+
<Container maxWidth='lg'>
61+
<TabPanel value={tab} index={0}>
62+
<GHGEmmissions
63+
donutData={donutData}
64+
textData={textData[0]}
65+
/>
66+
</TabPanel>
67+
<TabPanel value={tab} index={1}>
68+
<ClimateRisks barData={barData} textData={textData[0]} />
69+
</TabPanel>
70+
<TabPanel value={tab} index={2}>
71+
<ClimateChange barData={barData} textData={textData[0]} />
72+
</TabPanel>
73+
<TabPanel value={tab} index={3}>
74+
<ArticleText {...textData[1]} />
75+
</TabPanel>
76+
<TabPanel value={tab} index={4}>
77+
<ArticleText {...textData[2]} />
78+
</TabPanel>
79+
</Container>
80+
</Grid>
81+
</Grid>
82+
)
83+
}
84+
85+
export default ProfileTabsComponent

‎components/profiletabs/styles.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
const styles = {
2+
headerContainer: {
3+
backgroundColor: theme => theme.palette.primary.main,
4+
height: '270px'
5+
},
6+
headerContent: {
7+
paddingBottom: 0,
8+
'& h1': {
9+
lineHeight: '60px',
10+
},
11+
'& h1, h3, h4': {
12+
color: '#fff',
13+
fontFamily: 'Bebas Neue',
14+
fontWeight: 'normal'
15+
},
16+
height: '100%',
17+
display: 'flex',
18+
flexDirection: 'column',
19+
justifyContent: 'space-between'
20+
},
21+
headerTitle: {
22+
marginTop: theme => theme.spacing(9),
23+
display: 'flex',
24+
justifyContent: 'space-between',
25+
alignItems: 'center',
26+
'& button': {
27+
height: '50px',
28+
backgroundColor: theme => theme.palette.primary.light,
29+
'&:hover': {
30+
backgroundColor: '#fff'
31+
}
32+
},
33+
'& a': {
34+
textDecoration: 'none'
35+
}
36+
}
37+
}
38+
39+
export default styles

‎domain/profile/countrybutton/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import Button from '@mui/material/Button'
22
import { styled } from '@mui/material/styles'
33

44
const CountryButton = styled((props) => (
5-
<Button {...props} />
5+
<Button {...props} color='tertiary' />
66
/* eslint-disable no-unused-vars */
77
))(({ theme }) => ({
88
width: '150px'

‎domain/profiletabs/a11yprops/index.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
function a11yProps(index) {
2+
return {
3+
id: `simple-tab-${index}`,
4+
'aria-controls': `simple-tabpanel-${index}`,
5+
}
6+
}
7+
8+
export default a11yProps

‎domain/profiletabs/linktab/index.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import Tab from '@mui/material/Tab'
2+
import styles from './styles'
3+
4+
function LinkTab (props) {
5+
return (
6+
<Tab
7+
sx={styles.tab}
8+
component='a'
9+
wrapped
10+
onClick={(e) => {
11+
e.preventDefault()
12+
}}
13+
{...props}
14+
/>
15+
)
16+
}
17+
18+
export default LinkTab

‎domain/profiletabs/linktab/styles.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
const styles = {
2+
tab: {
3+
color: '#fff',
4+
textTransform: 'capitalize',
5+
'&:hover': {
6+
color: '#fff',
7+
opacity: 1,
8+
},
9+
'&.Mui-selected': {
10+
color: '#fff',
11+
fontWeight: theme => theme.typography.fontWeightMedium,
12+
},
13+
'&.Mui-focusVisible': {
14+
backgroundColor: '#d1eaff',
15+
},
16+
}
17+
}
18+
19+
export default styles

‎domain/profiletabs/navigationtabs/index.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import PropTypes from 'prop-types'
2+
import { useState } from 'react'
3+
import Box from '@mui/material/Box'
4+
import Tabs from '@mui/material/Tabs'
5+
import LinkTab from '../linktab'
6+
import styles from './styles'
7+
8+
function NavigationTabs ({ onTabSelect }) {
9+
const [value, setValue] = useState(0)
10+
11+
const handleChange = (e, newValue) => {
12+
setValue(newValue)
13+
14+
if (onTabSelect) {
15+
onTabSelect(newValue)
16+
}
17+
}
18+
19+
return (
20+
<Box sx={{ width: '100%' }}>
21+
<Tabs
22+
value={value}
23+
onChange={handleChange}
24+
aria-label='navigation tabs'
25+
sx={styles.tabs}
26+
variant='fullWidth'
27+
scrollButtons
28+
allowScrollButtonsMobile
29+
>
30+
<LinkTab label='Greenhouse Gas (GHG) Emmissions' href='#' />
31+
<LinkTab label='Climate Risks' href='#' />
32+
<LinkTab label='Climate Change and Vulnerability' href='#' />
33+
<LinkTab label='Adaptation and Mitigation Priorities' href='#' />
34+
<LinkTab label='Financing and Opportunities for ADB' href='#' />
35+
</Tabs>
36+
</Box>
37+
)
38+
}
39+
40+
NavigationTabs.propTypes = {
41+
onTabSelect: PropTypes.func
42+
}
43+
44+
export default NavigationTabs

‎domain/profiletabs/navigationtabs/styles.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
const styles = {
2+
tabs: {
3+
'& .MuiTabs-indicator': {
4+
border: theme => `2px solid ${theme.palette.secondary.main}`,
5+
backgroundColor: theme => theme.palette.primary.dark,
6+
borderShadow: `
7+
rgb(255 255 255) 0px 0px 0px 0px,
8+
rgb(0 0 0 / 5%) 0px 0px 0px 1px,
9+
rgb(0 0 0 / 10%) 0px 10px 15px -3px, rgb(0 0 0 / 5%)
10+
0px 4px 6px -2px !important`
11+
},
12+
}
13+
}
14+
15+
export default styles

‎domain/profiletabs/sections/climatechange/index.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import Grid from '@mui/material/Grid'
2+
import LineGraph from '@/components/common/ui/charts/line'
3+
import Typography from '@mui/material/Typography'
4+
import SubContentText from '@/components/common/layout/subtcontenttext'
5+
6+
function ClimateChange ({ barData, textData }) {
7+
return (
8+
<Grid container sx={{ marginTop: '56px' }}>
9+
{/** Climate Change and Vulnerability Section */}
10+
<Grid item xs={12}>
11+
<Typography variant="h4">
12+
Climate Change Scenarios
13+
</Typography>
14+
</Grid>
15+
16+
<Grid item xs={12} sm={7}>
17+
<SubContentText
18+
{...textData}
19+
title='Climate Change and Vulnerability'
20+
/>
21+
</Grid>
22+
23+
<Grid item xs={12} sm={5}>
24+
<LineGraph
25+
{...barData}
26+
width={300}
27+
height={300}
28+
/>
29+
</Grid>
30+
</Grid>
31+
)
32+
}
33+
34+
export default ClimateChange

0 commit comments

Comments
 (0)