Dorsuplanner_A_Malinab

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 genmancoder
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package.json

@@ -12,6 +12,7 @@
     "@types/react-dom": "^18.0.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.4.2",
     "react-scripts": "5.0.1",
     "typescript": "^4.7.4",
     "web-vitals": "^2.1.4"
@@ -39,5 +40,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.12",
+    "postcss": "^8.4.18",
+    "tailwindcss": "^3.2.1"
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/App.tsx

@@ -1,25 +1,29 @@
 import React from 'react';
-import logo from './logo.svg';
 import './App.css';
+import {BrowserRouter, Routes, Route} from 'react-router-dom'
+
+import Header from './components/Header';
+import About from './pages/About';
+import Developers from './pages/Developers';
+import Home from './pages/Home';
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <>
+    <BrowserRouter>
+      <Header/>
+      <Routes>
+        <Route path='/' element={<Home/>}>
+        </Route>
+        <Route path='/developers' element={<Developers/>}>
+        </Route>
+        <Route path='/about' element={<About/>}>
+        </Route>
+      </Routes>
+
+
+    </BrowserRouter>
+  </>
   );
 }
 

src/components/Header.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { Link } from "react-router-dom";
+const Header = () => {
+  return (
+    <header>
+        <nav className="flex flex-col md:flex-row justify-between items-center bg-blue-400 text-white px-20 md:h-12">
+            <h1>DORSU Planner App.</h1>
+
+            <ul id="mobile-menu" className="flex flex-col md:flex-row md:flex justify-between items-center w-56 sm:w-auto">
+              <li className='mr-4'>
+                <Link to="/">Home</Link>
+              </li>
+              <li className='mr-4'>
+                <Link to="/developers">Developers</Link>
+              </li>
+              <li className='mr-4'>
+                <Link to="/about">About</Link>
+              </li>
+            </ul>
+        </nav>
+
+    </header>
+  )
+}
+
+export default Header

src/index.css

@@ -11,3 +11,8 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
+
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
@@ -13,7 +13,3 @@ root.render(
   </React.StrictMode>
 );
 
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

src/pages/About.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+const About = () => {
+  return (
+    <div className='container mx-auto'>
+        <h1 className='font-bold p-5'>About</h1>
+        <p className='p-5'>Contents of about to follow.</p>
+    </div>
+  )
+}
+
+export default About

src/pages/Developers.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+
+const Developers = () => {
+  return (
+    <div className='container mx-auto p-5'>
+        <h1>Developers</h1>
+        <div className='p-5 m-5 grid grid-cols-6 gap-2'>            
+                {/* Add your profile here. You can upload your image to the repo under "images"  directory
+                    and link it here.                
+                */}
+                 <img src="image/davemalinab.png"/>
+                {/* grid item */}
+                <div className="flex flex-wrap justify-center">
+                    <div className="w-64 sm:w-64 px-4">
+                        <img src="https://avatars.githubusercontent.com/u/74034797?s=400&u=8d250db9bceb4f7415526ea5b276c203f10e3fa9&v=4" alt="..." className="shadow rounded-full max-w-full h-auto align-middle border-none" />
+                    </div>
+                    <h3 className='font-bold mr-1'>Dave S. Malinab, </h3>
+                    <p className='font-thin italic'>Developer</p>
+                </div>           
+                {/* grid item */}  
+
+
+
+        </div>
+    </div>
+  )
+}
+
+export default Developers

src/pages/Home.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+const Home = () => {
+  return (
+    <div className='container mx-auto'>
+        <h1 className='font-bold p-5'>Home</h1>
+        <p className='p-5'>Contents of homepage to follow.</p>
+    </div>
+  )
+}
+
+export default Home

tailwind.config.js

@@ -0,0 +1,10 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}