Merge pull request #13 from SoorajModi/3-policy

Policy

package.json

@@ -4,17 +4,17 @@
   "private": true,
   "dependencies": {
     "@material-ui/core": "^4.11.4",
+    "@material-ui/styles": "latest",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "material-ui": "^0.20.2",
+    "prop-types": "latest",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
-    "web-vitals": "^1.0.1",
-    "@material-ui/styles": "latest",
-    "prop-types": "latest"
+    "web-vitals": "^1.0.1"
   },
   "scripts": {
     "start": "react-scripts start",

src/pages/policy/fileViewer.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+// eslint-disable-next-line react/prop-types
+function FileViewer({ file }) {
+  return (
+    <div style={styles.container}>
+      <object data={file} type="application/pdf" style={styles.object}>
+        <p>
+          It appears you do not have a PDF plugin for this browser. No biggie... you can
+          <a href={file}>
+            click here to download the PDF
+            file.
+          </a>
+        </p>
+      </object>
+    </div>
+  );
+}
+
+const styles = {
+  container: {
+    height: '90vh',
+    paddingBottom: '10vh',
+  },
+  object: {
+    width: '100%',
+    height: '100%',
+  },
+};
+
+export default FileViewer;

src/pages/policy/header.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+function Header() {
+  return (
+    <div>
+      <h1 style={styles.title}>SOCIS Policies</h1>
+      <p style={styles.subtext}>Last updated May 28, 2021</p>
+    </div>
+  );
+}
+
+const styles = {
+  title: {
+    textAlign: 'center',
+    marginBottom: '0',
+  },
+  subtext: {
+    textAlign: 'center',
+    fontStyle: 'italic',
+    marginTop: '0',
+  },
+};
+
+export default Header;

src/pages/policy/index.jsx

@@ -1,3 +1,31 @@
-import PolicyPage from './PolicyPage';
+import React from 'react';
+import Container from '@material-ui/core/Container';
+import { NavBar } from '../../components';
+import Header from './header';
+import FileViewer from './fileViewer';
+
+import constitution from '../../assets/Constitution.pdf';
+import clubSpacePolicy from '../../assets/ClubSpacePolicy.pdf';
+import committeeAndStaffPolicy from '../../assets/CommitteeAndStaffPolicy.pdf';
+import makersSpacePolicy from '../../assets/MakersSpacePolicy.pdf';
+
+function PolicyPage() {
+  return (
+    <>
+      <NavBar />
+      <Container>
+        <Header />
+        <h2>Constitution</h2>
+        <FileViewer file={constitution} />
+        <h2>Club Space Policy</h2>
+        <FileViewer file={clubSpacePolicy} />
+        <h2>Committee and Staff Policy</h2>
+        <FileViewer file={committeeAndStaffPolicy} />
+        <h2>Makerspace Policy</h2>
+        <FileViewer file={makersSpacePolicy} />
+      </Container>
+    </>
+  );
+}
 
 export default PolicyPage;