Merge pull request #11 from weaponsforge/dev

v1.0.1

Author: weaponsforge

README.md

@@ -12,16 +12,20 @@ Testing display of all related content based on a URL query string.
 1. NextJS v13.0.4
 2. React 18.2.0
 
+### Online Demo
+
+https://weaponsforge.github.io/climate-profile-full/
+
 ## Installation
 
 1. Install dependencies.<br>
 `npm install`
 
 2. Set up the environment variables. Create a `.env`, `.env.local` and a `.env.development` files inside the root project directory with reference to the `.env.example` file.<br>
 
-   | Variable Name         | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
-   | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-   | NEXT_PUBLIC_BASE_PATH | Root directory path name that NextJS uses for assets, media and client-side routing for the app.<br><br>Set its value to blank `''` when working on development mode in localhost.<br>Set its value to the sub-directory name where the exported NextJS app is to be deployed, i.e. `/<YOUR_REPOSITORY_NAME>` when deploying on a repository (sub-directory) of a root GitHub Pages site, i.e, on `https://<YOUR_GITHUB_USERNAME>.github.io/<YOUR_REPOSITORY_NAME>` |
+   | Variable Name         | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+   | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+   | NEXT_PUBLIC_BASE_PATH | Root directory path name that NextJS uses for assets, media and client-side routing for the app.<br><br>Set its value to blank `''` when working on development mode in localhost.<br><br>Set its value to the sub-directory name where the exported NextJS app is to be deployed, i.e. `/<YOUR_REPOSITORY_NAME>` when<br> deploying on a repository (sub-directory) of a root GitHub Pages site, i.e, on `https://<YOUR_GITHUB_USERNAME>.github.io/<YOUR_REPOSITORY_NAME>` |
 
 ## Usage
 

components/layout/section/index.js

@@ -1,11 +1,14 @@
 import PropTypes from 'prop-types'
-import styles from '@/styles/Section.module.css'
+import Container from '@mui/material/Container'
+import AppCard from '@/components/ui/appcard'
 
 function Section ({ children }) {
   return (
-    <div className={styles.containersection}>
-      {children}
-    </div>
+    <Container maxWidth='md'>
+      <AppCard>
+        {children}
+      </AppCard>
+    </Container>
   )
 }
 

components/ui/appcard/index.js

@@ -0,0 +1,16 @@
+import Card from '@mui/material/Card'
+import { styled } from '@mui/material/styles'
+
+const AppCard = styled(Card)(({ theme }) => ({
+  width: '100%',
+  padding: theme.spacing(2),
+  borderRadius: theme.spacing(1),
+  marginTop: theme.spacing(3),
+  boxShadow: `
+    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 AppCard