⚛️ feat: add TextInput and RadioInput basic component

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);
+  }
+}

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;

client/src/components/signup/signUp.jsx

@@ -1,14 +1,36 @@
+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">
         <h2>تسجيل حساب</h2>
         <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" />

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;