feat: Add a country profile selector

Author: weaponsforge

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 ({

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'
 

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 (
+    <Container maxWidth='lg' sx={{ margin: 'auto', textAlign: 'center' }}>
+      <Typography variant='h3'>
+        Country Profile
+      </Typography>
+      <Typography variant='h5' sx={{ marginBottom: '48px' }}>
+        Select a country to view its profile
+      </Typography>
+
+      <CountryList
+        countries={countries}
+        handleSelectCountry={handleSelectCountry}
+      />
+    </Container>
+  )
+}
+
+export default CountriesComponent

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'

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'

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 ({
           <Box sx={styles.headerTitle}>
             <Box>
               <Typography variant='h1'>
-                Pakistan
+                {country}
               </Typography>
               <Typography variant='h4'>
                 Country Profile
               </Typography>
             </Box>
 
-            <Button variant='outlined'>
-              Countries
-            </Button>
+            <Link href='/countries' passHref>
+              <Button variant='outlined'>
+                Countries
+              </Button>
+            </Link>
           </Box>
 
           <NavigationTabs

components/profiletabs/styles.js

@@ -23,13 +23,15 @@ const styles = {
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
-
     '& button': {
       height: '50px',
       backgroundColor: theme => theme.palette.primary.light,
       '&:hover': {
         backgroundColor: '#fff'
       }
+    },
+    '& a': {
+      textDecoration: 'none'
     }
   }
 }

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) => (
-  <Button {...props} />
+  <Button {...props} color='tertiary' />
   /* eslint-disable no-unused-vars */
 ))(({ theme }) => ({
   width: '150px'

domain/profiletabs/sections/climatechange/index.js

@@ -1,6 +1,6 @@
 import Grid from '@mui/material/Grid'
 import LineGraph from '@/components/common/ui/charts/line'
-import Typography from '@mui/material/typography'
+import Typography from '@mui/material/Typography'
 import SubContentText from '@/components/common/layout/subtcontenttext'
 
 function ClimateChange ({ barData, textData }) {

domain/profiletabs/sections/climaterisks/index.js

@@ -1,6 +1,6 @@
 import Grid from '@mui/material/Grid'
 import BarChart from '@/components/common/ui/charts/bar'
-import Typography from '@mui/material/typography'
+import Typography from '@mui/material/Typography'
 import SubContentText from '@/components/common/layout/subtcontenttext'
 
 function ClimateRisks ({ barData, textData }) {