added links to each repository entry

src/App.tsx

@@ -3,6 +3,7 @@ import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import CheckENVRoute from "./CheckENVRoute";
 import Home from "./components/home/Home";
 import Login from "./components/Login";
+import NotFound from "./components/NotFound";
 import RepositoryInfo from "./components/repositoryInfo/RepositoryInfo";
 import ProtectedRoute from "./ProtectedRoute";
 
@@ -15,6 +16,7 @@ const App: React.FC = () => {
           <Route element={<ProtectedRoute />}>
             <Route path="/" element={<Home />} />
             <Route path="/repository/*" element={<RepositoryInfo />} />
+            <Route path="*" element={<NotFound />} />
           </Route>
         </Route>
       </Routes>

src/components/ErrorENV.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 
-const Home: React.FC = () => {
+const ErrorENV: React.FC = () => {
     return(
         <h1>Environment variable REGISTRY_URL not set!</h1>
     );
 };
 
-export default Home;
+export default ErrorENV;

src/components/NotFound.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+const NotFound: React.FC = () => {
+    return(
+        <h1>404 Not Found!</h1>
+    );
+};
+
+export default NotFound;

src/components/home/RepositoryEntry.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { Link } from "react-router-dom";
 import { ListItemButton, Grid, ListItemText } from "@mui/material";
 import Tag from "../../interfaces/Tag";
 import Repository from "../../interfaces/Repositoriy";
@@ -12,7 +13,8 @@ const RepositoryItem: React.FC<Props> = (props: Props) => {
     
     return (
         <ListItemButton 
-            component="a" 
+            component={Link}
+            to={"/repository/" + props.repository.name}
         >
             {/* <Box sx={{ display: "flex", flexDirection: "column" }}>
             </Box> */}

src/components/navbar/NavBar.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { useEffect } from "react";
+import { NavLink } from "react-router-dom";
 import { AppBar, Container, Toolbar, Typography, Box, IconButton, Menu, MenuItem , Tooltip, Avatar, Snackbar, Alert} from "@mui/material";
 import axios from "../../api/axios";
 import useAuth from "../../hooks/useAuth";
@@ -152,10 +153,12 @@ const NavBar: React.FC = () => {
         <Container maxWidth={false} sx={{ m: 0, width: '100%' }}>
           <Toolbar disableGutters>
             <Typography
+              className="homeLink"
               variant="h6"
               noWrap
-              component="div"
+              component={NavLink}
-              sx={{ mr: 2, display: 'flex' }}
+              to="/"
+              sx={{ mr: 2, display: 'flex', textDecoration: "none" }}
             >
               Docker Registry
             </Typography>

src/components/repositoryInfo/RepositoryInfo.tsx

@@ -1,15 +1,22 @@
 import React from "react";
 import { useLocation } from "react-router-dom";
 import { ListItemButton, Box, Typography, Grid, ListItemText } from "@mui/material";
+import useRepositories from "../../hooks/useRepositories";
 import Tag from "../../interfaces/Tag";
 import Repository from "../../interfaces/Repositoriy";
+import NotFound from "../NotFound";
 
 const RepositoryInfo: React.FC = () => {
-    const location = useLocation()
+    const location = useLocation();
+    const path = location.pathname;
+    const  { repositories } = useRepositories();
+    const repository = repositories.find((element) => (element.name === path.slice(12,path.length)));
     
-    return (
+    return (repository ? (
-        <h1>{location.pathname.slice(12,location.pathname.length)}</h1>
+        <h1>{repository?.tags.map((tag) => (tag.label)).join(" ")}</h1>
-    );
+    ) : (
+        <NotFound />
+    ));
 }
 
 export default RepositoryInfo;

src/style/layouts/_header.sass

@@ -1,5 +1,7 @@
 .navbar
     margin: 0
+    .homeLink
+        color: white
     .centerText
         text-align: center
         width: 90%

src/style/style.css

@@ -10,6 +10,10 @@ a {
   margin: 0;
 }
 
+.navbar .homeLink {
+  color: white;
+}
+
 .navbar .centerText {
   text-align: center;
   width: 90%;

src/style/style.css.map

@@ -1,6 +1,6 @@
 {
     "version": 3,
-    "mappings": "AG8CA,AAAA,WAAW,CAAC;EACR,KAAK,EAAE,IAAI;CAAG;;AAElB,AAAA,CAAC,CAAC;EACE,eAAe,EAAE,IAAI;CAAG;;AElD5B,AAAA,OAAO,CAAC;EACJ,MAAM,EAAE,CAAC;CAGU;;AAJvB,AAEI,OAFG,CAEH,WAAW,CAAC;EACR,UAAU,EAAE,MAAM;EAClB,KAAK,EAAE,GAAG;CAAG;;AGJrB,AACI,YADQ,CACR,eAAe,CAAC;EACZ,SAAS,EAAE,GAAG;EACd,MAAM,EAAE,IAAI;CAAG;;ACHvB,AACI,MADE,CACF,eAAe,CAAC;EACZ,WAAW,EAAE,MAAM;EACnB,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,GAAG;EACf,SAAS,EAAE,cAAc;CAeS;;AApB1C,AAMQ,MANF,CACF,eAAe,GAKT,CAAC,CAAC;EACA,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,MAAM;CAAG;;AAR7B,AASQ,MATF,CACF,eAAe,CAQX,YAAY,CAAC;EACT,OAAO,EAAE,YAAY;EACrB,UAAU,EAAE,MAAM;EAClB,MAAM,EAAE,IAAI;EACZ,SAAS,EAAE,IAAI;CAAG;;AAb9B,AAcQ,MAdF,CACF,eAAe,CAaX,UAAU,CAAC;EACP,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,GAAG;CACpB;;AAjBF,AAkBQ,MAlBF,CACF,eAAe,CAiBX,eAAe,CAAC;EACZ,MAAM,EAAE,IAAI;EACZ,gBAAgB,EAAE,OAAO;CAAG;;ACpBxC,AAAA,QAAQ,CAAC;EACL,SAAS,EAAE,GAAG;EACd,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,GAAG;CAEU;;AAL7B,AAII,QAJI,CAIJ,eAAe,CAAC;EACZ,UAAU,EAAE,IAAI;CAAG",
+    "mappings": "AG8CA,AAAA,WAAW,CAAC;EACR,KAAK,EAAE,IAAI;CAAG;;AAElB,AAAA,CAAC,CAAC;EACE,eAAe,EAAE,IAAI;CAAG;;AElD5B,AAAA,OAAO,CAAC;EACJ,MAAM,EAAE,CAAC;CAKU;;AANvB,AAEI,OAFG,CAEH,SAAS,CAAC;EACN,KAAK,EAAE,KAAK;CAAG;;AAHvB,AAII,OAJG,CAIH,WAAW,CAAC;EACR,UAAU,EAAE,MAAM;EAClB,KAAK,EAAE,GAAG;CAAG;;AGNrB,AACI,YADQ,CACR,eAAe,CAAC;EACZ,SAAS,EAAE,GAAG;EACd,MAAM,EAAE,IAAI;CAAG;;ACHvB,AACI,MADE,CACF,eAAe,CAAC;EACZ,WAAW,EAAE,MAAM;EACnB,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,GAAG;EACf,SAAS,EAAE,cAAc;CAeS;;AApB1C,AAMQ,MANF,CACF,eAAe,GAKT,CAAC,CAAC;EACA,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,MAAM;CAAG;;AAR7B,AASQ,MATF,CACF,eAAe,CAQX,YAAY,CAAC;EACT,OAAO,EAAE,YAAY;EACrB,UAAU,EAAE,MAAM;EAClB,MAAM,EAAE,IAAI;EACZ,SAAS,EAAE,IAAI;CAAG;;AAb9B,AAcQ,MAdF,CACF,eAAe,CAaX,UAAU,CAAC;EACP,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,GAAG;CACpB;;AAjBF,AAkBQ,MAlBF,CACF,eAAe,CAiBX,eAAe,CAAC;EACZ,MAAM,EAAE,IAAI;EACZ,gBAAgB,EAAE,OAAO;CAAG;;ACpBxC,AAAA,QAAQ,CAAC;EACL,SAAS,EAAE,GAAG;EACd,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,GAAG;CAEU;;AAL7B,AAII,QAJI,CAIJ,eAAe,CAAC;EACZ,UAAU,EAAE,IAAI;CAAG",
     "sources": [
         "style.sass",
         "_variables.sass",