AbdulElahGwaith/free-react-tailwind-admin-dashboard

1import ComponentCard from "../../common/ComponentCard";2import Label from "../Label";3import Input from "../input/InputField";4import { EnvelopeIcon } from "../../../icons";5import PhoneInput from "../group-input/PhoneInput";6 7export default function InputGroup() {8  const countries = [9    { code: "US", label: "+1" },10    { code: "GB", label: "+44" },11    { code: "CA", label: "+1" },12    { code: "AU", label: "+61" },13  ];14  const handlePhoneNumberChange = (phoneNumber: string) => {15    console.log("Updated phone number:", phoneNumber);16  };17  return (18    <ComponentCard title="Input Group">19      <div className="space-y-6">20        <div>21          <Label>Email</Label>22          <div className="relative">23            <Input24              placeholder="info@gmail.com"25              type="text"26              className="pl-[62px]"27            />28            <span className="absolute left-0 top-1/2 -translate-y-1/2 border-r border-gray-200 px-3.5 py-3 text-gray-500 dark:border-gray-800 dark:text-gray-400">29              <EnvelopeIcon className="size-6" />30            </span>31          </div>32        </div>33        <div>34          <Label>Phone</Label>35          <PhoneInput36            selectPosition="start"37            countries={countries}38            placeholder="+1 (555) 000-0000"39            onChange={handlePhoneNumberChange}40          />41        </div>{" "}42        <div>43          <Label>Phone</Label>44          <PhoneInput45            selectPosition="end"46            countries={countries}47            placeholder="+1 (555) 000-0000"48            onChange={handlePhoneNumberChange}49          />50        </div>51      </div>52    </ComponentCard>53  );54}55