Creating kindergadenName input and tow main buttons

Relates #55

client/src/App/index.js

@@ -1,19 +1,12 @@
 import React from 'react';
-import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
-import NavBar from '../Components/Layout/Navbar';
-import Footer from '../Components/Layout/Footer';
-import Home from '../Pages/HomePage';
+import { BrowserRouter as Router } from 'react-router-dom';
+import KindergartenForm from '../Components/KindergartenForm';
+
 import './style.css';
 
 const App = () => (
   <Router>
-    <NavBar userName="Alaa" isAdmin={false} />
-    <Switch>
-      <Route exact to="/">
-        <Home />
-      </Route>
-    </Switch>
-    <Footer />
+    <KindergartenForm />
   </Router>
 );
 

client/src/Components/KindergartenForm/index.js

@@ -0,0 +1,64 @@
+import React, { useState } from 'react';
+import { Typography } from 'antd';
+import PropTypes from 'prop-types';
+
+import MainInput from '../Common/MainInput';
+import MainButton from '../Common/MainButton';
+
+const { Title } = Typography;
+
+const KindergartenForm = ({ onAdd }) => {
+  const [inputValue, setInputValue] = useState('');
+
+  const onClick = () => {
+    onAdd(inputValue);
+  };
+
+  const onMainInputChange = (e) => {
+    setInputValue(e.target.value);
+  };
+  return (
+    <div>
+      <Title className="price-text" level={5}>
+        اضافة روضة
+      </Title>
+      <hr />
+      <h3>
+        اسم الروضة:
+        <MainInput
+          type="text"
+          height="48px"
+          width="471px"
+          onChange={onMainInputChange}
+        />
+      </h3>
+      <MainButton
+        className="Search-btn red-Search-btn"
+        onClick={onClick}
+        height="52px"
+        width="122px"
+        border="1.6px solid #69938F"
+        backgroundColor="var(--main-color)"
+      >
+        إضافة
+      </MainButton>
+      <MainButton
+        className="Search-btn red-Search-btn"
+        onClick={onClick}
+        height="52px"
+        width="122px"
+        border="1.6px solid #69938F"
+        backgroundColor="#FFF"
+        color="#000"
+      >
+        تجاهل
+      </MainButton>
+    </div>
+  );
+};
+
+export default KindergartenForm;
+
+KindergartenForm.propTypes = {
+  onAdd: PropTypes.func.isRequired,
+};