diff --git a/components/pdf-upload/defaultUpload.jsx b/components/pdf-upload/defaultUpload.jsx index 3e1d6151..1264914a 100644 --- a/components/pdf-upload/defaultUpload.jsx +++ b/components/pdf-upload/defaultUpload.jsx @@ -1,6 +1,7 @@ import React from 'react' import { Button } from '@oacore/design' import { ProgressSpinner } from '@oacore/design/lib/elements' +import { useRouter } from 'next/router' import text from '../../data/retention.yml' import uploadSvg from '../../public/images/logos/upload.svg' @@ -12,50 +13,57 @@ const DefaultUploadView = ({ handleFileChange, rrsPdfLoading, fileName, -}) => ( -
-

{text.upload.default.title}

- {rrsPdfLoading ? ( -
-
- +}) => { + const router = useRouter() + const defaultText = router.pathname.includes('sdg') + ? text.upload.sdgDefault + : text.upload.default + + return ( +
+

{defaultText.title}

+ {rrsPdfLoading ? ( +
+
+ +
+
{fileName}
-
{fileName}
-
- ) : ( - /* eslint-disable-next-line max-len */ - /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */ -
- Upload Icon -

{text.upload.default.subTitle}

- -

- OR -

- + ) : ( + /* eslint-disable-next-line max-len */ + /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */ +
+ Upload Icon +

{text.upload.default.subTitle}

+ +

- OR -

+ +
+ )} +
+ {text.upload.subInfo.format} + {text.upload.subInfo.size}
- )} -
- {text.upload.subInfo.format} - {text.upload.subInfo.size}
-
-) + ) +} export default DefaultUploadView diff --git a/components/pdf-upload/formatUpload.jsx b/components/pdf-upload/formatUpload.jsx index 8d11ac0b..2accff98 100644 --- a/components/pdf-upload/formatUpload.jsx +++ b/components/pdf-upload/formatUpload.jsx @@ -1,6 +1,7 @@ import React from 'react' import { Button } from '@oacore/design' import { ProgressSpinner } from '@oacore/design/lib/elements' +import { useRouter } from 'next/router' import text from '../../data/retention.yml' import styles from './styles.module.scss' @@ -11,51 +12,60 @@ const FormatUploadIssue = ({ uploadRef, rrsPdfLoading, fileName, -}) => ( -
-
- {!rrsPdfLoading ? ( - <> - issueSvg -

{text.upload.noSupport.title}

- +}) => { + const router = useRouter() + const defaultText = router.pathname.includes('sdg') + ? text.upload.sdgDefault + : text.upload.default + + return ( +
+
+ {!rrsPdfLoading ? ( + <> + issueSvg +

+ {text.upload.noSupport.title} +

+ + ) : ( +

{defaultText.title}

+ )} +
+ {rrsPdfLoading ? ( +
+
+ +
+
{fileName}
+
) : ( -

{text.upload.default.title}

- )} -
- {rrsPdfLoading ? ( -
-
- +
+ + {text.upload.subInfo.format} + +
-
{fileName}
-
- ) : ( -
- - {text.upload.subInfo.format} - - + )} +
+
- )} -
-
-
-) + ) +} export default FormatUploadIssue diff --git a/components/pdf-upload/index.jsx b/components/pdf-upload/index.jsx index e7be632c..08b9d564 100644 --- a/components/pdf-upload/index.jsx +++ b/components/pdf-upload/index.jsx @@ -1,4 +1,5 @@ import React, { useState, useRef, useEffect } from 'react' +import { useRouter } from 'next/router' import DefaultUploadView from './defaultUpload' import FormatUploadIssue from './formatUpload' @@ -6,12 +7,18 @@ import SizeUploadIssue from './sizeUploadIssue' import styles from './styles.module.scss' import UploadSuccess from './uploadSuccess' import UploadFail from './uploadFail' +import SdgUploadSuccess from './sdgUploadSuccess' -const RrsCheckCard = ({ uploadPdf, uploadResults, rrsPdfLoading }) => { +const RrsCheckCard = ({ + uploadPdf, + uploadResults, + rrsPdfLoading, + sdgTypes, +}) => { const uploadRef = useRef(null) const [fileName, setFileName] = useState('') - const [currentView, setCurrentView] = useState('default') + const router = useRouter() const handleClick = () => { uploadRef.current.click() @@ -22,16 +29,21 @@ const RrsCheckCard = ({ uploadPdf, uploadResults, rrsPdfLoading }) => { } useEffect(() => { + const results = Array.isArray(uploadResults) ? uploadResults : [] + if (results.some((result) => result.predictions)) setCurrentView('success') if (uploadResults.rightsRetentionSentence) setCurrentView('success') if ( !uploadResults.rightsRetentionSentence && uploadResults.confidence === 0 ) setCurrentView('fail') + if (results.some((result) => result.predictions === null)) + setCurrentView('fail') }, [uploadResults]) const handleFileChange = (event) => { event.preventDefault() + event.stopPropagation() if (rrsPdfLoading) return let file @@ -40,7 +52,7 @@ const RrsCheckCard = ({ uploadPdf, uploadResults, rrsPdfLoading }) => { if (files && files.length) { // eslint-disable-next-line prefer-destructuring file = files[0] - uploadPdf(file, 1) + uploadPdf(file) setFileName(file.name) if (file.size > 10 * 1024 * 1024) { setCurrentView('sizeIssue') @@ -54,12 +66,9 @@ const RrsCheckCard = ({ uploadPdf, uploadResults, rrsPdfLoading }) => { fileType === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' ) - ) { + ) setCurrentView('formatIssue') - return - } } - event.stopPropagation() } return ( @@ -96,21 +105,34 @@ const RrsCheckCard = ({ uploadPdf, uploadResults, rrsPdfLoading }) => { /> )} {currentView === 'success' && ( - + <> + {router.pathname.includes('sdg') ? ( + + ) : ( + + )} + )} {currentView === 'fail' && ( diff --git a/components/pdf-upload/sdgUploadSuccess.jsx b/components/pdf-upload/sdgUploadSuccess.jsx new file mode 100644 index 00000000..23da91bf --- /dev/null +++ b/components/pdf-upload/sdgUploadSuccess.jsx @@ -0,0 +1,85 @@ +import React from 'react' +import { Button } from '@oacore/design' +import { ProgressSpinner } from '@oacore/design/lib/elements' + +import text from '../../data/retention.yml' +import styles from './styles.module.scss' + +const SdgUploadSuccess = ({ + handleClick, + handleFileChange, + uploadRef, + uploadResults, + rrsPdfLoading, + fileName, + sdgTypes, +}) => ( +
+ {!rrsPdfLoading ? ( + <> +
+
+ issueSvg +

+ {text.upload.sdgSuccess.title} +

+
+
+ + ) : ( +

{text.upload.sdgDefault.title}

+ )} + {rrsPdfLoading ? ( +
+
+ +
+
{fileName}
+
+ ) : ( +
+
+ {text.upload.sdgSuccess.description} +
+ {uploadResults.map((item) => { + const sdgType = sdgTypes.find( + (type) => type.id === item.predictions + ) + return ( +
+
+ {sdgType.title} +
+
+ {item.confidence_score} +
+
(confidence)
+
+ ) + })} +
+
+ +
+ )} +
+ +
+
+) + +export default SdgUploadSuccess diff --git a/components/pdf-upload/sizeUploadIssue.jsx b/components/pdf-upload/sizeUploadIssue.jsx index dc53cad5..a320bf28 100644 --- a/components/pdf-upload/sizeUploadIssue.jsx +++ b/components/pdf-upload/sizeUploadIssue.jsx @@ -1,6 +1,7 @@ import React from 'react' import { Button } from '@oacore/design' import { ProgressSpinner } from '@oacore/design/lib/elements' +import { useRouter } from 'next/router' import text from '../../data/retention.yml' import styles from './styles.module.scss' @@ -11,53 +12,59 @@ const SizeUploadIssue = ({ uploadRef, rrsPdfLoading, fileName, -}) => ( -
-
- {!rrsPdfLoading ? ( - <> - issueSvg -

- {text.upload.noSupport.sizeTitle} -

- +}) => { + const router = useRouter() + const defaultText = router.pathname.includes('sdg') + ? text.upload.sdgDefault + : text.upload.default + return ( +
+
+ {!rrsPdfLoading ? ( + <> + issueSvg +

+ {text.upload.noSupport.sizeTitle} +

+ + ) : ( +

{defaultText.title}

+ )} +
+ {rrsPdfLoading ? ( +
+
+ +
+
{fileName}
+
) : ( -

{text.upload.default.title}

- )} -
- {rrsPdfLoading ? ( -
-
- +
+ + {text.upload.subInfo.size} + +
-
{fileName}
-
- ) : ( -
- - {text.upload.subInfo.size} - - + )} +
+
- )} -
-
-
-) + ) +} export default SizeUploadIssue diff --git a/components/pdf-upload/styles.module.scss b/components/pdf-upload/styles.module.scss index cd928a2c..b9617fe2 100644 --- a/components/pdf-upload/styles.module.scss +++ b/components/pdf-upload/styles.module.scss @@ -86,7 +86,7 @@ } .inner-issue-wrapper { background: #f5f5f5; - height: 162px; + height: 185px; padding: 16px; margin: 8px 0; .inner-issue-title { @@ -128,3 +128,45 @@ } } } + +.sdg-wrapper { + display: flex; + gap: 14px; + flex-direction: column; + .inner-sdg-wrapper { + display: flex; + gap: 16px; + } + .sdg-item { + display: flex; + align-items: center; + flex-direction: column; + .score-text { + color: #212121; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 16px; + letter-spacing: 0.024px; + } + .sub-text { + color: #212121; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 16px; + letter-spacing: 0.018px; + margin-top: 4px; + } + } +} + +.img-wrapper { + width: 74px; + height: 74px; + margin-bottom: 10px; + img { + width: 100%; + height: 100%; + } +} diff --git a/components/pdf-upload/uploadFail.jsx b/components/pdf-upload/uploadFail.jsx index d532eca8..b155dc7c 100644 --- a/components/pdf-upload/uploadFail.jsx +++ b/components/pdf-upload/uploadFail.jsx @@ -1,6 +1,7 @@ import React from 'react' import { Button } from '@oacore/design' import { ProgressSpinner } from '@oacore/design/lib/elements' +import { useRouter } from 'next/router' import text from '../../data/retention.yml' import styles from './styles.module.scss' @@ -11,53 +12,65 @@ const UploadFail = ({ uploadRef, rrsPdfLoading, fileName, -}) => ( -
-
-
- {!rrsPdfLoading ? ( - <> - issueSvg -

{text.upload.fail.title}

- - ) : ( -

{text.upload.default.title}

- )} -
-
- {rrsPdfLoading ? ( -
-
- +}) => { + const router = useRouter() + + const uploadText = router.pathname.includes('sdg') + ? text.upload.sdgFail + : text.upload.fail + + const defaultText = router.pathname.includes('sdg') + ? text.upload.sdgDefault + : text.upload.default + + return ( +
+
+
+ {!rrsPdfLoading ? ( + <> + issueSvg +

{uploadText.title}

+ + ) : ( +

{defaultText.title}

+ )}
-
{fileName}
- ) : ( -
- - {text.upload.fail.description} - - + {rrsPdfLoading ? ( +
+
+ +
+
{fileName}
+
+ ) : ( +
+ + {uploadText.description} + + +
+ )} +
+
- )} -
-
-
-) + ) +} export default UploadFail diff --git a/data/retention.yml b/data/retention.yml index 7be70e49..b410a6f2 100644 --- a/data/retention.yml +++ b/data/retention.yml @@ -33,6 +33,23 @@ upload: Maximum size: 10MB + sdgSuccess: + title: SDG labels found + description: "Found SDG labels:" + image: /images/success.svg + action: + title: Upload new file + sdgFail: + title: SDG labels not found + description: SDG labels not found in this paper. + image: /images/fail.svg + action: + title: Upload new file + sdgDefault: + title: Identify SDG in your paper + subTitle: Drag and drop your file here + action: + title: Browse files purpose: title: Why it’s important image: /images/services/work.svg diff --git a/data/sdg.yml b/data/sdg.yml new file mode 100644 index 00000000..f84a819e --- /dev/null +++ b/data/sdg.yml @@ -0,0 +1,43 @@ +header: + title: Classification of research papers according to United Nations Sustainable Development Goals + image: /images/services/goals.svg + description: The Sustainable Development Goals or Global Goals are a collection of 17 interlinked global goals designed to be a "blueprint to achieve a better and more sustainable future for all". The SDGs were set up in 2015 by the United Nations General Assembly and are intended to be achieved by 2030. + subTitle: CORE labs + +upload: + default: + title: Identify SDG in your paper + subTitle: Drag and drop your file here + action: + title: Browse files + success: + title: SDG labels found + description: "Found SDG labels:" + image: /images/success.svg + action: + title: Upload new file + fail: + title: SDG labels not found + description: SDG labels not found in this paper. + image: /images/fail.svg + action: + title: Upload new file + noSupport: + title: This format is not supported + sizeTitle: File is too big + image: /images/fail.svg + action: Upload new file + subInfo: + format: | + Supported formats: pdf, doc + size: | + Maximum size: 10MB + + +purpose: + title: How it work + image: /images/services/openUniversity.svg + description: | + The new CORE SDG Dashboard module allows institutions to gain rapid insights into the current mapping of their research outputs to the 17 UN SDG goals, significantly reducing the manual effort required to map research outputs to global sustainability objectives. + + On the video below you can see how SDG insights tab in the CORE dashboard works (using the example of Open Research Online Repository (Open University). diff --git a/env.config.js b/env.config.js index eeaea989..ba39ddbc 100644 --- a/env.config.js +++ b/env.config.js @@ -5,7 +5,7 @@ const local = { } const development = { - API_URL: 'https://api-dev.core.ac.uk/internal', + API_URL: 'https://api.core.ac.uk/internal', } const production = { diff --git a/pages/labs/sdg.jsx b/pages/labs/sdg.jsx new file mode 100644 index 00000000..4cfd8ee0 --- /dev/null +++ b/pages/labs/sdg.jsx @@ -0,0 +1,13 @@ +import React from 'react' + +import textData from '../../data/sdg.yml' +import { Page } from '../../components' +import SdgPageTemplate from '../../templates/sdg' + +const SdgPage = () => ( + + + +) + +export default SdgPage diff --git a/public/images/icons/allSdg.svg b/public/images/icons/allSdg.svg new file mode 100644 index 00000000..eea128fe --- /dev/null +++ b/public/images/icons/allSdg.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/icons/belowWater.svg b/public/images/icons/belowWater.svg new file mode 100644 index 00000000..a1d7fc7d --- /dev/null +++ b/public/images/icons/belowWater.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/icons/climate.svg b/public/images/icons/climate.svg new file mode 100644 index 00000000..d31a7443 --- /dev/null +++ b/public/images/icons/climate.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/icons/communities.svg b/public/images/icons/communities.svg new file mode 100644 index 00000000..09f24aa2 --- /dev/null +++ b/public/images/icons/communities.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/icons/economic.svg b/public/images/icons/economic.svg new file mode 100644 index 00000000..6d92793a --- /dev/null +++ b/public/images/icons/economic.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/icons/education.svg b/public/images/icons/education.svg new file mode 100644 index 00000000..fa007d3a --- /dev/null +++ b/public/images/icons/education.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/icons/energy.svg b/public/images/icons/energy.svg new file mode 100644 index 00000000..19fb1179 --- /dev/null +++ b/public/images/icons/energy.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/icons/genderEquality.svg b/public/images/icons/genderEquality.svg new file mode 100644 index 00000000..9e324b34 --- /dev/null +++ b/public/images/icons/genderEquality.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/icons/goal.svg b/public/images/icons/goal.svg new file mode 100644 index 00000000..816e9034 --- /dev/null +++ b/public/images/icons/goal.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/icons/health.svg b/public/images/icons/health.svg new file mode 100644 index 00000000..dfd32516 --- /dev/null +++ b/public/images/icons/health.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/icons/hunger.svg b/public/images/icons/hunger.svg new file mode 100644 index 00000000..3debd8d3 --- /dev/null +++ b/public/images/icons/hunger.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/icons/inequalitie.svg b/public/images/icons/inequalitie.svg new file mode 100644 index 00000000..197adf5c --- /dev/null +++ b/public/images/icons/inequalitie.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/icons/infrastructure.svg b/public/images/icons/infrastructure.svg new file mode 100644 index 00000000..8f7ce285 --- /dev/null +++ b/public/images/icons/infrastructure.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/icons/land.svg b/public/images/icons/land.svg new file mode 100644 index 00000000..74f014cb --- /dev/null +++ b/public/images/icons/land.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/icons/peace.svg b/public/images/icons/peace.svg new file mode 100644 index 00000000..1a0b3e9b --- /dev/null +++ b/public/images/icons/peace.svg @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/icons/poverty.svg b/public/images/icons/poverty.svg new file mode 100644 index 00000000..4c470cc6 --- /dev/null +++ b/public/images/icons/poverty.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/icons/production.svg b/public/images/icons/production.svg new file mode 100644 index 00000000..661cf3a8 --- /dev/null +++ b/public/images/icons/production.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/icons/water.svg b/public/images/icons/water.svg new file mode 100644 index 00000000..3664b501 --- /dev/null +++ b/public/images/icons/water.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/services/goals.svg b/public/images/services/goals.svg new file mode 100644 index 00000000..2aebbefb --- /dev/null +++ b/public/images/services/goals.svg @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/services/openUniversity.svg b/public/images/services/openUniversity.svg new file mode 100644 index 00000000..451a09d3 --- /dev/null +++ b/public/images/services/openUniversity.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/templates/rights-retention/index.jsx b/templates/rights-retention/index.jsx index 5a43ae4e..5c306a1a 100644 --- a/templates/rights-retention/index.jsx +++ b/templates/rights-retention/index.jsx @@ -9,7 +9,7 @@ import FileUpload from '../../components/pdf-upload' const RightsRetentionPageTemplate = ({ data }) => { const [uloadResult, setUploadResult] = useState('') const [rrsPdfLoading, setRrsPdfLoading] = useState(false) - const uploadPdf = async (file, dataProviderId) => { + const uploadPdf = async (file) => { setRrsPdfLoading(true) try { const url = new URL( @@ -18,7 +18,6 @@ const RightsRetentionPageTemplate = ({ data }) => { ) const fd = new FormData() fd.set('file', file) - fd.set('dataProviderId', dataProviderId) const response = await fetch(url, { method: 'POST', diff --git a/templates/sdg/index.jsx b/templates/sdg/index.jsx new file mode 100644 index 00000000..b11a79fc --- /dev/null +++ b/templates/sdg/index.jsx @@ -0,0 +1,202 @@ +import React, { useState } from 'react' + +import { Layout, Section } from '../../design-v2/components' +import styles from './styles.module.scss' +import { Markdown, Video } from '../../components' +import FileUpload from '../../components/pdf-upload' +import all from '../../public/images/icons/allSdg.svg' +import poverty from '../../public/images/icons/poverty.svg' +import hunger from '../../public/images/icons/hunger.svg' +import health from '../../public/images/icons/health.svg' +import education from '../../public/images/icons/education.svg' +import water from '../../public/images/icons/water.svg' +import energy from '../../public/images/icons/energy.svg' +import economy from '../../public/images/icons/economic.svg' +import infrastructure from '../../public/images/icons/infrastructure.svg' +import inequality from '../../public/images/icons/inequalitie.svg' +import communities from '../../public/images/icons/communities.svg' +import climate from '../../public/images/icons/climate.svg' +import underWater from '../../public/images/icons/belowWater.svg' +import peace from '../../public/images/icons/peace.svg' +import goal from '../../public/images/icons/goal.svg' +import equal from '../../public/images/icons/genderEquality.svg' +import land from '../../public/images/icons/land.svg' +import production from '../../public/images/icons/production.svg' + +const sdgTypes = [ + { + id: 'all', + title: 'All', + icon: all, + color: '#B75400', + }, + { + id: 'SDG01', + title: 'No Poverty', + icon: poverty, + color: '#E5243B', + }, + { + id: 'SDG02', + title: 'Zero Hunger', + icon: hunger, + color: '#DDA63A', + }, + { + id: 'SDG03', + title: 'Good Health and Well-being', + icon: health, + color: '#4C9F38', + }, + { + id: 'SDG04', + title: 'Quality Education', + icon: education, + color: '#C5192D', + }, + { + id: 'SDG05', + title: 'Gender Equality', + icon: equal, + color: '#FF3A21', + }, + { + id: 'SDG06', + title: 'Clean Water and Sanitation', + icon: water, + color: '#26BDE2', + }, + { + id: 'SDG07', + title: 'Affordable and Clean Energy', + icon: energy, + color: '#FCC30B', + }, + { + id: 'SDG08', + title: 'Decent Work and Economic Growth', + icon: economy, + color: '#A21942', + }, + { + id: 'SDG09', + title: 'Industry, Innovation and Infrastructure', + icon: infrastructure, + color: '#FD6925', + }, + { + id: 'SDG10', + title: 'Reduced Inequality', + icon: inequality, + color: '#DD1367', + }, + { + id: 'SDG11', + title: 'Sustainable Cities and Communities', + icon: communities, + color: '#FD9D24', + }, + { + id: 'SDG12', + title: 'Responsible Consumption and Production', + icon: production, + color: '#BF8B2E', + }, + { + id: 'SDG13', + title: 'Climate Action', + icon: climate, + color: '#3F7E44', + }, + { + id: 'SDG14', + title: 'Life Below Water', + icon: underWater, + color: '#0A97D9', + }, + { + id: 'SDG15', + title: 'Life on Land', + icon: land, + color: '#56C02B', + }, + { + id: 'SDG16', + title: 'Peace, Justice and Strong Institutions', + icon: peace, + color: '#00689D', + }, + { + id: 'SDG17', + title: 'Partnerships for the Goals', + icon: goal, + color: '#19486A', + }, +] + +const SdgPageTemplate = ({ data }) => { + const [uloadResult, setUploadResult] = useState('') + const [rrsPdfLoading, setRrsPdfLoading] = useState(false) + const uploadPdf = async (file) => { + setRrsPdfLoading(true) + try { + const url = new URL('/internal/sdg-upload-file', process.env.API_URL) + const fd = new FormData() + fd.set('file', file) + + const response = await fetch(url, { + method: 'POST', + credentials: 'same-origin', + body: fd, + }) + + if (!response.ok) throw new Error('Network response was not ok') + + const result = await response.json() + setUploadResult(result) + } catch (error) { + console.error(error) + } finally { + setRrsPdfLoading(false) + } + } + + return ( + + + +
+
+ {data.howItWorks?.title} +
+
+

{data.purpose?.title}

+ {data.purpose?.description} +
+
+ + ) +} + +export default SdgPageTemplate diff --git a/templates/sdg/styles.module.scss b/templates/sdg/styles.module.scss new file mode 100644 index 00000000..efd3983d --- /dev/null +++ b/templates/sdg/styles.module.scss @@ -0,0 +1,58 @@ +$grid-responsive-for-sections: repeat(auto-fit, minmax(300px, 1fr)); + +.header { + display: flex; + justify-content: space-between; + gap: 20px; + .card-wrapper { + width: 70%; + } + .img-wrapper { + width: 400px; + img { + width: 100%; + height: 100%; + } + } + .description { + max-width: 70ch; + font-size: 1.3rem; + color: var(--gray-700); + margin-bottom: 3rem; + } + .title { + position: relative; + max-width: 25ch; + margin-top: 9px; + } + @media (max-width: 992px) { + flex-wrap: wrap-reverse; + justify-content: center; + } +} + +.demo { + border-radius: 2px; + background: #8bc34a; + padding: 3px 7px; + color: #fff; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 24px; + letter-spacing: 0.026px; +} + +.how-it-works { + display: grid; + grid-template-columns: $grid-responsive-for-sections; + align-items: center; + + .content { + .button { + float: right; + margin-top: 2rem; + margin-right: 10px; + } + } +}