Form Input

// FormInputs.js
import React from 'react';

export const TextInput = ({ label, id, name, type, value, onChange, onBlur, error }) => (
  <div className="form-group basic">
    <div className="input-wrapper">
      <label className="label" htmlFor={id}>
        {label}
      </label>
      <input
        type={type}
        className="form-control"
        id={id}
        name={name}
        value={value}
        onChange={onChange}
        onBlur={onBlur}
      />
      {error && <div className="error-message">{error}</div>}
    </div>
  </div>
);

export const SelectInput = ({ label, id, name, value, onChange, onBlur, options, error }) => (
  <div className="form-group basic">
    <div className="input-wrapper">
      <label className="label" htmlFor={id}>
        {label}
      </label>
      <select
        className="form-control"
        id={id}
        name={name}
        value={value}
        onChange={onChange}
        onBlur={onBlur}
      >
        {options.map((option) => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>
      {error && <div className="error-message">{error}</div>}
    </div>
  </div>
);

export const RadioInput = ({ label, id, name, value, onChange, onBlur, checked, error }) => (
  <div className="form-group basic">
    <div className="input-wrapper">
      <label className="label" htmlFor={id}>
        {label}
      </label>
      <input
        type="radio"
        className="form-control"
        id={id}
        name={name}
        value={value}
        onChange={onChange}
        onBlur={onBlur}
        checked={checked}
      />
      {error && <div className="error-message">{error}</div>}
    </div>
  </div>
);

export const TextareaInput = ({ label, id, name, value, onChange, onBlur, error }) => (
  <div className="form-group basic">
    <div className="input-wrapper">
      <label className="label" htmlFor={id}>
        {label}
      </label>
      <textarea
        className="form-control"
        id={id}
        name={name}
        value={value}
        onChange={onChange}
        onBlur={onBlur}
      />
      {error && <div className="error-message">{error}</div>}
    </div>
  </div>
);

import React from 'react';
import { useFormik } from 'formik';
import * as yup from 'yup';
import { TextInput, SelectInput, RadioInput, TextareaInput } from './FormInputs';

function MyFormComponent() {
  const validationSchema = yup.object().shape({
    HolidayDate: yup.date().required('Holiday Date is required'),
    Description: yup.string().required('Description is required'),
    // Add validation for other fields as needed
  });

  const formik = useFormik({
    initialValues: {
      HolidayDate: '',
      Description: '',
      // Add initial values for other fields as needed
    },
    validationSchema,
    onSubmit: async (values) => {
      // Handle form submission logic
      console.log('Form submitted with values:', values);
    },
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      {/* TextInput example */}
      <TextInput
        label="Holiday Date"
        id="HolidayDate"
        name="HolidayDate"
        type="date"
        value={formik.values.HolidayDate}
        onChange={formik.handleChange}
        onBlur={formik.handleBlur}
        error={formik.touched.HolidayDate && formik.errors.HolidayDate}
      />

      {/* SelectInput example */}
      <SelectInput
        label="Select Option"
        id="selectInput"
        name="selectInput"
        value={formik.values.selectInput}
        onChange={formik.handleChange}
        onBlur={formik.handleBlur}
        options={[
          { value: 'option1', label: 'Option 1' },
          { value: 'option2', label: 'Option 2' },
        ]}
        error={formik.touched.selectInput && formik.errors.selectInput}
      />

      {/* RadioInput example */}
      <RadioInput
        label="Radio Option"
        id="radioInput"
        name="radioInput"
        value="radioValue"
        onChange={formik.handleChange}
        onBlur={formik.handleBlur}
        checked={formik.values.radioInput === 'radioValue'}
        error={formik.touched.radioInput && formik.errors.radioInput}
      />

      {/* TextareaInput example */}
      <TextareaInput
        label="Description"
        id="Description"
        name="Description"
        value={formik.values.Description}
        onChange={formik.handleChange}
        onBlur={formik.handleBlur}
        error={formik.touched.Description && formik.errors.Description}
      />

      <button type="submit">Submit</button>
    </form>
  );
}

export default MyFormComponent;