History page basic frontend done

GDGVIT · Aug 15, 2024 · cf699cf · cf699cf
1 parent 0ab2be3
commit cf699cf
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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>
+  );
+}