Zainab Abdul Kareem

package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "cra-template": "1.2.0",
     "react": "^18.2.0",
+    "react-datepicker": "^4.8.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1"
   },
@@ -31,5 +32,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "web-vitals": "^3.0.4"
   }
 }

src/App.js

@@ -1,12 +1,18 @@
 import './App.css';
+import Patients from './pages/patients';
+import Search from './pages/Search';
+import Login from './pages/login';
+import Signup from './pages/Signup';
+
+function App() {
+
 
-const App = ()=>{
-  // State here
   return (
     <div className="App">
-      {/* Add new patient FORM */}
-      {/* Search input */}
-      {/* Table */}
+         <Login/>
+         <Signup/>
+         <Search/>
+         <Patients/>
     </div>
   );
 }

src/Components/Button.jsx

@@ -0,0 +1,3 @@
+export const Button = ({onClick, children})=>{
+    return  <button onClick={onClick}>{children}</button>;
+}

src/Components/PatientCard.jsx

@@ -0,0 +1,22 @@
+import { Button } from "./Button";
+
+const PCard = (props)=>{
+    const helloFunc = ()=>alert('Hello')
+    console.log(props)
+    const patient = props.data
+    //let cls = patient.gender == 'm'?'bg-blue':'bg-pink';
+    return <div>
+        <div class="grid grid-cols-4 gap-4">
+          <div class="flex flex-col justify-between ">
+             <p class="text-center text-gray-900 font-bold text-xl mb-2">{patient.full_name}</p>
+        </div>
+        <div>
+           <p class="text-center text-gray-900 font-bold text-xl mb-2">{patient.gender}</p>
+        </div>
+        <p class="text-center text-gray-900 font-bold text-xl mb-2">{patient.phone}</p>  
+        </div>
+    </div>
+}
+
+
+export default PCard;

src/pages/Patient.js

@@ -0,0 +1,18 @@
+import { useEffect } from "react";
+import { useParams } from "react-router-dom";
+
+export const Patient = (props)=>{
+
+    const par = useParams()
+
+    useEffect(() => {
+        // call api
+        // paitents/id GET via, axios.get('URL/patients/id').then(res)
+        // response
+        // change state
+        return () => {
+
+        };
+    }, []);
+    return <p>Patient Profile: {par.id}</p>;
+}

src/pages/Search.js

@@ -0,0 +1,37 @@
+import React, {useState} from 'react'
+import PATIENTS from './patients'
+
+const SearchBar = () => {
+    const [searchInput, setSearchInput] = useState("");
+
+    const handleChange = (e) => {
+    e.preventDefault();
+    setSearchInput(e.target.value);
+    };
+    if (searchInput.length > 0) {
+      PATIENTS.filter((Patient) => {
+      return Patient.full_name.match(searchInput);
+        });
+    }
+
+return <div>
+    <input type="search" placeholder="Search here" onChange={handleChange} value={searchInput} />
+        <table>
+            <tbody class="dark:bg-blue-300">
+               {
+                    PATIENTS && PATIENTS.map((item,index)=>{
+                        return <tr class="hover:bg-blue-400 dark:hover:bg-blue-400">
+                                    <td class="py-3 px-6 text-xs font-medium tracking-wider text-left uppercase dark:text-white">{item.full_name}</td>
+                                    <td class="py-3 px-6 text-xs font-medium tracking-wider text-left uppercase dark:text-white">{item.phone}</td>
+                                    <td class="py-3 px-6 text-xs font-medium tracking-wider text-left uppercase dark:text-white">{item.birth_date}</td>
+                                    <td class="py-3 px-6 text-xs font-medium tracking-wider text-left uppercase dark:text-white">{item.gender}</td>
+                                </tr>
+               })
+               }
+            </tbody>
+        </table>
+</div>
+};
+
+export default SearchBar;
+