From 4cda6ccdcb7c413cdf7dfd390068c95c062c600f Mon Sep 17 00:00:00 2001
From: Kamran <Yousef.shaikhan@gmail.com>
Date: Thu, 27 Apr 2023 12:10:41 +0100
Subject: [PATCH] added_form

added form in main

Co-Authored-By: Roman-Hal <85693082+Roman-Hal@users.noreply.github.com>
Co-Authored-By: Anosh Malik <anoshmalik.am@gmail.com>
Co-Authored-By: azadehroshan <105980239+azadehroshan@users.noreply.github.com>
---
 client/src/Components/MainContent.js | 100 +++++++++++++++++++++++++++
 client/src/pages/Home.js             |  16 +++--
 2 files changed, 109 insertions(+), 7 deletions(-)
 create mode 100644 client/src/Components/MainContent.js

diff --git a/client/src/Components/MainContent.js b/client/src/Components/MainContent.js
new file mode 100644
index 0000000..9a755be
--- /dev/null
+++ b/client/src/Components/MainContent.js
@@ -0,0 +1,100 @@
+import React from "react";
+// import { useState } from "react";
+import Button from "react-bootstrap/Button";
+import { Card, Form, Col, Container, Row } from "react-bootstrap";
+
+const MainContent = () => {
+	// const [val, setVal] = useState("");
+	return (
+		<Container style={{ marginTop: "6%" }}>
+			<Row>
+				<Col>
+					<Card>
+						<Card.Body>
+							<Form>
+								<Form.Group controlId="exampleForm.ControlTextarea1">
+									{/* <Form.Label>Textarea 1</Form.Label> */}
+									<Form.Control
+										as="textarea"
+										rows={10}
+										placeholder="write your message here"
+									/>
+								</Form.Group>
+								<Row
+									lg={2}
+									xl={2}
+									className="ms-auto"
+									style={{ marginTop: "3%", marginRight: "1%" }}
+								>
+									<Button
+										variant="danger"
+										className="ms-auto"
+										style={{ width: "100px" }}
+									>
+										CLEAR
+									</Button>
+									<Button
+										variant="danger"
+										style={{ width: "100px", marginLeft: "2%" }}
+									>
+										CHECK
+									</Button>
+								</Row>
+							</Form>
+						</Card.Body>
+					</Card>
+				</Col>
+				<Col>
+					<Card>
+						<Card.Body>
+							<Form>
+								<Form.Group controlId="exampleForm.ControlTextarea2">
+									{/* <Form.Label>Textarea 2</Form.Label> */}
+									<Form.Control as="textarea" rows={10} />
+								</Form.Group>
+								<Row
+									lg={1}
+									xl={1}
+									className="ms-auto"
+									style={{ marginTop: "3%", marginRight: "1%" }}
+								>
+									<Button
+										variant="danger"
+										className="ms-auto"
+										style={{ width: "100px" }}
+									>
+										SAVE
+									</Button>
+									<Button
+										variant="danger"
+										style={{ width: "100px", marginLeft: "2%" }}
+									>
+										COPY
+									</Button>
+								</Row>
+							</Form>
+						</Card.Body>
+					</Card>
+				</Col>
+			</Row>
+		</Container>
+	);
+};
+
+export default MainContent;
+
+{
+	/* <p>Hello World</p>
+<label htmlFor="review">Review</label>
+<textarea
+  value={val}
+  onChange={(e) => setVal(e.target.value)}
+  spellCheck={true}
+  id="review"
+  name="review"
+  placeholder="write your message here"
+  rows="10"
+  cols="50"
+></textarea>
+<Button variant="primary">BootstrapButton</Button> */
+}
diff --git a/client/src/pages/Home.js b/client/src/pages/Home.js
index 55f715c..75ac668 100644
--- a/client/src/pages/Home.js
+++ b/client/src/pages/Home.js
@@ -1,15 +1,16 @@
 //import { useEffect, useState } from "react";
-import { useState } from "react";
+// import { useState } from "react";
 //import { Link } from "react-router-dom";
 import Header from "../Components/Header";
 import Footer from "../Components/Footer";
-import Button from "react-bootstrap/Button";
+import MainContent from "../Components/MainContent";
+// import Button from "react-bootstrap/Button";
 
 import "./Home.css";
 // import logo from "./logo.svg";
 
 export function Home() {
-	const [val, setVal] = useState("");
+	// const [val, setVal] = useState("");
 	/*const [message, setMessage] = useState("Loading...");
 
 	useEffect(() => {
@@ -31,11 +32,11 @@ export function Home() {
 	return (
 		<div>
 			<Header />
-			<p>Hello World</p>
+			{/* <p>Hello World</p> */}
 			{/* this the label */}
-			<label htmlFor="review">Review</label>
+			{/* <label htmlFor="review">Review</label> */}
 			{/*textarea with spellcheck function*/}
-			<textarea
+			{/* <textarea
 				value={val}
 				onChange={(e) => setVal(e.target.value)}
 				spellCheck={true}
@@ -45,7 +46,8 @@ export function Home() {
 				rows="10"
 				cols="50"
 			></textarea>
-			<Button variant="primary">BootstrapButton</Button>
+			<Button variant="primary">BootstrapButton</Button> */}
+			<MainContent />
 
 			<Footer />
 		</div>