From 414e8a5cd8124e1f1aa64b2abb27f501bd620014 Mon Sep 17 00:00:00 2001
From: Giuseppe Milicia <g.milicia@outlook.com>
Date: Sat, 17 Dec 2022 11:41:40 +0100
Subject: [PATCH] feat: add archive page

---
 src/App.js                       |  7 +++++++
 src/components/TopBar.js         | 12 ++++++++++++
 src/components/VideoThumbnail.js | 21 +++++++++++++++++++++
 src/pages/VideoArchive.js        | 20 ++++++++++++++++++++
 4 files changed, 60 insertions(+)
 create mode 100644 src/components/TopBar.js
 create mode 100644 src/components/VideoThumbnail.js
 create mode 100644 src/pages/VideoArchive.js

diff --git a/src/App.js b/src/App.js
index 54cbf34..204d1f1 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,6 +6,8 @@ import {Outlet, Route, Routes} from "react-router-dom";
 import Error404 from "./pages/Error404";
 import Login from "./pages/Login";
 import Signup from "./pages/Signup";
+import PrivateRoute from "./utils/PrivateRoute";
+import VideoArchive from "./pages/VideoArchive";
 
 function App() {
   return (
@@ -13,6 +15,11 @@ function App() {
         <Route element={<Layout />}>
             <Route index element={<Login />} />
             <Route path="/signup" element={<Signup />} />
+            <Route path="/archive" element={
+                <PrivateRoute>
+                    <VideoArchive />
+                </PrivateRoute>
+            } />
             <Route path="*" element={<Error404 />} />
         </Route>
       </Routes>
diff --git a/src/components/TopBar.js b/src/components/TopBar.js
new file mode 100644
index 0000000..5cffda2
--- /dev/null
+++ b/src/components/TopBar.js
@@ -0,0 +1,12 @@
+function TopBar(props) {
+    return (
+        <div className="row">
+            <div className={`d-inline-flex justify-content-between mt-sm-4 mb-sm-4 ${props.actionBtn && "border-bottom"}`}>
+                <h3 style={{fontWeight: 500}}>{props.title}</h3>
+                {props.actionBtn}
+            </div>
+        </div>
+    );
+}
+
+export default TopBar;
diff --git a/src/components/VideoThumbnail.js b/src/components/VideoThumbnail.js
new file mode 100644
index 0000000..ed943e6
--- /dev/null
+++ b/src/components/VideoThumbnail.js
@@ -0,0 +1,21 @@
+import more from "../assets/more.svg";
+import {NavLink} from "react-router-dom";
+
+function VideoPreview(props) {
+    return (
+        <NavLink to="/editor" style={{textDecoration: "none", color: "#222222"}}>
+            <div className="card" style={{width: "18rem", backgroundColor: "#F4F4F4", border: "0px"}}>
+                <img src={props.preview} className="card-img-top p-1" alt={props.title} />
+                <img src={more} className="position-absolute mt-2 me-2 top-0 end-0" alt="More" />
+                <div className="card-body">
+                    <h5 className="d-flex justify-content-center card-title">{props.title}</h5>
+                    <div className="d-flex justify-content-center" style={{color: "#999999"}}>
+                        {props.tags.map(tag => <span key={tag} className="border rounded ps-1 pe-1 me-2">{tag}</span>)}
+                    </div>
+                </div>
+            </div>
+        </NavLink>
+    );
+}
+
+export default VideoPreview;
diff --git a/src/pages/VideoArchive.js b/src/pages/VideoArchive.js
new file mode 100644
index 0000000..24fa095
--- /dev/null
+++ b/src/pages/VideoArchive.js
@@ -0,0 +1,20 @@
+import archive1 from "../assets/archive-1.png";
+import TopBar from "../components/TopBar";
+import VideoThumbnail from "../components/VideoThumbnail";
+import {NavLink} from "react-router-dom";
+
+function VideoArchive() {
+    return (
+        <div>
+            <TopBar
+                title="Saved Videos"
+                actionBtn={<NavLink to="/editor" className="btn btn-primary mb-2 me-5">Create New</NavLink>}
+            />
+            <div className="d-flex w-100">
+                <VideoThumbnail preview={archive1} title="Saying Hi to users!" tags={["Email", "Marketing", "Greeting"]} />
+            </div>
+        </div>
+    );
+}
+
+export default VideoArchive;