feat(client): add project links to certificate (#40071)

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

client/src/components/SolutionViewer/SolutionViewer.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Panel } from '@freecodecamp/react-bootstrap';
+import Prism from 'prismjs';
+
+const prismLang = {
+  css: 'css',
+  js: 'javascript',
+  jsx: 'javascript',
+  html: 'markup'
+};
+
+const SolutionViewer = ({
+  files,
+  solution = '// The solution is not available for this project'
+}) =>
+  files && Array.isArray(files) && files.length ? (
+    files.map(file => (
+      <Panel bsStyle='primary' className='solution-viewer' key={file.ext}>
+        <Panel.Heading>{file.ext.toUpperCase()}</Panel.Heading>
+        <Panel.Body>
+          <pre>
+            <code
+              className={`language-${prismLang[file.ext]}`}
+              dangerouslySetInnerHTML={{
+                __html: Prism.highlight(
+                  file.contents.trim(),
+                  Prism.languages[prismLang[file.ext]]
+                )
+              }}
+            />
+          </pre>
+        </Panel.Body>
+      </Panel>
+    ))
+  ) : (
+    <Panel
+      bsStyle='primary'
+      className='solution-viewer'
+      key={solution.slice(0, 10)}
+    >
+      <Panel.Heading>JS</Panel.Heading>
+      <Panel.Body>
+        <pre>
+          <code
+            className='language-markup'
+            dangerouslySetInnerHTML={{
+              __html: Prism.highlight(
+                solution.trim(),
+                Prism.languages.js,
+                'javascript'
+              )
+            }}
+          />
+        </pre>
+      </Panel.Body>
+    </Panel>
+  );
+
+SolutionViewer.displayName = 'SolutionViewer';
+SolutionViewer.propTypes = {
+  files: PropTypes.arrayOf(PropTypes.objectOf(PropTypes.string)),
+  solution: PropTypes.string
+};
+
+export default SolutionViewer;