displays image names

src/App.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import CheckENVRoute from "./CheckENVRoute";
-import Home from "./components/Home";
+import Home from "./components/home/Home";
 import Login from "./components/Login";
 import ProtectedRoute from "./ProtectedRoute";
 

src/components/Home.tsx

@@ -1,13 +0,0 @@
-import React from "react";
-import axios from "../api/axios";
-
-const Home: React.FC = () => {
-
-    
-
-    return(
-        <h1>Home</h1>
-    );
-};
-
-export default Home;

src/components/home/Home.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { useState, useEffect } from "react";
+import { List, ListItemButton, Box, Typography } from "@mui/material";
+import axios from "../../api/axios";
+import useAuth from "../../hooks/useAuth";
+import Repository from "../../interfaces/Repositoriy";
+
+const Home: React.FC = () => {
+    const auth = useAuth();
+
+    const [repositories, setRepositories] = useState<Repository[]>([]);
+
+    const listRepositories = async() => {
+
+        const response = await axios.get(
+            "/_catalog",
+            {
+                auth: {
+                    username: auth.username,
+                    password: auth.password
+                }
+            }
+        );
+
+        let newRepositories: Repository[] = [];
+        response?.data?.repositories.forEach((repositoriyName: string) => {
+            let newRepository: Repository = {
+                name: repositoriyName,
+                tags: []
+            }
+            newRepositories.push(newRepository);
+        });
+        setRepositories(newRepositories);
+
+    };
+
+    useEffect(() => {
+        setInterval(() => listRepositories(), 1000);
+    }, []);
+
+    return(
+        <List style={{ maxHeight: "100%", overflow: "auto" }}>
+            {repositories.map((repositoriy: Repository) => {
+                return(
+                    <ListItemButton 
+                        component="a" 
+                    >
+                        <Box sx={{ display: "flex", flexDirection: "column" }}>
+                            <Typography color="black" variant="h5">{repositoriy.name}</Typography>
+                            <Typography color="white" variant="h6"></Typography>
+                            <Typography color="mistyrose" variant="body1"></Typography>
+                        </Box>
+                    </ListItemButton>
+                );
+            })}
+        </List>
+    );
+};
+
+export default Home;

src/interfaces/Repositoriy.tsx

@@ -0,0 +1,11 @@
+interface Tag {
+    label: string;
+    architecture: string;
+}
+
+interface Repository {
+    name: string;
+    tags: Tag[];
+}
+
+export default Repository;