|
1 | | -import { Grid, TextField } from "@mui/material"; |
| 1 | +import { Grid } from "@mui/material"; |
2 | 2 | import { TabPanel } from "components/Admin/ui/TabPanel"; |
| 3 | +import { InputAdornment, TextField } from "@mui/material"; |
3 | 4 | import Label from "../ui/Label"; |
4 | 5 |
|
| 6 | +const CustomTextFieldComponent = ({ |
| 7 | + id, |
| 8 | + name, |
| 9 | + placeholder, |
| 10 | + value, |
| 11 | + onChange, |
| 12 | + onBlur, |
| 13 | + touched, |
| 14 | + errors, |
| 15 | + startAdornment, |
| 16 | +}) => ( |
| 17 | + <TextField |
| 18 | + id={id} |
| 19 | + sx={{ |
| 20 | + "& .MuiOutlinedInput-root": { |
| 21 | + borderRadius: "4px", |
| 22 | + backgroundColor: "white", |
| 23 | + paddingLeft: "0", |
| 24 | + "& fieldset": { |
| 25 | + borderColor: "grey", |
| 26 | + }, |
| 27 | + "& input::placeholder": { |
| 28 | + color: "#B0BEC5", |
| 29 | + opacity: 1, |
| 30 | + }, |
| 31 | + }, |
| 32 | + "& .MuiInputAdornment-root": { |
| 33 | + backgroundColor: "#F4F6F8", |
| 34 | + padding: "22px 8px 22px 8px", |
| 35 | + borderRight: "1px solid grey", |
| 36 | + borderRadius: "4px 0 0 4px", |
| 37 | + color: "#B0BEC5", |
| 38 | + margin: "-20px 0", |
| 39 | + }, |
| 40 | + }} |
| 41 | + name={name} |
| 42 | + placeholder={placeholder} |
| 43 | + value={value} |
| 44 | + onChange={onChange} |
| 45 | + onBlur={onBlur} |
| 46 | + helperText={touched ? errors : ""} |
| 47 | + error={Boolean(touched && errors)} |
| 48 | + InputProps={{ |
| 49 | + startAdornment: startAdornment && ( |
| 50 | + <InputAdornment position="start">{startAdornment}</InputAdornment> |
| 51 | + ), |
| 52 | + }} |
| 53 | + /> |
| 54 | +); |
| 55 | + |
5 | 56 | export default function ContactDetails({ |
6 | 57 | tabPage, |
7 | 58 | values, |
@@ -34,67 +85,89 @@ export default function ContactDetails({ |
34 | 85 | </Grid> |
35 | 86 | <Grid item sm={6} xs={12}> |
36 | 87 | <div> |
37 | | - <Label id="instagram" label="Instagram" /> |
38 | | - <TextField |
| 88 | + <Label |
| 89 | + id="instagram" |
| 90 | + label="Instagram" |
| 91 | + tooltipTitle="Enter your Instagram username" |
| 92 | + href="https://instagram.com/" |
| 93 | + handle={values.instagram} |
| 94 | + /> |
| 95 | + <CustomTextFieldComponent |
39 | 96 | id="instagram" |
40 | 97 | name="instagram" |
41 | | - placeholder="Instagram" |
| 98 | + placeholder="Instagram username" |
42 | 99 | value={values.instagram} |
43 | 100 | onChange={handleChange} |
44 | 101 | onBlur={handleBlur} |
45 | | - helperText={touched.instagram ? errors.instagram : ""} |
46 | | - error={touched.instagram && Boolean(errors.instagram)} |
| 102 | + touched={touched.instagram} |
| 103 | + errors={errors.instagram} |
| 104 | + startAdornment="https://instagram.com/" |
47 | 105 | /> |
48 | 106 | </div> |
49 | 107 | </Grid> |
50 | 108 | <Grid item sm={6} xs={12}> |
51 | 109 | <div> |
52 | | - <Label id="facebook" label="Facebook" /> |
53 | | - <TextField |
| 110 | + <Label |
| 111 | + id="facebook" |
| 112 | + label="Facebook" |
| 113 | + tooltipTitle="Enter your Facebook username" |
| 114 | + href="https://facebook.com/" |
| 115 | + handle={values.facebook} |
| 116 | + /> |
| 117 | + <CustomTextFieldComponent |
54 | 118 | id="facebook" |
55 | 119 | name="facebook" |
56 | | - placeholder="Facebook" |
| 120 | + placeholder="Facebook username" |
57 | 121 | value={values.facebook} |
58 | 122 | onChange={handleChange} |
59 | 123 | onBlur={handleBlur} |
60 | | - helperText={touched.facebook ? errors.facebook : ""} |
61 | | - error={touched.facebook && Boolean(errors.facebook)} |
| 124 | + touched={touched.facebook} |
| 125 | + errors={errors.facebook} |
| 126 | + startAdornment="https://facebook.com/" |
62 | 127 | /> |
63 | 128 | </div> |
64 | 129 | </Grid> |
65 | 130 | <Grid item sm={6} xs={12}> |
66 | 131 | <div> |
67 | 132 | <Label |
68 | | - id="twitter" |
| 133 | + id="twitter-label" |
69 | 134 | label="Twitter" |
70 | | - tooltipTitle="URL must start with 'https://twitter.com/ or https://x.com/'" |
71 | | - href={values.twitter} |
| 135 | + tooltipTitle="Enter your Twitter username" |
| 136 | + href="https://twitter.com/" |
| 137 | + handle={values.twitter} |
72 | 138 | /> |
73 | | - |
74 | | - <TextField |
| 139 | + <CustomTextFieldComponent |
75 | 140 | id="twitter" |
76 | 141 | name="twitter" |
77 | | - placeholder="Twitter" |
| 142 | + placeholder="Twitter username" |
78 | 143 | value={values.twitter} |
79 | 144 | onChange={handleChange} |
80 | 145 | onBlur={handleBlur} |
81 | | - helperText={touched.twitter ? errors.twitter : ""} |
82 | | - error={touched.twitter && Boolean(errors.twitter)} |
| 146 | + touched={touched.twitter} |
| 147 | + errors={errors.twitter} |
| 148 | + startAdornment="https://twitter.com/" |
83 | 149 | /> |
84 | 150 | </div> |
85 | 151 | </Grid> |
86 | 152 | <Grid item sm={6} xs={12}> |
87 | 153 | <div> |
88 | | - <Label id="pinterest" label="Pinterest" /> |
89 | | - <TextField |
| 154 | + <Label |
| 155 | + id="pinterest" |
| 156 | + label="Pinterest" |
| 157 | + href="https://pinterest.com/" |
| 158 | + handle={values.pinterest} |
| 159 | + tooltipTitle="Enter your Pinterest username" |
| 160 | + /> |
| 161 | + <CustomTextFieldComponent |
90 | 162 | id="pinterest" |
91 | 163 | name="pinterest" |
92 | | - placeholder="Pinterest" |
| 164 | + placeholder="Pinterest username" |
93 | 165 | value={values.pinterest} |
94 | 166 | onChange={handleChange} |
95 | 167 | onBlur={handleBlur} |
96 | | - helperText={touched.pinterest ? errors.pinterest : ""} |
97 | | - error={touched.pinterest && Boolean(errors.pinterest)} |
| 168 | + touched={touched.pinterest} |
| 169 | + errors={errors.pinterest} |
| 170 | + startAdornment="https://pinterest.com/" |
98 | 171 | /> |
99 | 172 | </div> |
100 | 173 | </Grid> |
|
0 commit comments