From 2b1c057ec3773b3b51116e82013b37fa19cf8101 Mon Sep 17 00:00:00 2001 From: weaponsforge Date: Wed, 23 Nov 2022 06:50:02 +0800 Subject: [PATCH 1/2] feat: Create a new static full page layout, #20 --- components/common/layout/articletext/index.js | 2 +- .../common/layout/subtcontenttext/index.js | 2 +- components/profile-centered/index.js | 2 +- components/profile/index.js | 2 +- components/profiletabs/index.js | 82 +++++++++++++++++++ components/profiletabs/styles.js | 37 +++++++++ domain/profiletabs/a11yprops/index.js | 8 ++ domain/profiletabs/linktab/index.js | 18 ++++ domain/profiletabs/linktab/styles.js | 19 +++++ domain/profiletabs/navigationtabs/index.js | 44 ++++++++++ domain/profiletabs/navigationtabs/styles.js | 15 ++++ .../sections/climatechange/index.js | 34 ++++++++ .../sections/climaterisks/index.js | 34 ++++++++ .../sections/ghgemmissions/index.js | 24 ++++++ domain/profiletabs/tabpanel/index.js | 23 ++++++ pages/_document.js | 1 + pages/about/index.js | 2 +- pages/home/cafe.js | 2 +- pages/home/index.js | 2 +- pages/profiletabs/index.js | 44 ++++++++++ src/mui/theme.js | 6 +- 21 files changed, 393 insertions(+), 10 deletions(-) create mode 100644 components/profiletabs/index.js create mode 100644 components/profiletabs/styles.js create mode 100644 domain/profiletabs/a11yprops/index.js create mode 100644 domain/profiletabs/linktab/index.js create mode 100644 domain/profiletabs/linktab/styles.js create mode 100644 domain/profiletabs/navigationtabs/index.js create mode 100644 domain/profiletabs/navigationtabs/styles.js create mode 100644 domain/profiletabs/sections/climatechange/index.js create mode 100644 domain/profiletabs/sections/climaterisks/index.js create mode 100644 domain/profiletabs/sections/ghgemmissions/index.js create mode 100644 domain/profiletabs/tabpanel/index.js create mode 100644 pages/profiletabs/index.js diff --git a/components/common/layout/articletext/index.js b/components/common/layout/articletext/index.js index 9c7312b..ca41642 100644 --- a/components/common/layout/articletext/index.js +++ b/components/common/layout/articletext/index.js @@ -1,6 +1,6 @@ import PropTypes from 'prop-types' import Box from '@mui/material/Box' -import Typography from '@mui/material/Typography' +import Typography from '@mui/material/typography' import FullBox from '@/components/common/layout/fullbox' function ArticleText ({ diff --git a/components/common/layout/subtcontenttext/index.js b/components/common/layout/subtcontenttext/index.js index c66aa95..2814961 100644 --- a/components/common/layout/subtcontenttext/index.js +++ b/components/common/layout/subtcontenttext/index.js @@ -1,6 +1,6 @@ import PropTypes from 'prop-types' import Box from '@mui/material/Box' -import Typography from '@mui/material/Typography' +import Typography from '@mui/material/typography' import FullBox from '@/components/common/layout/fullbox' import styles from './styles' diff --git a/components/profile-centered/index.js b/components/profile-centered/index.js index 5f06276..bd3f1c7 100644 --- a/components/profile-centered/index.js +++ b/components/profile-centered/index.js @@ -1,6 +1,6 @@ import Container from '@mui/material/Container' import Grid from '@mui/material/Grid' -import Typography from '@mui/material/Typography' +import Typography from '@mui/material/typography' import SubContentText from '@/components/common/layout/subtcontenttext' import DonutChart from '@/components/common/ui/charts/donut' import BarChart from '@/components/common/ui/charts/bar' diff --git a/components/profile/index.js b/components/profile/index.js index 7f8debf..e3e03c5 100644 --- a/components/profile/index.js +++ b/components/profile/index.js @@ -1,5 +1,5 @@ import Grid from '@mui/material/Grid' -import Typography from '@mui/material/Typography' +import Typography from '@mui/material/typography' import SubContentText from '@/components/common/layout/subtcontenttext' import DonutChart from '@/components/common/ui/charts/donut' import BarChart from '@/components/common/ui/charts/bar' diff --git a/components/profiletabs/index.js b/components/profiletabs/index.js new file mode 100644 index 0000000..793c6a8 --- /dev/null +++ b/components/profiletabs/index.js @@ -0,0 +1,82 @@ +import { useState } from 'react' +import Button from '@mui/material/Button' +import Box from '@mui/material/Box' +import Container from '@mui/material/Container' +import Grid from '@mui/material/Grid' +import Typography from '@mui/material/typography' + +import NavigationTabs from '@/domain/profiletabs/navigationtabs' +import TabPanel from '@/domain/profiletabs/tabpanel' + +// Main tab sections +import GHGEmmissions from '@/domain/profiletabs/sections/ghgemmissions' +import ClimateRisks from '@/domain/profiletabs/sections/climaterisks' +import ClimateChange from '@/domain/profiletabs/sections/climatechange' +import ArticleText from '@/components/common/layout/articletext' +import styles from './styles' + +function ProfileTabsComponent ({ + // country, + // countries, + textData, + donutData, + barData, + // handleSelectCountry +}) { + const [tab, setTab] = useState(0) + + return ( + + {/** Header */} + + + + + + Pakistan + + + Country Profile + + + + + + + { + setTab(newValue) + }} + /> + + + + + + + + + + + + + + + + + + + + + + + + ) +} + +export default ProfileTabsComponent diff --git a/components/profiletabs/styles.js b/components/profiletabs/styles.js new file mode 100644 index 0000000..785cc7a --- /dev/null +++ b/components/profiletabs/styles.js @@ -0,0 +1,37 @@ +const styles = { + headerContainer: { + backgroundColor: theme => theme.palette.primary.main, + height: '270px' + }, + headerContent: { + paddingBottom: 0, + '& h1': { + lineHeight: '60px', + }, + '& h1, h3, h4': { + color: '#fff', + fontFamily: 'Bebas Neue', + fontWeight: 'normal' + }, + height: '100%', + display: 'flex', + flexDirection: 'column', + justifyContent: 'space-between' + }, + headerTitle: { + marginTop: theme => theme.spacing(9), + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + + '& button': { + height: '50px', + backgroundColor: theme => theme.palette.primary.light, + '&:hover': { + backgroundColor: '#fff' + } + } + } +} + +export default styles diff --git a/domain/profiletabs/a11yprops/index.js b/domain/profiletabs/a11yprops/index.js new file mode 100644 index 0000000..4ab1d0d --- /dev/null +++ b/domain/profiletabs/a11yprops/index.js @@ -0,0 +1,8 @@ +function a11yProps(index) { + return { + id: `simple-tab-${index}`, + 'aria-controls': `simple-tabpanel-${index}`, + } +} + +export default a11yProps diff --git a/domain/profiletabs/linktab/index.js b/domain/profiletabs/linktab/index.js new file mode 100644 index 0000000..5a341d9 --- /dev/null +++ b/domain/profiletabs/linktab/index.js @@ -0,0 +1,18 @@ +import Tab from '@mui/material/Tab' +import styles from './styles' + +function LinkTab (props) { + return ( + { + e.preventDefault() + }} + {...props} + /> + ) +} + +export default LinkTab \ No newline at end of file diff --git a/domain/profiletabs/linktab/styles.js b/domain/profiletabs/linktab/styles.js new file mode 100644 index 0000000..af051d9 --- /dev/null +++ b/domain/profiletabs/linktab/styles.js @@ -0,0 +1,19 @@ +const styles = { + tab: { + color: '#fff', + textTransform: 'capitalize', + '&:hover': { + color: '#fff', + opacity: 1, + }, + '&.Mui-selected': { + color: '#fff', + fontWeight: theme => theme.typography.fontWeightMedium, + }, + '&.Mui-focusVisible': { + backgroundColor: '#d1eaff', + }, + } +} + +export default styles diff --git a/domain/profiletabs/navigationtabs/index.js b/domain/profiletabs/navigationtabs/index.js new file mode 100644 index 0000000..69ab9d7 --- /dev/null +++ b/domain/profiletabs/navigationtabs/index.js @@ -0,0 +1,44 @@ +import PropTypes from 'prop-types' +import { useState } from 'react' +import Box from '@mui/material/Box' +import Tabs from '@mui/material/Tabs' +import LinkTab from '../linktab' +import styles from './styles' + +function NavigationTabs ({ onTabSelect }) { + const [value, setValue] = useState(0) + + const handleChange = (e, newValue) => { + setValue(newValue) + + if (onTabSelect) { + onTabSelect(newValue) + } + } + + return ( + + + + + + + + + + ) +} + +NavigationTabs.propTypes = { + onTabSelect: PropTypes.func +} + +export default NavigationTabs diff --git a/domain/profiletabs/navigationtabs/styles.js b/domain/profiletabs/navigationtabs/styles.js new file mode 100644 index 0000000..b407c29 --- /dev/null +++ b/domain/profiletabs/navigationtabs/styles.js @@ -0,0 +1,15 @@ +const styles = { + tabs: { + '& .MuiTabs-indicator': { + border: theme => `2px solid ${theme.palette.secondary.main}`, + backgroundColor: theme => theme.palette.primary.dark, + borderShadow: ` + rgb(255 255 255) 0px 0px 0px 0px, + rgb(0 0 0 / 5%) 0px 0px 0px 1px, + rgb(0 0 0 / 10%) 0px 10px 15px -3px, rgb(0 0 0 / 5%) + 0px 4px 6px -2px !important` + }, + } +} + +export default styles diff --git a/domain/profiletabs/sections/climatechange/index.js b/domain/profiletabs/sections/climatechange/index.js new file mode 100644 index 0000000..000e6d4 --- /dev/null +++ b/domain/profiletabs/sections/climatechange/index.js @@ -0,0 +1,34 @@ +import Grid from '@mui/material/Grid' +import LineGraph from '@/components/common/ui/charts/line' +import Typography from '@mui/material/typography' +import SubContentText from '@/components/common/layout/subtcontenttext' + +function ClimateChange ({ barData, textData }) { + return ( + + {/** Climate Change and Vulnerability Section */} + + + Climate Change Scenarios + + + + + + + + + + + + ) +} + +export default ClimateChange diff --git a/domain/profiletabs/sections/climaterisks/index.js b/domain/profiletabs/sections/climaterisks/index.js new file mode 100644 index 0000000..784dd25 --- /dev/null +++ b/domain/profiletabs/sections/climaterisks/index.js @@ -0,0 +1,34 @@ +import Grid from '@mui/material/Grid' +import BarChart from '@/components/common/ui/charts/bar' +import Typography from '@mui/material/typography' +import SubContentText from '@/components/common/layout/subtcontenttext' + +function ClimateRisks ({ barData, textData }) { + return ( + + {/** Climate Risks Section */} + + + Climate Change Scenarios + + + + + + + + + + + + ) +} + +export default ClimateRisks diff --git a/domain/profiletabs/sections/ghgemmissions/index.js b/domain/profiletabs/sections/ghgemmissions/index.js new file mode 100644 index 0000000..2371ece --- /dev/null +++ b/domain/profiletabs/sections/ghgemmissions/index.js @@ -0,0 +1,24 @@ +import Grid from '@mui/material/Grid' +import DonutChart from '@/components/common/ui/charts/donut' +import SubContentText from '@/components/common/layout/subtcontenttext' + +function GHGEmmissions ({ donutData, textData }) { + return ( + + {/** Greehouse Gas (GHG) Emmissions Section */} + + + + + + + + + ) +} + +export default GHGEmmissions diff --git a/domain/profiletabs/tabpanel/index.js b/domain/profiletabs/tabpanel/index.js new file mode 100644 index 0000000..1a5f653 --- /dev/null +++ b/domain/profiletabs/tabpanel/index.js @@ -0,0 +1,23 @@ +import Box from '@mui/material/Box' + +function TabPanel(props) { + const { children, value, index, ...other } = props + + return ( + + ) +} + +export default TabPanel diff --git a/pages/_document.js b/pages/_document.js index 17ed2ef..66b4c8f 100644 --- a/pages/_document.js +++ b/pages/_document.js @@ -16,6 +16,7 @@ export default class MyDocument extends Document { rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" /> + {/* Inject MUI styles first to match with the prepend: true configuration. */} {this.props.emotionStyleTags} diff --git a/pages/about/index.js b/pages/about/index.js index 17adab0..063d4fc 100644 --- a/pages/about/index.js +++ b/pages/about/index.js @@ -1,4 +1,4 @@ -import Typography from '@mui/material/Typography' +import Typography from '@mui/material/typography' import Section from '@/components/common/layout/section' import Navigation from '@/components/common/layout/navigation' diff --git a/pages/home/cafe.js b/pages/home/cafe.js index 883d268..2aac1af 100644 --- a/pages/home/cafe.js +++ b/pages/home/cafe.js @@ -1,5 +1,5 @@ import Image from 'next/image' -import Typography from '@mui/material/Typography' +import Typography from '@mui/material/typography' import Section from '@/components/common/layout/section' import Navigation from '@/components/common/layout/navigation' diff --git a/pages/home/index.js b/pages/home/index.js index 9c8b1d3..bef0808 100644 --- a/pages/home/index.js +++ b/pages/home/index.js @@ -1,5 +1,5 @@ import Image from 'next/image' -import Typography from '@mui/material/Typography' +import Typography from '@mui/material/typography' import Section from '@/components/common/layout/section' import Navigation from '@/components/common/layout/navigation' diff --git a/pages/profiletabs/index.js b/pages/profiletabs/index.js new file mode 100644 index 0000000..6a81074 --- /dev/null +++ b/pages/profiletabs/index.js @@ -0,0 +1,44 @@ +import { useEffect, useState } from 'react' +import { useRouter } from 'next/router' +import ProfileTabsComponent from '@/components/profiletabs' +import textData from '@/data/text_data' +import donutChartData from '@/data/donut_data' +import countries from '@/data/countries' +import { options, labels, data } from '@/data/bar_data' +import { capitalizeFirstLetter } from '@/utils/text' + +function ProfileTabs () { + const router = useRouter() + const [country, setCountry] = useState('') + + useEffect(() => { + if (router.isReady) { + const cntry = router.query.country + + if (cntry) { + setCountry(capitalizeFirstLetter(cntry)) + } else { + console.error('country is not defined') + } + + } + }, [router.isReady, router.query]) + + const handleSelectCountry = (e) => { + const { value } = e.target + setCountry(value) + } + + return ( + + ) +} + +export default ProfileTabs diff --git a/src/mui/theme.js b/src/mui/theme.js index fc37948..6a61096 100644 --- a/src/mui/theme.js +++ b/src/mui/theme.js @@ -5,13 +5,13 @@ import { red } from '@mui/material/colors' const theme = createTheme({ palette: { primary: { - main: '#43a047', - light: '#76d275', + main: '#355a6c', + light: '#91cfc2', dark: '#00701a' }, secondary: { - main: '#e6ee9c', + main: '#f9e247', light: '#ffffce', dark: '#b3bc6d' }, From f7bc606755bfaa874d650abf23731b0d8714a816 Mon Sep 17 00:00:00 2001 From: weaponsforge Date: Wed, 23 Nov 2022 07:21:45 +0800 Subject: [PATCH 2/2] feat: Add a country profile selector --- components/common/layout/articletext/index.js | 2 +- .../common/layout/subtcontenttext/index.js | 2 +- components/countries/index.js | 26 +++++++++++++++++ components/profile-centered/index.js | 2 +- components/profile/index.js | 2 +- components/profiletabs/index.js | 15 ++++++---- components/profiletabs/styles.js | 4 ++- domain/profile/countrybutton/index.js | 2 +- .../sections/climatechange/index.js | 2 +- .../sections/climaterisks/index.js | 2 +- pages/about/index.js | 2 +- pages/countries/index.js | 28 +++++++++++++++++++ pages/home/cafe.js | 2 +- pages/home/index.js | 2 +- src/mui/theme.js | 7 ++++- 15 files changed, 82 insertions(+), 18 deletions(-) create mode 100644 components/countries/index.js create mode 100644 pages/countries/index.js diff --git a/components/common/layout/articletext/index.js b/components/common/layout/articletext/index.js index ca41642..9c7312b 100644 --- a/components/common/layout/articletext/index.js +++ b/components/common/layout/articletext/index.js @@ -1,6 +1,6 @@ import PropTypes from 'prop-types' import Box from '@mui/material/Box' -import Typography from '@mui/material/typography' +import Typography from '@mui/material/Typography' import FullBox from '@/components/common/layout/fullbox' function ArticleText ({ diff --git a/components/common/layout/subtcontenttext/index.js b/components/common/layout/subtcontenttext/index.js index 2814961..c66aa95 100644 --- a/components/common/layout/subtcontenttext/index.js +++ b/components/common/layout/subtcontenttext/index.js @@ -1,6 +1,6 @@ import PropTypes from 'prop-types' import Box from '@mui/material/Box' -import Typography from '@mui/material/typography' +import Typography from '@mui/material/Typography' import FullBox from '@/components/common/layout/fullbox' import styles from './styles' diff --git a/components/countries/index.js b/components/countries/index.js new file mode 100644 index 0000000..cb8e655 --- /dev/null +++ b/components/countries/index.js @@ -0,0 +1,26 @@ +import Container from '@mui/material/Container' +import Typography from '@mui/material/Typography' +import CountryList from '@/domain/profile/countrylist' + +function CountriesComponent ({ + countries, + handleSelectCountry +}) { + return ( + + + Country Profile + + + Select a country to view its profile + + + + + ) +} + +export default CountriesComponent diff --git a/components/profile-centered/index.js b/components/profile-centered/index.js index bd3f1c7..5f06276 100644 --- a/components/profile-centered/index.js +++ b/components/profile-centered/index.js @@ -1,6 +1,6 @@ import Container from '@mui/material/Container' import Grid from '@mui/material/Grid' -import Typography from '@mui/material/typography' +import Typography from '@mui/material/Typography' import SubContentText from '@/components/common/layout/subtcontenttext' import DonutChart from '@/components/common/ui/charts/donut' import BarChart from '@/components/common/ui/charts/bar' diff --git a/components/profile/index.js b/components/profile/index.js index e3e03c5..7f8debf 100644 --- a/components/profile/index.js +++ b/components/profile/index.js @@ -1,5 +1,5 @@ import Grid from '@mui/material/Grid' -import Typography from '@mui/material/typography' +import Typography from '@mui/material/Typography' import SubContentText from '@/components/common/layout/subtcontenttext' import DonutChart from '@/components/common/ui/charts/donut' import BarChart from '@/components/common/ui/charts/bar' diff --git a/components/profiletabs/index.js b/components/profiletabs/index.js index 793c6a8..c513e96 100644 --- a/components/profiletabs/index.js +++ b/components/profiletabs/index.js @@ -1,9 +1,10 @@ import { useState } from 'react' +import Link from 'next/link' import Button from '@mui/material/Button' import Box from '@mui/material/Box' import Container from '@mui/material/Container' import Grid from '@mui/material/Grid' -import Typography from '@mui/material/typography' +import Typography from '@mui/material/Typography' import NavigationTabs from '@/domain/profiletabs/navigationtabs' import TabPanel from '@/domain/profiletabs/tabpanel' @@ -16,7 +17,7 @@ import ArticleText from '@/components/common/layout/articletext' import styles from './styles' function ProfileTabsComponent ({ - // country, + country, // countries, textData, donutData, @@ -33,16 +34,18 @@ function ProfileTabsComponent ({ - Pakistan + {country} Country Profile - + + + theme.palette.primary.light, '&:hover': { backgroundColor: '#fff' } + }, + '& a': { + textDecoration: 'none' } } } diff --git a/domain/profile/countrybutton/index.js b/domain/profile/countrybutton/index.js index 4ea2750..b8b1d13 100644 --- a/domain/profile/countrybutton/index.js +++ b/domain/profile/countrybutton/index.js @@ -2,7 +2,7 @@ import Button from '@mui/material/Button' import { styled } from '@mui/material/styles' const CountryButton = styled((props) => ( -