added document viewer and changed styling

package-lock.json

@@ -8,12 +8,14 @@
       "name": "eexiv-2",
       "version": "0.1.0",
       "dependencies": {
+        "file-saver": "^2.0.5",
         "next": "14.1.0",
         "react": "^18",
         "react-dom": "^18",
         "zustand": "^4.5.0"
       },
       "devDependencies": {
+        "@types/file-saver": "^2.0.7",
         "@types/node": "^20",
         "@types/react": "^18",
         "@types/react-dom": "^18",
@@ -447,6 +449,12 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@types/file-saver": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.7.tgz",
+      "integrity": "sha512-dNKVfHd/jk0SkR/exKGj2ggkB45MAkzvWCaqLUUgkyjITkGNzH8H+yUwr+BLJUBjZOe9w8X3wgmXhZDRg1ED6A==",
+      "dev": true
+    },
     "node_modules/@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@@ -1985,6 +1993,11 @@
         "node": "^10.12.0 || >=12.0.0"
       }
     },
+    "node_modules/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
+    },
     "node_modules/fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",

package.json

@@ -9,12 +9,14 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "file-saver": "^2.0.5",
     "next": "14.1.0",
     "react": "^18",
     "react-dom": "^18",
     "zustand": "^4.5.0"
   },
   "devDependencies": {
+    "@types/file-saver": "^2.0.7",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",

src/app/container/Container.tsx

@@ -1,14 +1,27 @@
 import styles from './container.module.css'
 
 /**
- * Renders a container component with the provided children. It will restrict the
- * width of the container to 90vw.
+ * Renders a container component with the specified width, containing the provided children.
  *
- * @param {Readonly<{ children: React.ReactNode }>} children - The child components to be rendered within the container.
- * @return {React.ReactElement} The container component with the provided children.
+ * @param children - The children to be rendered within the container.
+ * @param width - The width of the container.
+ * @param fill - Whether the container should fill the available height
+ * @return The container component with the specified width and children.
  */
 export default function Container({
   children,
-}: Readonly<{ children: React.ReactNode }>) {
-  return <div className={styles.container}>{children}</div>
+  width,
+  fill,
+}: Readonly<{ children: React.ReactNode; width: string; fill?: boolean }>) {
+  return (
+    <div
+      className={styles.container}
+      style={{
+        maxWidth: width,
+        minHeight: fill ? 'calc(100vh - 450px' : 'auto',
+      }}
+    >
+      {children}
+    </div>
+  )
 }

src/app/container/container.module.css

@@ -1,5 +1,5 @@
 .container {
   margin: 0 auto;
   padding: 0 20px;
-  max-width: 90vw;
+  margin-bottom: 30px;
 }

src/app/document/page.tsx

@@ -0,0 +1,8 @@
+export default function Page() {
+  return (
+    <h1>
+      This is a placeholder for a document browser that will be implemented in
+      the future. In the meantime, you can view specific documents by searching.
+    </h1>
+  )
+}

src/app/document/view/[docName]/documentViewer.module.css

@@ -0,0 +1,61 @@
+.itemTitle {
+  margin: 0;
+  font-size: 2em;
+}
+
+.itemAuthors {
+  margin-bottom: 0;
+}
+
+.itemDates {
+  margin-top: 0;
+}
+
+.itemType {
+  display: inline-block;
+  width: fit-content;
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  margin-right: 10px;
+  border-radius: 5px;
+  margin-top: 10px;
+}
+
+.typeReport {
+  background-color: #28a745;
+}
+
+.itemRevision {
+  display: inline-block;
+}
+
+.itemAbstractHeader {
+  margin-top: 20px;
+  margin-bottom: 10px;
+  color: 33;
+  font-size: 1.5em;
+}
+
+.itemAbstract {
+  margin-top: 10px;
+  color: #666;
+  font-size: 1.2em;
+}
+
+.typePresentation {
+  background-color: #007bff;
+}
+
+.typeOther {
+  background-color: #6c757d;
+}
+
+.resultAbstract {
+  color: #333;
+}
+
+.downloadButton {
+  padding: 10px;
+}

src/app/document/view/[docName]/page.tsx

@@ -0,0 +1,92 @@
+'use client'
+import styles from './documentViewer.module.css'
+import { Zilla_Slab } from 'next/font/google'
+import { saveAs } from 'file-saver'
+
+const zillaSlab = Zilla_Slab({ subsets: ['latin'], weight: ['500'] })
+
+export default function Page({
+  params,
+}: Readonly<{ params: { docName: string } }>) {
+  const handleDownload = () => {
+    saveAs(`/download/${params.docName}/file.pdf`, `${params.docName}.pdf`)
+  }
+
+  type ItemType = 'report' | 'presentation' | 'other'
+  const generateItemBadge = (itemName: ItemType) => {
+    let itemStyle: string
+    switch (itemName) {
+      case 'report':
+        itemStyle = `${styles.itemType} bg-green-400`
+        break
+      case 'presentation':
+        itemStyle = `${styles.itemType} bg-blue-400`
+        break
+      case 'other':
+        itemStyle = `${styles.itemType} bg-amber-400`
+    }
+    return (
+      <p className={itemStyle}>
+        {itemName.charAt(0).toUpperCase()}
+        {itemName.slice(1)}
+      </p>
+    )
+  }
+
+  return (
+    <div id='content'>
+      <div>
+        <h3
+          className={`
+            ${styles.itemTitle}
+            text-slate-800
+            ${zillaSlab.className}
+          `}
+        >
+          2024 Controls/Programming DWM
+        </h3>
+        <p className={`${styles.itemAuthors} text-slate-800 mt-2`}>
+          <a href='../author/#mbohsali'>Majd Bohsali</a> and{' '}
+          <a href='../author/#avenkatesh'>Ananth Venkatesh</a>
+        </p>
+        <p className='mt-4'>Published Jan 22, 2024</p>
+        {generateItemBadge('report')}
+        <p className={styles.itemRevision}>Revision 1</p>
+        <h4 className={styles.itemAbstractHeader}>Abstract</h4>
+        <p className='my-2 text-xl text-slate-600'>
+          This document outlines the first two weeks of prototyping conducted by
+          the EECS subteam for Team 1280. Action items are presented in a
+          doing/working/moving format to keep track of new developments related
+          to EECS projects.
+        </p>
+        <p className='my-2'>
+          <strong>Topics</strong>:{' '}
+          <a href='../topic/#frc'>FIRST Robotics Competition</a>,{' '}
+          <a href='../topic/#eecs'>
+            Electrical Engineering and Computer Science
+          </a>
+        </p>
+        <p className='my-2'>
+          <strong>Code</strong>:{' '}
+          <a href='https://github.com/Team-1280/Swerve' target='_blank'>
+            https://github.com/Team-1280/Swerve
+          </a>
+          ,{' '}
+          <a href='https://github.com/Team-1280/Jankboard' target='_blank'>
+            https://github.com/Team-1280/Jankboard
+          </a>
+          ,{' '}
+          <a href='https://github.com/Team-1280/identity' target='_blank'>
+            https://github.com/Team-1280/identity
+          </a>
+        </p>
+        <button
+          className='bg-blue-600 text-slate-100 hover:bg-blue-300 font-semibold rounded py-2 px-4 my-2'
+          onClick={handleDownload}
+        >
+          Download PDF
+        </button>
+      </div>
+    </div>
+  )
+}

src/app/home.module.css

@@ -29,7 +29,7 @@
 .wordmark {
   float: left;
   height: 100px;
-  margin-top: 25px;
+  margin-top: -25px;
 }
 
 .contributions {

src/app/layout.tsx

@@ -11,10 +11,6 @@ import Container from './container/Container'
   import it, as is done here with Zilla Slab, and then execute a CSS exploit by assigning 
   the tag className={zillaSlab.className} to set the font family of an element to your desired font.
   DO NOT directly set the font family in CSS using font-family. You will break EVERYTHING!
-
-  To set multiple classes, you can use an advanced exploit using an array of
-  your desired classNames (eg. [styles.title, zillaSlab.className]) and join them with a space
-  like so: className={[styles.title, zillaSlab.className].join(' ')}
 */
 const inter = Inter({ subsets: ['latin'] })
 const zillaSlab = Zilla_Slab({ subsets: ['latin'], weight: ['500', '700'] })
@@ -33,10 +29,11 @@ export default function RootLayout({
     <html lang='en'>
       <body className={inter.className}>
         <div className={styles.header}>
+          <Container width='1200px'>
             <img className={styles.wordmark} src='/eecs-wordmark.png' />
             <p className={styles.contributions}>
-            We gratefully acknowledge support from our volunteer peer reviewers,
-            member institutions, and all{' '}
+              We gratefully acknowledge support from our volunteer peer
+              reviewers, member institutions, and all{' '}
               <a
                 href='https://github.com/Team-1280/eeXiv/graphs/contributors'
                 target='_blank'
@@ -45,18 +42,24 @@ export default function RootLayout({
               </a>
               .
             </p>
+          </Container>
         </div>
         <div className={styles.banner}>
-          <h1 className={[styles.title, zillaSlab.className].join(' ')}>
+          <Container width='1200px'>
+            <h1 className={`${styles.title} ${zillaSlab.className}`}>
               <Link href='/' className='no-link-style'>
                 eeXiv<sup>2</sup>
               </Link>
             </h1>
+          </Container>
           <SearchBar />
         </div>
-        <Container>{children}</Container>
+        <Container width='1200px' fill>
+          {children}
+        </Container>
         <footer>
           <div className={styles.footerContent}>
+            <Container width='1200px'>
               <ul>
                 <li>
                   <Link href='/about'>About</Link>
@@ -88,6 +91,7 @@ export default function RootLayout({
                   </Link>
                 </li>
               </ul>
+            </Container>
           </div>
         </footer>
       </body>

src/app/searchBar/searchBar.module.css

@@ -6,7 +6,7 @@
 .search {
   position: absolute;
   top: 175px;
-  left: 50%;
+  right: 0;
   width: 40vw;
 }
 

src/app/searchBar/searchBar.tsx

@@ -1,3 +1,4 @@
+'use client'
 import styles from './searchBar.module.css'
 
 export default function SearchBar() {
@@ -5,7 +6,7 @@ export default function SearchBar() {
     <div className={styles.search}>
       <input
         type='text'
-        className={[styles.searchBox, 'text-slate-800'].join(' ')}
+        className={`${styles.searchBox} text-slate-800`}
         name='q'
         placeholder='Search...'
       />