feat: add archive page

src/App.js

@@ -6,13 +6,20 @@ 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 (
       <Routes>
         <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>

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;

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;

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;