Refactor breadcrumb and add template for resources

frontend/public/index.html

@@ -40,6 +40,7 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
 		-->
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.7/holder.js"></script>
     <script>
 			/* functions to set user settings in console*/
 			function setInterfaceSize(size) {

frontend/src/components/atoms/MyBreadcrumbs/index.tsx

+import React from "react";
+import Breadcrumb from "react-bootstrap/Breadcrumb";
+
+import styles from "./style.module.scss";
+import withBreadcrumbs from "react-router-breadcrumbs-hoc";
+import { Link } from "react-router-dom";
+
+// delete [{ path: "/", breadcrumb: "" }] to enable Home in front of breadcrumbs
+const MyBreadcrumbs = withBreadcrumbs([{ path: "/", breadcrumb: "" }])(
+  ({ breadcrumbs }: { breadcrumbs: any }) => (
+    <Breadcrumb className={styles.breadcrumb}>
+      {breadcrumbs.map(
+        ({ match, breadcrumb }: { match: any; breadcrumb: any }) => (
+          <Breadcrumb.Item
+						key={match.url}
+            className={styles.breadcrumbItem}
+            linkAs={Link}
+            linkProps={{ to: match.url }}
+          >
+            {breadcrumb}
+          </Breadcrumb.Item>
+        )
+      )}
+    </Breadcrumb>
+  )
+);
+
+export default MyBreadcrumbs;

frontend/src/components/molecules/Dandruff/index.tsx

 import React from "react";
-import Breadcrumb from "react-bootstrap/Breadcrumb";
-
-import styles from "./style.module.scss";
-import classNames from "classnames";
-import withBreadcrumbs from "react-router-breadcrumbs-hoc";
-import { Link } from "react-router-dom";
-
-// delete [{ path: "/", breadcrumb: "" }] to enable Home in front of breadcrumbs
-const MyBreadcrumbs = withBreadcrumbs([{ path: "/", breadcrumb: "" }])(
-  ({ breadcrumbs }: { breadcrumbs: any }) => (
-    <Breadcrumb className={styles.breadcrumb}>
-      {breadcrumbs.map(
-        ({ match, breadcrumb }: { match: any; breadcrumb: any }) => (
-          <Breadcrumb.Item
-						key={match.url}
-            className={styles.breadcrumbItem}
-            linkAs={Link}
-            linkProps={{ to: match.url }}
-          >
-            {breadcrumb}
-          </Breadcrumb.Item>
-        )
-      )}
-    </Breadcrumb>
-  )
-);
+import MyBreadcrumbs from "components/atoms/MyBreadcrumbs";
 
 export interface DandruffProps {
   heading: string;
@@ -36,14 +11,12 @@ export enum eventTypes {
   Deadline = "Deadline",
 }
 
-const Dandruff: React.FC<DandruffProps> = ({
-  heading,
-}: DandruffProps) => {
+const Dandruff: React.FC<DandruffProps> = ({ heading }: DandruffProps) => {
   return (
     <>
       <MyBreadcrumbs />
 
-      <h3 className={classNames(styles.moduleHeader)}>{heading}</h3>
+      <h3>{heading}</h3>
       <hr />
     </>
   );

frontend/src/components/pages/ModuleResources/index.tsx

-import React from "react";
+import React, { useEffect } from "react";
 import styles from "./style.module.scss";
 import Container from "react-bootstrap/Container";
 
 import classNames from "classnames";
-import Dandruff from "components/molecules/Dandruff";
+import MyBreadcrumbs from "components/atoms/MyBreadcrumbs";
+
+import InputGroup from "react-bootstrap/InputGroup";
+import FormControl from "react-bootstrap/FormControl";
+import Card from "react-bootstrap/Card";
+import Row from "react-bootstrap/esm/Row";
+import Col from "react-bootstrap/esm/Col";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faSearch } from "@fortawesome/free-solid-svg-icons";
 
 const ModuleResources: React.FC = () => {
+  useEffect(() => {
+    //@ts-ignore
+    window.Holder.run();
+  });
+
   return (
     <Container className={classNames("p-4", styles.moduleContainer)}>
-      <Dandruff heading="Resources"/>
+      <MyBreadcrumbs />
+      <InputGroup  style={{ marginTop: "3rem" }}>
+        <InputGroup.Prepend>
+          <InputGroup.Text>
+            <FontAwesomeIcon icon={faSearch} />
+          </InputGroup.Text>
+        </InputGroup.Prepend>
+
+        <FormControl aria-label="Search" placeholder="search" />
+      </InputGroup>
+
+      <h5 className={classNames(styles.moduleSectionHeader)}>Quick Access</h5>
+
+      <Row>
+        {[...Array(4)].map((e, i) => (
+          <Col md={3} key={i}>
+            <Card style={{ marginTop: "1rem" }}>
+              <Card.Img variant="top" src="holder.js/100px100" />
+              <Card.Body>
+                <Card.Title>Document {i}</Card.Title>
+              </Card.Body>
+            </Card>
+          </Col>
+        ))}
+      </Row>
+
+      <h5 className={classNames(styles.moduleSectionHeader)}>Folders</h5>
+      <Row>
+        {[...Array(10)].map((e, i) => (
+          <Col md={3} key={i}>
+            <Card style={{ marginTop: ".6rem" }}>
+              <Card.Body style={{ padding: ".6rem" }}>
+                <Card.Text>Folder{i}</Card.Text>
+              </Card.Body>
+            </Card>
+          </Col>
+        ))}
+      </Row>
     </Container>
   );
 };