added lofi for papers

app/globals.css

@@ -1,26 +1,74 @@
+/* Import Tailwind CSS for utility classes */
 @import "tailwindcss";
 
+/* Define CSS custom properties for light mode colors */
 :root {
   --background: #ffffff;
   --foreground: #171717;
 }
 
+/* Inline theme configuration for Tailwind */
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --font-sans: var(--font-geist-sans);
   --font-mono: var(--font-geist-mono);
 }
 
+/* Dark mode color overrides */
 @media (prefers-color-scheme: dark) {
   :root {
     --background: #0a0a0a;
     --foreground: #ededed;
   }
 }
 
+/* Global body styles for background, text color, and font. Currently used in papers lofi */
 body {
   background: var(--background);
   color: var(--foreground);
   font-family: Arial, Helvetica, sans-serif;
 }
+
+/* Container class for centering and padding the main content area on the papers page */
+.container {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+/* Paper item class for styling each individual paper entry in the list */
+.paper-item {
+  border: 1px solid #ccc;
+  padding: 15px;
+  margin-bottom: 10px;
+  background: #f9f9f9;
+  border-radius: 5px;
+  color: #333; /* Darker text for better contrast */
+}
+
+/* Styles for headings inside paper items */
+.paper-item h2 {
+  margin: 0 0 10px 0;
+}
+
+/* Styles for links in headings (paper titles) */
+.paper-item h2 a {
+  color: #000;
+  font-weight: bold;
+}
+
+/* Styles for paragraphs inside paper items */
+.paper-item p {
+  margin: 5px 0;
+}
+
+/* Styles for links inside paper items */
+.paper-item a {
+  color: #007bff;
+  text-decoration: none;
+}
+
+.paper-item a:hover {
+  text-decoration: underline;
+}

app/papers/page.tsx

@@ -0,0 +1,63 @@
+import Link from "next/link";
+import { useState } from "react";
+
+export default function Papers() {
+  // Placeholder data for papers - easy to extend by adding more objects
+  const papers = [
+    {
+      title: "Paper Title 1",
+      authors: ["Author 1", "Author 2"],
+      date: "Date 1",
+      href: "#",
+    },
+    {
+      title: "Paper Title 2",
+      authors: ["Author 3"],
+      date: "Date 2",
+      href: "#",
+    },
+    {
+      title: "Paper Title 3",
+      authors: ["Author 4", "Author 5", "Author 6"],
+      date: "Date 3",
+      href: "#",
+    },
+  ];
+
+  const [searchTerm, setSearchTerm] = useState("");
+
+  const filteredPapers = papers.filter(paper =>
+    paper.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    paper.authors.some(author => author.toLowerCase().includes(searchTerm.toLowerCase()))
+  );
+
+  return (
+    <div className="container">
+      <Link href="/">← Back to Home</Link>{" "}
+      {/* Navigation link back to the home page */}
+      <h1>Working Papers & Reports</h1>
+      <input
+        type="text"
+        placeholder="Search papers by title or author..."
+        value={searchTerm}
+        onChange={(e) => setSearchTerm(e.target.value)}
+        className="search-input"
+      />
+      <ul>
+        {filteredPapers.length > 0 ? (
+          filteredPapers.map((paper, index) => (
+            <li key={index} className="paper-item">
+              <h2>
+                <a href={paper.href}>{paper.title}</a>
+              </h2>
+              <p>Authors: {paper.authors.join(", ")}</p>
+              <p>Date: {paper.date}</p>
+            </li>
+          ))
+        ) : (
+          <p>No papers found matching your search.</p>
+        )}
+      </ul>
+    </div>
+  );
+}