From cf699cf5fb8f21ebd09dc4479a72382b3a0c46bf Mon Sep 17 00:00:00 2001
From: Nitinthegreat <nitinpandey1304@gmail.com>
Date: Thu, 15 Aug 2024 15:14:36 +0530
Subject: [PATCH] History page basic frontend done

---
 ao3 webpages/components/Sidebar/Sidebar.jsx |  6 +-
 ao3 webpages/src/App.jsx                    |  3 +
 ao3 webpages/src/pages/history.jsx          | 61 +++++++++++++++++++++
 3 files changed, 68 insertions(+), 2 deletions(-)
 create mode 100644 ao3 webpages/src/pages/history.jsx

diff --git a/ao3 webpages/components/Sidebar/Sidebar.jsx b/ao3 webpages/components/Sidebar/Sidebar.jsx
index b2348e7..57245ce 100644
--- a/ao3 webpages/components/Sidebar/Sidebar.jsx	
+++ b/ao3 webpages/components/Sidebar/Sidebar.jsx	
@@ -21,7 +21,9 @@ const Sidebar = () => {
     const handleClickBookmarks = () => {
         navigate('/bookmarks'); // Redirects to the BookmarksPage
         };
-    
+    const handleClickHistory = () => {
+        navigate('/history'); // Redirects to the HistoryPage
+        };
 
     React.useEffect(() => {
         document.addEventListener('click', handleClickOutside);
@@ -76,7 +78,7 @@ const Sidebar = () => {
 
                     <span>Bookmarks</span>
                 </div>
-                <div className="icon-wrapper">
+                <div className="icon-wrapper" onClick={handleClickHistory}>
                     <svg width="29" height="28" viewBox="0 0 29 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <g clip-path="url(#clip0_674_491)">
                             <path d="M26.826 12.7186L27.725 12.6758L27.7239 12.6538L27.7218 12.6319L26.826 12.7186ZM8.51069 21.6765C8.11585 21.3746 7.551 21.4499 7.24906 21.8447C6.94713 22.2396 7.02244 22.8044 7.41728 23.1064L8.51069 21.6765ZM4.99442 14.1414C4.88054 10.4974 6.07148 7.77926 7.88086 5.93562C9.70206 4.07993 12.2027 3.05693 14.7838 2.91665C19.9301 2.63698 25.2573 5.85207 25.9302 12.8053L27.7218 12.6319C26.9438 4.59221 20.6636 0.79446 14.6861 1.11931C11.7054 1.2813 8.76503 2.4649 6.59619 4.67482C4.41552 6.89678 3.06735 10.1033 3.19529 14.1976L4.99442 14.1414ZM25.927 12.7614C26.3734 22.1354 16.1388 27.5098 8.51069 21.6765L7.41728 23.1064C16.233 29.8478 28.2459 23.6147 27.725 12.6758L25.927 12.7614Z" fill="#6B7A8F" />
diff --git a/ao3 webpages/src/App.jsx b/ao3 webpages/src/App.jsx
index c752966..6c6ee0d 100644
--- a/ao3 webpages/src/App.jsx	
+++ b/ao3 webpages/src/App.jsx	
@@ -5,6 +5,7 @@ import SignUp from '../components/SignUp';
 import Dashboard from './pages/dashboard'; // Corrected import
 import NotesPage from './pages/Notes';
 import Bookmarks from './pages/bookmarks';
+import History from './pages/history';
 function App() {
   return (
     <Router>
@@ -14,6 +15,8 @@ function App() {
         <Route path="/dashboard" element={<Dashboard />} /> {/* Corrected route */}
         <Route path='/notes' element={<NotesPage />} />
         <Route path="/bookmarks" element={<Bookmarks />} />
+        <Route path="/history" element={<History/>} />
+        {/* Add other routes here */}
         <Route path="/" element={<div>Hello World</div>} />
         {/* Add other routes here */}
       </Routes>
diff --git a/ao3 webpages/src/pages/history.jsx b/ao3 webpages/src/pages/history.jsx
new file mode 100644
index 0000000..edf1ad1
--- /dev/null
+++ b/ao3 webpages/src/pages/history.jsx	
@@ -0,0 +1,61 @@
+import React from 'react';
+import Sidebar from '../../components/Sidebar/Sidebar';
+// Demo data
+const historyData = [
+  { id: 1, title: "The Shoebox Project", author: "ladyjaida, dorkorific", tags: ["Friendship", "Humor"], lastVisited: "13 Aug 2024" },
+  { id: 2, title: "Thee of Hearts", author: "irnan", tags: ["Steve Rogers"], lastVisited: "09 Aug 2024" },
+  { id: 3, title: "Time and Tide", author: "what_alchemy", tags: ["Hurt", "Angst", "Romance"], lastVisited: "08 Aug 2024" },
+  { id: 4, title: "The Course of Honour", author: "Ameona", tags: ["Court", "Romance"], lastVisited: "05 Aug 2024" },
+  { id: 5, title: "A Long Winter", author: "littlemousling", tags: ["Friendship", "Adventure"], lastVisited: "01 Aug 2024" },
+  { id: 6, title: "Drastically Redefining Protocol", author: "rageprufrock", tags: ["Humor", "Romance"], lastVisited: "30 Jul 2024" },
+  { id: 7, title: "Twist and Shout", author: "Gabriel, StandByMe", tags: ["Angst", "Tragedy"], lastVisited: "27 Jul 2024" },
+  { id: 8, title: "Two Foxes", author: "QinLong", tags: ["Naruto", "Friendship"], lastVisited: "21 Jul 2024" },
+  { id: 9, title: "I am Groot", author: "greenlily", tags: ["Friendship"], lastVisited: "18 Jul 2024" },
+  { id: 10, title: "This, You Protect", author: "owlet", tags: ["Emotional", "Hurt"], lastVisited: "15 Jul 2024" },
+  { id: 11, title: "How to Survive a Werewolf Attack", author: "Sara Holmes", tags: ["Humor", "Angst", "Action"], lastVisited: "10 Jul 2024" },
+];
+
+export default function History() {
+  return (
+    <div className="flex">
+      <Sidebar />
+    <div style={{ backgroundColor: '#F8F8F8', padding: '20px', fontFamily: 'Arial, sans-serif', marginLeft:'68px', width:'100%' }}>
+      <h1 style={{ fontSize: '24px', fontWeight: 'bold', color: '#333', marginBottom: '20px', marginLeft: '40px' }}>History</h1>
+      <div style={{ backgroundColor: 'white', borderRadius: '8px', overflow: 'hidden', boxShadow: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)' }}>
+        <table style={{ width: '100%', borderCollapse: 'separate', borderSpacing: 0 }}>
+          <thead>
+            <tr>
+              <th style={{ padding: '20px 60px 20px 60px', textAlign: 'left', borderBottom: '1px solid #E0E0E0' }}>
+                <span style={{ color: '#2196F3', fontWeight: 'bold' }}>Title</span>
+                <span style={{ color: '#757575', fontWeight: 'normal', fontSize: '0.8em', marginLeft: '5px' }}>*Click to follow link</span>
+              </th>
+              <th style={{ padding: '20px 20px', textAlign: 'left', borderBottom: '1px solid #E0E0E0' }}>
+                <span style={{ color: '#2196F3', fontWeight: 'bold' }}>Author</span>
+              </th>
+              <th style={{ padding: '20px 20px', textAlign: 'left', borderBottom: '1px solid #E0E0E0' }}>
+                <span style={{ color: '#2196F3', fontWeight: 'bold' }}>Tags</span>
+              </th>
+              <th style={{ padding: '20px 60px 20px 20px', textAlign: 'left', borderBottom: '1px solid #E0E0E0' }}>
+                <span style={{ color: '#2196F3', fontWeight: 'bold' }}>Last visited</span>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {historyData.map((item, index) => (
+              <tr key={item.id}>
+                <td style={{ padding: '15px 60px', borderBottom: '1px solid #E0E0E0' }}>
+                  <span style={{ color: '#2196F3', cursor: 'pointer' }}>{item.title}</span>
+                </td>
+                <td style={{ padding: '15px 20px', borderBottom: '1px solid #E0E0E0' }}>{item.author}</td>
+                <td style={{ padding: '15px 20px', borderBottom: '1px solid #E0E0E0' }}>{item.tags.join(", ")}</td>
+                <td style={{ padding: '15px 60px 15px 20px', borderBottom: '1px solid #E0E0E0' }}>{item.lastVisited}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+    </div>
+   </div>
+  );
+}
\ No newline at end of file