tm_panel/src/app/marketing/_components/HeroStep.tsx

"use client";
import InputGroup from "@/components/FormElements/InputGroup";
import { TextAreaGroup } from "@/components/FormElements/InputGroup/text-area";
import { ShowcaseSection } from "@/components/Layouts/showcase-section";
import { REGEX } from "@/constants/regex";
import { FormErrorMessages } from "@/constants/Texts";
import { forwardRef, useImperativeHandle } from "react";
import useHeroStepPresenter from "./useHeroStepPresenter";

interface HeroStepProps {
  initialData?: any;
}

const HeroStep = forwardRef<unknown, HeroStepProps>(({ initialData }, ref) => {
  const { errors, handleSubmit, onSubmit, register, getValues } =
    useHeroStepPresenter(initialData);

  useImperativeHandle(ref, () => ({
    getData: () => getValues(),
  }));

  return (
    <form
      className="items-start gap-9 rounded-xl bg-gray-1 p-10 dark:bg-gray-7 sm:grid-cols-2"
      onSubmit={handleSubmit(onSubmit)}
    >
      <div className="flex flex-col gap-9">
        <ShowcaseSection
          title="Hero Information"
          className="flex flex-col gap-5"
        >
          <InputGroup
            {...register("title", {
              required: { message: FormErrorMessages.required, value: true },
              minLength: {
                value: 2,
                message: FormErrorMessages.minLength(2),
              },
              maxLength: {
                value: 200,
                message: FormErrorMessages.maxLength(200),
              },
            })}
            label="Title"
            name="title"
            required
            type="text"
            placeholder="Enter Title"
          />
          {errors.title && (
            <p className="mt-1 text-sm text-red-500">{errors.title.message}</p>
          )}
          <TextAreaGroup
            label="Description"
            {...register("description", {
              minLength: {
                value: 10,
                message: FormErrorMessages.minLength(10),
              },
              maxLength: {
                value: 1000,
                message: FormErrorMessages.maxLength(1000),
              },
            })}
            name="description"
            placeholder="Enter Description"
          />
          {errors.description && (
            <p className="mt-1 text-sm text-red-500">
              {errors.description.message}
            </p>
          )}
          <InputGroup
            {...register("button_text", {
              required: { message: FormErrorMessages.required, value: true },
              minLength: {
                value: 2,
                message: FormErrorMessages.minLength(2),
              },
              maxLength: {
                value: 50,
                message: FormErrorMessages.maxLength(50),
              },
            })}
            label="Button Text"
            name="button_text"
            required
            type="text"
            placeholder="Enter Button Text"
          />
          {errors.button_text && (
            <p className="mt-1 text-sm text-red-500">
              {errors.button_text.message}
            </p>
          )}
          <InputGroup
            {...register("button_link", {
              required: { message: FormErrorMessages.required, value: true },
              minLength: {
                value: 2,
                message: FormErrorMessages.minLength(2),
              },
              maxLength: {
                value: 200,
                message: FormErrorMessages.maxLength(200),
              },
            })}
            label="Button Link"
            name="button_link"
            required
            type="url"
            placeholder="Enter Button Link"
          />
          {errors.button_link && (
            <p className="mt-1 text-sm text-red-500">
              {errors.button_link.message}
            </p>
          )}
          <InputGroup
            {...register("gif_file", {
              required: { message: FormErrorMessages.required, value: true },
              pattern: {
                message: FormErrorMessages.invalidPattern,
                value: REGEX.URL,
              },
            })}
            label="GIF File URL"
            name="gif_file"
            required
            type="text"
            placeholder="Enter GIF File URL"
          />
          {errors.gif_file && (
            <p className="mt-1 text-sm text-red-500">
              {errors.gif_file.message}
            </p>
          )}
        </ShowcaseSection>
      </div>
    </form>
  );
});

HeroStep.displayName = "HeroStep";

export default HeroStep;