csoc_dashboard/components/PROFILE/Form.tsx at 86ae04aa6804c4dec003871d466aefd2111b7e1d · techhub-community/csoc_dashboard · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
import React from "react";

function Form() {
  const Style1 = "flex flex-wrap -mx-3 mb-1";
  const Style2 = "w-full px-3";
  const Style3 =
    "block uppercase tracking-wide text-gray-700 text-xs font-bold mb-1";
  const Value = [
    {
      placeholder: "Email",
    },
    {
      placeholder: "USN",
    },
    {
      placeholder: "Phone Number",
    },
    {
      placeholder: "Program",
    },
    {
      placeholder: "Your TechStack",
    },
  ];
  const Style4 =
    "appearance-none block w-full bg-white text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500";

  const proficiencyOptions = [
    { label: "Beginner", id: "inline-radio" },
    { label: "Average", id: "inline-2-radio" },
    { label: "Good", id: "inline-checked-radio1" },
    { label: "Expert", id: "inline-checked-radio2" },
  ];

  return (
    <div className="flex flex-col justify-center items-start mt-28 ml-1 mr-1 md:ml-[21.5vw]">
      <form className="w-full max-w-4xl bg-nav_color p-4 rounded-lg shadow-lg">
        <div className="flex flex-wrap -mx-3 mb-1">
          <div className="w-full md:w-1/2 px-3 mb-6 md:mb-0">
            <label
              className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-1"
              htmlFor="grid-first-name"
            >
              First Name
            </label>
            <input
              className="appearance-none block w-full bg-white text-gray-700 border rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white "
              id="grid-first-name"
              type="text"
              placeholder="Jane"
              readOnly
            />
          </div>
          <div className="w-full md:w-1/2 px-3">
            <label
              className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-1"
              htmlFor="grid-last-name"
            >
              Last Name
            </label>
            <input
              className="appearance-none block w-full bg-white text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
              id="grid-last-name"
              type="text"
              placeholder="Doe"
              readOnly
            />
          </div>
        </div>
        {Value?.map((item, index) => (
          <div key={index}>
            <div className={Style1}>
              <div className={Style2}>
                <label className={Style3} htmlFor="grid-password">
                  {item.placeholder}
                </label>
                <input
                  className={Style4}
                  id="grid-password"
                  type="text"
                  placeholder={item.placeholder}
                  readOnly
                />
              </div>
            </div>
          </div>
        ))}
        <div className="flex flex-wrap -mx-3 mb-1">
          <div className="w-full px-3">
            <label
              className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-1"
              htmlFor="grid-password"
            >
              Proficiency
            </label>
            <div className="flex xs:flex-col items-center ">
              {proficiencyOptions.map((option) => (
                <div
                  className="flex items-center xs:flex-col mr-4"
                  key={option.id}
                >
                  <input
                    id={option.id}
                    type="radio"
                    value=""
                    name="inline-radio-group"
                    className="w-4 h-4 text-orangee accent-orangee xs:flex-col bg-gray-100 border-gray-300  "
                  />
                  <label
                    htmlFor={option.id}
                    className="ml-2 text-sm font-medium xs:flex-col text-gray-900 dark:text-gray-300"
                  >
                    {option.label}
                  </label>
                </div>
              ))}
            </div>
          </div>
        </div>
      </form>
    </div>
  );
}

export default Form;