From 79cd4cec9620ba63093d26a44802aeadd23c0cb1 Mon Sep 17 00:00:00 2001
From: amir-kedis <amir.kedis@gmail.com>
Date: Sat, 23 Dec 2023 17:28:59 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9A=9B=EF=B8=8F=20feat:=20add=20TextInput=20?=
 =?UTF-8?q?and=20RadioInput=20basic=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/assets/styles/components/Inputs.scss  | 34 ++++++++++
 client/src/components/common/Inputs.jsx       | 67 +++++++++++++++++++
 client/src/components/signup/signUp.jsx       | 22 ++++++
 client/src/components/signup/signUp.scss      |  2 +-
 4 files changed, 124 insertions(+), 1 deletion(-)
 create mode 100644 client/src/assets/styles/components/Inputs.scss
 create mode 100644 client/src/components/common/Inputs.jsx

diff --git a/client/src/assets/styles/components/Inputs.scss b/client/src/assets/styles/components/Inputs.scss
new file mode 100644
index 00000000..448be953
--- /dev/null
+++ b/client/src/assets/styles/components/Inputs.scss
@@ -0,0 +1,34 @@
+.input {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  color: var(--grey-100);
+  font-size: 1rem;
+  direction: rtl;
+  width: 100%;
+
+  .radio-buttons {
+    display: flex;
+    flex-direction: row;
+    gap: 0.5rem;
+    width: 100%;
+    margin: 0.5rem 0;
+  }
+
+  input[type="text"],
+  input[type="password"],
+  input[type="email"],
+  input[type="number"],
+  input[type="tel"],
+  input[type="date"],
+  input[type="time"] {
+    width: 100%;
+    outline: none;
+    border-radius: 4px;
+    border: 1px solid var(--grey-600, #4b5563);
+    background: var(--grey-700, #374151);
+    padding: 0 4px;
+    line-height: 1rem;
+    color: var(--grey-100);
+  }
+}
diff --git a/client/src/components/common/Inputs.jsx b/client/src/components/common/Inputs.jsx
new file mode 100644
index 00000000..5e4c69e8
--- /dev/null
+++ b/client/src/components/common/Inputs.jsx
@@ -0,0 +1,67 @@
+import "./../../assets/styles/components/Inputs.scss";
+
+import PropTypes from "prop-types";
+
+function TextInput({
+  label,
+  type,
+  name,
+  value,
+  onChange,
+  placeholder,
+  required,
+}) {
+  return (
+    <label className="input input--text">
+      {label}
+      <input
+        type={type}
+        name={name}
+        placeholder={placeholder}
+        value={value}
+        onChange={onChange}
+        required={required}
+      />
+    </label>
+  );
+}
+TextInput.propTypes = {
+  label: PropTypes.string.isRequired,
+  type: PropTypes.string,
+  name: PropTypes.string,
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  placeholder: PropTypes.string,
+  required: PropTypes.bool,
+};
+function RadioInput({ label, name, required, valuesArr, onChange }) {
+  return (
+    <label className="input input--radio">
+      {label}
+      <div className="radio-buttons">
+        {valuesArr.map((value) => (
+          <div key={value}>
+            <input
+              type="radio"
+              name={name}
+              value={value}
+              onChange={onChange}
+              required={required}
+            />
+            <span>{value}</span>
+          </div>
+        ))}
+      </div>
+    </label>
+  );
+}
+RadioInput.propTypes = {
+  label: PropTypes.string.isRequired,
+  name: PropTypes.string,
+  valuesArr: PropTypes.array,
+  onChange: PropTypes.func,
+  required: PropTypes.bool,
+};
+
+export { RadioInput };
+export default TextInput;
diff --git a/client/src/components/signup/signUp.jsx b/client/src/components/signup/signUp.jsx
index c6829821..7e7c74ef 100644
--- a/client/src/components/signup/signUp.jsx
+++ b/client/src/components/signup/signUp.jsx
@@ -1,7 +1,14 @@
+import { useState } from "react";
 import Button from "../common/Button";
+import TextInput, { RadioInput } from "../common/Inputs";
 import "./signUp.scss";
 
 export default function SignUp() {
+  const [firstName, setFirstName] = useState("");
+  const [lastName, setLastName] = useState("");
+  const [middleName, setMiddleName] = useState("");
+  const [gender, setGender] = useState("");
+
   return (
     <div className="signUp">
       <div className="hero">
@@ -9,6 +16,21 @@ export default function SignUp() {
         <div className="container">
           <div className="card">
             <h6>الاسم</h6>
+            <TextInput
+              label="الاسم الأول"
+              type="text"
+              name="firstName"
+              value={firstName}
+              placeholder="أكتب أسمك الاول"
+              onChange={(e) => setFirstName(e.target.value)}
+            />
+            <RadioInput
+              label="النوع"
+              name="gender"
+              required={true}
+              valuesArr={["أنثى", "ذكر"]}
+              onChange={(e) => setGender(e.target.value) } 
+            />
             <label className="input-field">
               الاسم الأول
               <input type="text" />
diff --git a/client/src/components/signup/signUp.scss b/client/src/components/signup/signUp.scss
index cfbf045c..bf589225 100644
--- a/client/src/components/signup/signUp.scss
+++ b/client/src/components/signup/signUp.scss
@@ -16,7 +16,6 @@
     padding: 1.5rem 0.4375rem;
     flex-direction: column;
     justify-content: center;
-    align-items: center;
     gap: 1.0625rem;
   }
 
@@ -30,6 +29,7 @@
     justify-content: center;
     align-items: center;
     gap: 0.875rem;
+    padding: 10px;
     .input-field {
       display: flex;
       width: 14.16319rem;