Merge pull request #28 from NitBravoA92/create-myprofile-setup

Create empty My profile - Setup

src/App.js

@@ -1,8 +1,11 @@
+import { Routes, Route } from 'react-router-dom';
+import MyProfile from './views/MyProfile';
+
 function App() {
   return (
-    <div className="App">
-      <h1>Space Travelers Hub</h1>
-    </div>
+    <Routes>
+      <Route path="my-profile" element={<MyProfile />} />
+    </Routes>
   );
 }
 

src/assets/styles/index.css

@@ -29,6 +29,18 @@ body {
   letter-spacing: normal;
 }
 
+ul {
+  list-style: none;
+}
+
+main {
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  padding: 3rem 0;
+}
+
 .container {
   width: 100%;
   margin: 0 auto;

src/assets/styles/responsive.css

@@ -0,0 +1,28 @@
+@media (min-width: 576px) {
+  .container {
+    max-width: 540px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 720px;
+  }
+
+  .navbar {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
+
+@media (min-width: 992px) {
+  .container {
+    max-width: 960px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .container {
+    max-width: 1140px;
+  }
+}

src/components/Header.jsx

@@ -1,12 +1,15 @@
 import AppLogo from './AppLogo';
+import MenuLink from './MenuLink';
 import '../assets/styles/Header.css';
 
 const Header = () => (
   <header>
     <div className="container">
       <nav className="navbar">
         <AppLogo />
-        <ul id="navigation" />
+        <ul id="navigation">
+          <MenuLink url="/my-profile" pageName="My Profile" />
+        </ul>
       </nav>
     </div>
   </header>

src/index.js

@@ -1,13 +1,17 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import './index.css';
+import { BrowserRouter } from 'react-router-dom';
+import './assets/styles/index.css';
 import App from './App';
+import './assets/styles/responsive.css';
 import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </React.StrictMode>,
 );
 

src/views/Layout.jsx

@@ -0,0 +1,17 @@
+import PropTypes from 'prop-types';
+import Header from '../components/Header';
+
+const Layout = ({ children }) => (
+  <>
+    <Header />
+    <main>
+      { children }
+    </main>
+  </>
+);
+
+Layout.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default Layout;

src/views/MyProfile.jsx

@@ -0,0 +1,9 @@
+import Layout from './Layout';
+
+const MyProfile = () => (
+  <Layout>
+    <section id="myProfile" />
+  </Layout>
+);
+
+export default MyProfile;