Merge pull request #17 from weaponsforge/dev

v1.0.3

components/common/layout/section/index.js

@@ -2,9 +2,11 @@ import PropTypes from 'prop-types'
 import Container from '@mui/material/Container'
 import AppCard from '@/components/common/ui/appcard'
 
-function Section ({ children }) {
+function Section ({ maxWidth, children }) {
+  const mWidth = maxWidth || 'md'
+
   return (
-    <Container maxWidth='md'>
+    <Container maxWidth={mWidth}>
       <AppCard>
         {children}
       </AppCard>
@@ -13,6 +15,7 @@ function Section ({ children }) {
 }
 
 Section.propTypes = {
+  props: PropTypes.object,
   children: PropTypes.node
 }
 

components/common/ui/appcard/index.js

@@ -3,6 +3,7 @@ import { styled } from '@mui/material/styles'
 
 const AppCard = styled(Card)(({ theme }) => ({
   width: '100%',
+  textAlign: 'center',
   padding: theme.spacing(2),
   borderRadius: theme.spacing(1),
   marginTop: theme.spacing(3),

components/profile-centered/index.js

@@ -0,0 +1,91 @@
+import Container from '@mui/material/Container'
+import Grid from '@mui/material/Grid'
+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'
+import LineGraph from '@/components/common/ui/charts/line'
+import ArticleText from '@/components/common/layout/articletext'
+import CountryList from '@/domain/profile/countrylist'
+import styles from './styles'
+
+function ProfileCenteredComponent ({
+  country,
+  countries,
+  textData,
+  donutData,
+  barData,
+  handleSelectCountry
+}) {
+  return (
+    <Container maxWidth='lg'>
+      <Grid container sx={styles.container}>
+        <Grid item xs={12} sx={{ marginBottom: '48px' }}>
+          <Typography variant="h3">
+            Climate Profile
+            {country !== '' && ` - ${country}`}
+          </Typography>
+
+          <CountryList
+            countries={countries}
+            handleSelectCountry={handleSelectCountry}
+          />
+        </Grid>
+
+        {/** Greehouse Gas (GHG) Emmissions Section */}
+        <Grid item xs={12} sm={5}>
+          <DonutChart {...donutData} />
+        </Grid>
+
+        <Grid item xs={12} sm={7}>
+          <SubContentText {...textData[0]} />
+        </Grid>
+
+        {/** Climate Risks Section */}
+        <Grid item xs={12}>
+          <Typography variant="h4">
+          Climate Change Scenarios
+          </Typography>
+        </Grid>
+
+        <Grid item xs={12} sm={7}>
+          <SubContentText
+            {...textData[0]}
+            title='Climate Risks'
+          />
+        </Grid>
+
+        <Grid item xs={12} sm={5}>
+          <BarChart
+            {...barData}
+          />
+        </Grid>
+
+        {/** Climate Change Scenarios Section  */}
+        <Grid item xs={12} sm={7}>
+          <SubContentText
+            {...textData[0]}
+            title='Climate Change and Vulnerability'
+          />
+        </Grid>
+
+        <Grid item xs={12} sm={5}>
+          <LineGraph
+            {...barData}
+          />
+        </Grid>
+
+        {/** Other Lengthy Text Section */}
+        {textData.map((item, index) => {
+          if (index >= 1) {
+            return <Grid item xs={12} key={index}>
+              <ArticleText {...item} />
+            </Grid>
+          }
+        })}
+      </Grid>
+    </Container>
+  )
+}
+
+export default ProfileCenteredComponent

components/profile-centered/styles.js

@@ -0,0 +1,12 @@
+const styles = {
+  container: {
+    '& h3, h4': {
+      textAlign: 'center',
+      marginBottom: '32px'
+    },
+    marginTop: '40px'
+  }
+}
+
+export default styles
+

domain/profile/countrylist/index.js

@@ -6,7 +6,7 @@ function CountryList ({
   handleSelectCountry
 }) {
   return (
-    <Section maxWidth='lg'>
+    <Section>
       {countries.map((country, index) => (
         <CountryButton
           variant='text'

pages/profile-centered/index.js

@@ -0,0 +1,44 @@
+import { useEffect, useState } from 'react'
+import { useRouter } from 'next/router'
+import ProfileCenteredComponent from '@/components/profile-centered'
+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 ProfileCentered () {
+  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 (
+    <ProfileCenteredComponent
+      country={country}
+      countries={countries}
+      textData={textData}
+      donutData={donutChartData}
+      barData={{ options, labels, data }}
+      handleSelectCountry={handleSelectCountry}
+    />
+  )
+}
+
+export default ProfileCentered