AbdulElahGwaith/free-react-tailwind-admin-dashboard

1import { useState } from "react";2import ComponentCard from "../../common/ComponentCard";3import Label from "../Label";4import Input from "../input/InputField";5import Select from "../Select";6import { EyeCloseIcon, EyeIcon, TimeIcon } from "../../../icons";7import DatePicker from "../date-picker.tsx";8 9export default function DefaultInputs() {10  const [showPassword, setShowPassword] = useState(false);11  const options = [12    { value: "marketing", label: "Marketing" },13    { value: "template", label: "Template" },14    { value: "development", label: "Development" },15  ];16  const handleSelectChange = (value: string) => {17    console.log("Selected value:", value);18  };19 20  return (21    <ComponentCard title="Default Inputs">22      <div className="space-y-6">23        <div>24          <Label htmlFor="input">Input</Label>25          <Input type="text" id="input" />26        </div>27        <div>28          <Label htmlFor="inputTwo">Input with Placeholder</Label>29          <Input type="text" id="inputTwo" placeholder="info@gmail.com" />30        </div>31        <div>32          <Label>Select Input</Label>33          <Select34            options={options}35            placeholder="Select an option"36            onChange={handleSelectChange}37            className="dark:bg-dark-900"38          />39        </div>40        <div>41          <Label>Password Input</Label>42          <div className="relative">43            <Input44              type={showPassword ? "text" : "password"}45              placeholder="Enter your password"46            />47            <button48              onClick={() => setShowPassword(!showPassword)}49              className="absolute z-30 -translate-y-1/2 cursor-pointer right-4 top-1/2"50            >51              {showPassword ? (52                <EyeIcon className="fill-gray-500 dark:fill-gray-400 size-5" />53              ) : (54                <EyeCloseIcon className="fill-gray-500 dark:fill-gray-400 size-5" />55              )}56            </button>57          </div>58        </div>59 60        <div>61          <DatePicker62            id="date-picker"63            label="Date Picker Input"64            placeholder="Select a date"65            onChange={(dates, currentDateString) => {66              // Handle your logic67              console.log({ dates, currentDateString });68            }}69          />70        </div>71 72        <div>73          <Label htmlFor="tm">Time Picker Input</Label>74          <div className="relative">75            <Input76              type="time"77              id="tm"78              name="tm"79              onChange={(e) => console.log(e.target.value)}80            />81            <span className="absolute text-gray-500 -translate-y-1/2 pointer-events-none right-3 top-1/2 dark:text-gray-400">82              <TimeIcon className="size-6" />83            </span>84          </div>85        </div>86        <div>87          <Label htmlFor="tm">Input with Payment</Label>88          <div className="relative">89            <Input90              type="text"91              placeholder="Card number"92              className="pl-[62px]"93            />94            <span className="absolute left-0 top-1/2 flex h-11 w-[46px] -translate-y-1/2 items-center justify-center border-r border-gray-200 dark:border-gray-800">95              <svg96                width="20"97                height="20"98                viewBox="0 0 20 20"99                fill="none"100                xmlns="http://www.w3.org/2000/svg"101              >102                <circle cx="6.25" cy="10" r="5.625" fill="#E80B26" />103                <circle cx="13.75" cy="10" r="5.625" fill="#F59D31" />104                <path105                  d="M10 14.1924C11.1508 13.1625 11.875 11.6657 11.875 9.99979C11.875 8.33383 11.1508 6.8371 10 5.80713C8.84918 6.8371 8.125 8.33383 8.125 9.99979C8.125 11.6657 8.84918 13.1625 10 14.1924Z"106                  fill="#FC6020"107                />108              </svg>109            </span>110          </div>111        </div>112      </div>113    </ComponentCard>114  );115}116