From 68c74de1e402feb0944e99f5043bbbb826d5eb13 Mon Sep 17 00:00:00 2001
From: MuhammadKhalilzadeh <muhammadkhalilzadeh1998@gmail.com>
Date: Tue, 7 May 2024 20:26:55 +0330
Subject: [PATCH] Description text field are implemented. Still, there are
 several inconsistencies that are needed to be fixed in future bug fixing
 issues and branchs. Plus, one type of description text fields could not be
 implemented.

---
 .../Description/DescriptionTextField.jsx      | 17 ++++++++--
 .../Description/descriptionTextField.css      | 32 +++++++++++++++++++
 Client/src/screens/PlayGround/PlayGround.jsx  | 11 +++++++
 3 files changed, 58 insertions(+), 2 deletions(-)

diff --git a/Client/src/components/TextFields/Description/DescriptionTextField.jsx b/Client/src/components/TextFields/Description/DescriptionTextField.jsx
index e1fe1d329..13c28783d 100644
--- a/Client/src/components/TextFields/Description/DescriptionTextField.jsx
+++ b/Client/src/components/TextFields/Description/DescriptionTextField.jsx
@@ -1,8 +1,21 @@
 import React from "react";
 import "./descriptionTextField.css";
+import { TextField } from "@mui/material";
 
-function DescriptionTextField() {
-  return <div>DescriptionTextField</div>;
+function DescriptionTextField({ hintText, hasError }) {
+  return (
+    <div className="description-field-holder">
+      <div className="text-field-title">Website</div>
+      <TextField
+        error={hasError}
+        className="description-field-area"
+        multiline
+        rows={4}
+        placeholder="Enter a description..."
+        helperText={hintText}
+      />
+    </div>
+  );
 }
 
 export default DescriptionTextField;
diff --git a/Client/src/components/TextFields/Description/descriptionTextField.css b/Client/src/components/TextFields/Description/descriptionTextField.css
index e69de29bb..9b62fa320 100644
--- a/Client/src/components/TextFields/Description/descriptionTextField.css
+++ b/Client/src/components/TextFields/Description/descriptionTextField.css
@@ -0,0 +1,32 @@
+:root {
+  --color-title-1: #344054;
+  --font-family-1: "Roboto", "Helvetica", "Arial", sans-serif;
+  --text-field-margin-0: 10px 20px;
+}
+
+.description-field-holder {
+  margin: var(--text-field-margin-0);
+  margin-top: 20px;
+}
+
+.text-field-title {
+  color: var(--color-title-1);
+  font-weight: bold;
+  font-family: var(--font-family-1);
+  margin-bottom: 10px;
+}
+
+.description-field-area {
+  font-size: 13px;
+  border-radius: 8px;
+}
+
+.description-field-label {
+  margin-top: 10px;
+  font-family: var(--font-family);
+  font-size: 11px;
+}
+
+.with-error {
+  color: red;
+}
diff --git a/Client/src/screens/PlayGround/PlayGround.jsx b/Client/src/screens/PlayGround/PlayGround.jsx
index 5625265d7..5e04db30e 100644
--- a/Client/src/screens/PlayGround/PlayGround.jsx
+++ b/Client/src/screens/PlayGround/PlayGround.jsx
@@ -3,6 +3,7 @@ import EmailTextField from "../../components/TextFields/Email/EmailTextField";
 import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
 import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
 import WebsiteTextField from "../../components/TextFields/Website/WebsiteTextField";
+import DescriptionTextField from "../../components/TextFields/Description/DescriptionTextField";
 
 // This Component is just for the development and test
 // purposes and just to see what my components look like while development
@@ -42,6 +43,16 @@ function PlayGround() {
         hasCopyButton={true}
         hintText="This is a hint text to help user."
       />
+      <br />
+      <br />
+      <hr />
+      {/* Now, illustration of the Description text fields */}
+      <br />
+      <DescriptionTextField hintText="This is a hint text to help user." />
+      <DescriptionTextField
+        hasError={true}
+        hintText="This is a hint text to help user."
+      />
     </div>
   );
 }