Extracts doc content into own component

src/components/misc/DocContent.tsx

@@ -0,0 +1,56 @@
+import styled from 'styled-components';
+import docs, { type Doc } from 'utils/docs';
+import colors from 'styles/colors';
+import Heading from 'components/Form/Heading';
+
+const JobDocsContainer = styled.div`
+p.doc-desc, p.doc-uses, ul {
+  margin: 0.25rem auto 1.5rem auto;
+}
+ul {
+  padding: 0 0.5rem 0 1rem;
+}
+ul li a {
+  color: ${colors.primary};
+}
+summary { color: ${colors.primary};}
+h4 {
+  border-top: 1px solid ${colors.primary};
+  color: ${colors.primary};
+  opacity: 0.75;
+  padding: 0.5rem 0;
+}
+`;
+
+const DocContent = (id: string) => {
+  const doc = docs.filter((doc: Doc) => doc.id === id)[0] || null;
+  return (
+    doc? (<JobDocsContainer>
+      <Heading as="h3" size="medium" color={colors.primary}>{doc.title}</Heading>
+      <Heading as="h4" size="small">About</Heading>
+      <p className="doc-desc">{doc.description}</p>
+      <Heading as="h4" size="small">Use Cases</Heading>
+      <p className="doc-uses">{doc.use}</p>
+      <Heading as="h4" size="small">Links</Heading>
+      <ul>
+        {doc.resources.map((resource: string | { title: string, link: string } , index: number) => (
+          typeof resource === 'string' ? (
+            <li id={`link-${index}`}><a target="_blank" rel="noreferrer" href={resource}>{resource}</a></li>
+          ) : (
+            <li id={`link-${index}`}><a target="_blank" rel="noreferrer" href={resource.link}>{resource.title}</a></li>
+          )
+        ))}
+      </ul>
+      <details>
+        <summary><Heading as="h4" size="small">Example</Heading></summary>
+        <img width="300" src={doc.screenshot} alt="Screenshot" />
+      </details>
+    </JobDocsContainer>)
+  : (
+    <JobDocsContainer>
+      <p>No Docs provided for this widget yet</p>
+    </JobDocsContainer>
+    ));
+};
+
+export default DocContent;