Note Form

frontend/src/App.jsx

@@ -1,23 +1,23 @@
 import { Routes, Route } from 'react-router-dom'
 import MainPage from './pages/MainPage'
-import NoteList from './components/NoteList'
+import NoteList from './pages/NoteList'
 import Form from './components/Form'
 import Auth from './pages/Auth'
+import NoteForm from './pages/NoteForm'
 
 function App() {
-
   return (
     <Routes>
         <Route path="/" element={<MainPage />}>
             <Route path="" element={<NoteList />}/>
-            <Route path="create" element={<h1>Create</h1>} />
-            <Route path="update" element={<h1>Update</h1>} />
+            <Route path="create" element={<NoteForm />}/>
+            <Route path="details/:id" element={<h1>Update</h1>}/>
         </Route>
         <Route path="/" element={<Auth />}>
-            <Route path="register" element={<Form type={'register'}/>}/>
-            <Route path="login" element={<Form type={'login'}/>} />
+            <Route path="register" element={<Form type={'register'} />}/>
+            <Route path="login" element={<Form type={'login'} />}/>
         </Route>
-        <Route path="*" element={<h1>Not Found</h1>} />
+        <Route path="*" element={<h1>Not Found</h1>}/>
     </Routes>
   )
 }

frontend/src/components/Button.jsx

@@ -1,13 +1,19 @@
 import '../styles/Button.css';
 import add from '../assets/add.png';
+import PropTypes from 'prop-types';
 
-const Button = () => {
+const Button = ({type, onClick}) => {
   return (
-    <button className='btn'>
+    <button className='btn' onClick={onClick}>
         <img src={add} alt='icon' />
-        <p>Add note</p>
+        <p>{type} note</p>
     </button>
   )
 }
 
+Button.propTypes = {
+    type: PropTypes.string.isRequired,
+    onClick: PropTypes.func.isRequired
+}
+
 export default Button;

frontend/src/components/Form.jsx

@@ -16,7 +16,7 @@ const Form = ({ type, handleForm }) => {
                 <Input type="text" placeholder="Username" name='username' />
                 <Input type="password" placeholder="Password" name='password' />
                 <div className="form-footer">
-                    <button type="submit" onClick={handleForm}>{type === 'login' ? 'Login' : 'Register'}</button>
+                    <button onClick={handleForm}>{type === 'login' ? 'Login' : 'Register'}</button>
                 </div>
             </form>
         </div>

frontend/src/components/Navbar.jsx

@@ -7,7 +7,7 @@ const Navbar = () => {
     <div className="navbar-container">
         <div className="navbar-search">
             <img src={search} alt="search" />
-            <input type="text" placeholder="Search" />
+            <input type="search" placeholder="Search" />
         </div>
         <div className="navbar-profile">
             <img src={profile} alt="profile" />
@@ -16,4 +16,4 @@ const Navbar = () => {
   )
 }
 
-export default Navbar;
+export default Navbar;

frontend/src/components/TextArea.jsx

@@ -0,0 +1,12 @@
+import '../styles/TextArea.css'
+
+const TextArea = () => {
+  return (
+    <div className='textarea-container'>
+        <label>Take a note...</label>
+        <textarea rows='20' name='content'/>
+    </div>
+  )
+}
+
+export default TextArea

frontend/src/pages/NoteForm.jsx

@@ -0,0 +1,26 @@
+import Button from '../components/Button'
+import Input from '../components/Input';
+import TextArea from '../components/TextArea';
+import '../styles/NoteForm.css';
+
+const NoteForm = () => {
+
+    const onClick = (e) => {
+        e.preventDefault();
+        console.log('Add note button clicked');
+    }
+
+  return (
+    <div className="note-form-container">
+        <form className="note-form">
+            <Input type="text" placeholder="Title" name='title'/>
+            <TextArea />
+            <div className='note-form-footer'>
+                <Button type='Add' onClick={onClick}/>
+            </div>
+        </form>
+    </div>
+  )
+}
+
+export default NoteForm

frontend/src/components/NoteList.jsx → frontend/src/pages/NoteList.jsx

@@ -1,4 +1,4 @@
-import NoteCard from './NoteCard'
+import NoteCard from '../components/NoteCard'
 import '../styles/NoteList.css'
 
 export default function NoteList() {

frontend/src/styles/Form.css

@@ -1,3 +1,22 @@
 .form-container {
     width: 100%;
 }
+
+.form-footer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    align-content: center;
+    margin: 10px;
+}
+
+.form-footer button {
+    padding: 10px 20px;
+    border-radius: 10px;
+    border: none;
+    outline: none;
+    color: #0d1b2a;
+    cursor: pointer;
+    background-color: #ffbe0b;
+    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+}

frontend/src/styles/Input.css

@@ -27,22 +27,3 @@
     margin-bottom: 5px;
     color: #0d1b2a;
 }
-
-.form-footer {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    align-content: center;
-    margin: 10px;
-}
-
-.form-footer button {
-    padding: 10px 20px;
-    border-radius: 10px;
-    border: none;
-    outline: none;
-    color: #0d1b2a;
-    cursor: pointer;
-    background-color: #ffbe0b;
-    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
-}

frontend/src/styles/NoteForm.css

@@ -0,0 +1,11 @@
+.note-form-container {
+    width: 100%;
+}
+
+.note-form-footer {
+    display: flex;
+    justify-content: start;
+    align-items: center;
+    align-content: center;
+    margin: 10px;
+}

frontend/src/styles/TextArea.css

@@ -0,0 +1,29 @@
+.textarea-container {
+    width: 100%;
+    padding: 5px;
+    margin: 15px;
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    align-items: start;
+    align-content: center;
+    border-radius: 4px;
+}
+
+.textarea-container textarea {
+    width: 80%;
+    padding: 10px;
+    border: 1px solid #e0e1dd;
+    border-radius: 4px;
+    outline: none;
+    background-color: #f8f9fa;
+}
+
+.textarea-container textarea:focus {
+    border: 1px solid #0d1b2a;
+}
+
+.textarea-container label {
+    margin-bottom: 5px;
+    color: #0d1b2a;
+}

frontend/src/styles/base.css

@@ -1,6 +1,24 @@
+@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap');
+
 body {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     background-color: #e0e1dd;
+    font-family: 'Kalam', cursive;
+    font-size: 18px;
+}
+
+input[type="search"] {
+    font-size: 16px;
+}
+
+input, button {
+    font-family: 'Kalam', cursive;
+    font-size: 18px;
+}
+
+textarea {
+    font-family: 'Kalam', cursive;
+    font-size: 18px;
 }