front/src/components/ClickableLink.tsx

@@ -0,0 +1,5 @@
+export default function ClickableLink(){
+    <div>
+        prout
+    </div>
+}

front/src/components/LogoButton.tsx

@@ -0,0 +1,11 @@
+function Logo({logo}){
+    return (
+        <img src={logo} />
+    )
+ }
+
+export default function LogoButton ({url, logo}) {
+    return (
+    <a href={url}><Logo logo={logo}/></a>
+    )
+}

front/src/components/NavBar.tsx

@@ -0,0 +1,7 @@
+import LogoButton from '../components/LogoButton.tsx'
+
+export default function NavBar(){
+    return (<div>
+        <LogoButton url="https://archlinux.org" logo ="https://archlinux.org/static/hetzner_logo.41114a37d25f.png" />
+    </div>);
+}

front/src/main.tsx

@@ -1,10 +1,11 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
-import App from './App.tsx'
+// import App from './App.tsx'
+import MainPage from './pages/MainPage'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
+    <MainPage />
   </StrictMode>,
 )

front/src/pages/MainPage.tsx

@@ -1,10 +1,9 @@
-
-
+import NavBar from '../components/NavBar.tsx'
 
 export default function MainPage() {
     return (
         <div>
-            <h1>Main Page</h1>
+            <NavBar />
         </div>
     )
 }