diff --git a/src/app/marketing/_components/FeaturesStep.tsx b/src/app/marketing/_components/FeaturesStep.tsx new file mode 100644 index 0000000..5fce836 --- /dev/null +++ b/src/app/marketing/_components/FeaturesStep.tsx @@ -0,0 +1,105 @@ +"use client"; +import { TrashIcon } from "@/assets/icons"; +import InputGroup from "@/components/FormElements/InputGroup"; +import { TextAreaGroup } from "@/components/FormElements/InputGroup/text-area"; +import { ShowcaseSection } from "@/components/Layouts/showcase-section"; +import { FormErrorMessages } from "@/constants/Texts"; +import useFeaturesStepPresenter from "./useFeaturesStepPresenter"; + +const FeaturesStep = () => { + const { errors, handleSubmit, onSubmit, register, fields, append, remove } = + useFeaturesStepPresenter(); + return ( +
+
+ + + {errors.section_title && ( +

+ {errors.section_title.message} +

+ )} + +
+ + {fields.map((field, index) => ( +
+ + + + +
+ ))} + +
+
+
+ ); +}; + +export default FeaturesStep; diff --git a/src/app/marketing/_components/useFeaturesStepPresenter.ts b/src/app/marketing/_components/useFeaturesStepPresenter.ts new file mode 100644 index 0000000..c6aa47f --- /dev/null +++ b/src/app/marketing/_components/useFeaturesStepPresenter.ts @@ -0,0 +1,49 @@ +"use client"; +import { useFieldArray, useForm } from "react-hook-form"; + +export interface IFeaturesStepFields { + section_title: string; + section_description: string; + features: { + icon: string; + title: string; + description: string; + }[]; +} + +const useFeaturesStepPresenter = () => { + const { + register, + handleSubmit, + control, + watch, + formState: { errors }, + } = useForm({ + defaultValues: { + features: [{ icon: "", title: "", description: "" }], + }, + }); + + const { fields, append, remove } = useFieldArray({ + control, + name: "features", + }); + + const onSubmit = (data: IFeaturesStepFields) => { + console.log(data); + }; + + return { + register, + handleSubmit, + errors, + onSubmit, + fields, + append, + remove, + control, + watch, + }; +}; + +export default useFeaturesStepPresenter; diff --git a/src/app/marketing/page.tsx b/src/app/marketing/page.tsx index 035eb02..283ba49 100644 --- a/src/app/marketing/page.tsx +++ b/src/app/marketing/page.tsx @@ -5,6 +5,7 @@ import { BreadcrumbItem } from "@/types/shared"; import { useState } from "react"; import { ShowcaseSection } from "../../components/Layouts/showcase-section"; import ChartStep from "./_components/ChartStep"; +import FeaturesStep from "./_components/FeaturesStep"; import HeroStep from "./_components/HeroStep"; const Marketing = () => { @@ -31,9 +32,9 @@ const Marketing = () => { content: , }, { - title: "Preferences", - description: "Choose preferences", - content:
step 3
, + title: "Features", + description: "Add features", + content: , }, { title: "Review",