add video

ui/src/lib/camera/camera.module.scss

@@ -17,7 +17,7 @@
     padding: 5px 15px;
     display: flex;
     flex-direction: column;
-    align-items: end;
+    align-items: flex-end;
   }
 
   & div:not(:first-child) {

ui/src/lib/camera/camera.tsx

@@ -1,6 +1,6 @@
 import cls from './camera.module.scss';
 import {useEffect, useState} from "react";
-
+import video from "../../../../apps/crud/assets/video/bitch lasagna.mp4"
 /* eslint-disable-next-line */
 export interface CameraProps {
 }
@@ -51,7 +51,7 @@ export function Camera(props: CameraProps) {
                 </div>
             </div>
             <div>
-                {randomNumber}
+                <video src={video} controls={true} autoPlay={true}/>
             </div>
         </div>
     );

ui/src/lib/navbar/navbar.module.scss

@@ -1,24 +1,27 @@
 .wrapper {
-  display: flex;
+    display: flex;
-  align-items: center;
+    align-items: center;
-  background-color: var(--bg);
+    background-color: var(--bg);
-  padding: 10px;
+    padding: 10px;
-  border-radius: var(--border-medium);
+    border-radius: var(--border-medium);
-  margin: 10px;
+    margin: 10px;
-  gap: 20px;
+    gap: 20px;
-  -webkit-box-shadow: 0px 5px 9px -8px rgba(34, 60, 80, 0.6);
+    -webkit-box-shadow: 0px 5px 9px -8px rgba(34, 60, 80, 0.6);
-  -moz-box-shadow: 0px 5px 9px -8px rgba(34, 60, 80, 0.6);
+    -moz-box-shadow: 0px 5px 9px -8px rgba(34, 60, 80, 0.6);
-  box-shadow: 0px 5px 9px -8px rgba(34, 60, 80, 0.6);
+    box-shadow: 0px 5px 9px -8px rgba(34, 60, 80, 0.6);
 }
+
 .container {
-  flex: 1;
+    flex: 1;
-  display: flex;
+    display: flex;
-  flex-direction: row;
+    flex-direction: row;
-  align-items: center;
+    align-items: center;
-  justify-content: space-between;
+    justify-content: center;
+    gap: 50px;
 }
+
 .logo {
-  padding: 5px 10px;
+    padding: 5px 10px;
-  border-radius: 20px;
+    border-radius: 20px;
-  background-color: var(--white);
+    background-color: var(--white);
 }

ui/src/lib/navbar/navbar.tsx

@@ -7,11 +7,9 @@ export interface NavbarProps {}
 export function Navbar(props: NavbarProps) {
   return (
     <div className={styles.wrapper}>
-      <Link to={"/"} className={styles.logo}>Logo</Link>
       <ul className={styles.container}>
-        <li>link1</li>
+        <li><Link to="/">Камера</Link></li>
-        <li>link2</li>
+        <li><Link to="/statistics">Статистика</Link></li>
-        <li>link3</li>
       </ul>
     </div>
   );