Populate resource cards with data from data structure

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

@@ -9,21 +9,34 @@ import Card from "react-bootstrap/Card";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faFile } from "@fortawesome/free-solid-svg-icons";
 
-const FileCard: React.FC = () => {
+export interface FileCardProps {
+  title: string;
+  type: string;
+  tags: string[];
+  id: number;
+}
+
+const FileCard: React.FC<FileCardProps> = ({
+  title,
+  type,
+  tags,
+  id,
+}: FileCardProps) => {
   return (
     <Card className={styles.quickViewCard}>
       <Card.Img variant="top" src={graphIllustration} />
       <Card.Body>
-        <Card.Title>Document</Card.Title>
+        <Card.Title>{title}</Card.Title>
         <FontAwesomeIcon style={{ fontSize: "1.125rem" }} icon={faFile} />
       </Card.Body>
       <Card.Footer>
-        <Badge pill className={classNames(styles.quickViewTag, styles.tagTeal)}>
-          New
-        </Badge>
-        <Badge pill className={classNames(styles.quickViewTag, styles.tagBlue)}>
-          Week 1
-        </Badge>
+				{
+					tags.map(tag => 
+						<Badge pill className={classNames(styles.quickViewTag, tag==="new" ? styles.tagTeal : styles.tagBlue)}>
+						{tag}
+					</Badge>
+					)
+				}
       </Card.Footer>
     </Card>
   );

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

@@ -4,11 +4,17 @@ import Card from "react-bootstrap/Card";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faFolder } from "@fortawesome/free-solid-svg-icons";
 
-const FolderCard: React.FC = () => {
+export interface FolderCardProps{
+    title: string;
+    id: number;
+}
+
+
+const FolderCard: React.FC<FolderCardProps> = ({title, id}: FolderCardProps) => {
   return (
     <Card className={styles.folderCard}>
       <Card.Body style={{ padding: ".6rem" }}>
-        <Card.Text style={{ marginBottom: 0 }}>Folder</Card.Text>
+        <Card.Text style={{ marginBottom: 0 }}>{title}</Card.Text>
         <FontAwesomeIcon style={{ fontSize: "1.125rem" }} icon={faFolder} />
       </Card.Body>
     </Card>

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

@@ -6,11 +6,21 @@ import Row from "react-bootstrap/esm/Row";
 import Col from "react-bootstrap/esm/Col";
 import ResourceSectionHeader from "../ResourceSectionHeader";
 import FileCard from "components/atoms/FileCard";
+export interface QuickAccessProps {
+  quickAccessItems: {
+    title: string;
+    type: string;
+    tags: string[];
+    id: number;
+  }[];
+}
 
-const QuickAccess: React.FC = () => {
+const QuickAccess: React.FC<QuickAccessProps> = ({
+  quickAccessItems,
+}: QuickAccessProps) => {
   return (
     <>
-      <ResourceSectionHeader heading="Quick Access"/>
+      <ResourceSectionHeader heading="Quick Access" />
 
       <Row
         className={classNames(
@@ -20,17 +30,17 @@ const QuickAccess: React.FC = () => {
           styles.quickAccessRow
         )}
       >
-        {[...Array(10)].map((e, i) => (
+        {quickAccessItems.map(({ title, type, tags, id }) => (
           <Col
             xs={7}
             sm={5}
             md={5}
             lg={4}
-						xl={3}
-						key={i}
-						style={{marginBottom: ".5rem"}}
+            xl={3}
+            key={id}
+            style={{ marginBottom: ".5rem" }}
           >
-            <FileCard/>
+            <FileCard title={title} type={type} tags={tags} id={id} />
           </Col>
         ))}
       </Row>

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

@@ -4,15 +4,22 @@ import Col from "react-bootstrap/esm/Col";
 import ResourceSectionHeader from "../ResourceSectionHeader";
 import FolderCard from "components/atoms/FolderCard";
 
-const ResourceFolders: React.FC = () => {
+export interface ResourceFoldersProps{
+	folderItems: {
+    title: string;
+    id: number;
+	}[];
+}
+
+const ResourceFolders: React.FC<ResourceFoldersProps> = ({folderItems}: ResourceFoldersProps) => {
   return (
     <>
       <ResourceSectionHeader heading="Folders" />
 
       <Row style={{ marginTop: "10px" }}>
-        {[...Array(10)].map((e, i) => (
-          <Col xs={6} sm={6} md={3} key={i}>
-            <FolderCard/>
+        {folderItems.map(({title, id}) => (
+          <Col xs={6} sm={6} md={3} key={id}>
+            <FolderCard title={title} id={id}/>
           </Col>
         ))}
       </Row>

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

@@ -6,13 +6,77 @@ import InputGroup from "react-bootstrap/InputGroup";
 import FormControl from "react-bootstrap/FormControl";
 import Button from "react-bootstrap/Button";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faInfoCircle,
-} from "@fortawesome/free-solid-svg-icons";
+import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
 import QuickAccess from "components/molecules/QuickAccess";
 import ResourceFolders from "components/molecules/ResourceFolders";
 
 const ModuleResources: React.FC = () => {
+  let folderItems = [
+    {
+      title: "Lecture Materials",
+      id: 0,
+    },
+    {
+      title: "Panopto Videos",
+      id: 1,
+    },
+    {
+      title: "Tutorial Sheets",
+      id: 2,
+    },
+    {
+      title: "Code",
+      id: 3,
+    },
+    {
+      title: "Useful Links",
+      id: 4,
+    },
+    {
+      title: "Other",
+      id: 5,
+    },
+	];
+	
+	let quickAccessItems = [
+    {
+			title: "Notes 1",
+			type: "File",
+			tags:["new", "Week 1"],
+      id: 0,
+		},
+		{
+			title: "Slides 1 - 1UP",
+			type: "File",
+			tags:["new", "Week 2"],
+      id: 1,
+		},
+		{
+			title: "Circuit simulator",
+			type: "Link",
+			tags:["new", "Week 2"],
+      id: 2,
+		},
+		{
+			title: "C - Lecture 1",
+			type: "Panopto",
+			tags:["new"],
+      id: 3,
+		},
+		{
+			title: "Translation Validity",
+			type: "Link",
+			tags:["Week 2"],
+      id: 4,
+		},
+		{
+			title: "Revision Exercises",
+			type: "File",
+			tags:["Week 3"],
+      id: 5,
+		},
+	]
+
   return (
     <>
       <MyBreadcrumbs />
@@ -29,8 +93,8 @@ const ModuleResources: React.FC = () => {
         </InputGroup.Append>
       </InputGroup>
 
-      <QuickAccess />
-      <ResourceFolders/>
+      <QuickAccess quickAccessItems={quickAccessItems}/>
+      <ResourceFolders folderItems={folderItems}/>
     </>
   );
 };