131 lines
3.4 KiB
TypeScript
131 lines
3.4 KiB
TypeScript
"use client"
|
|
import { useEffect } from "react"
|
|
import { useFormStatus } from "react-dom"
|
|
|
|
import { _ } from "@/lib/translation"
|
|
import { useProfileStore } from "@/stores/edit-profile"
|
|
|
|
import {
|
|
CalendarIcon,
|
|
EmailIcon,
|
|
HouseIcon,
|
|
PhoneIcon,
|
|
} from "@/components/Icons"
|
|
import CountrySelect from "@/components/TempDesignSystem/Form/Country"
|
|
import DateSelect from "@/components/TempDesignSystem/Form/Date"
|
|
import Field from "@/components/MyProfile/Field"
|
|
import Input from "@/components/TempDesignSystem/Form/Input"
|
|
import Phone from "@/components/TempDesignSystem/Form/Phone"
|
|
|
|
import type { EditFormContentProps } from "@/types/components/myPages/myProfile/edit"
|
|
|
|
export default function FormContent({ control }: EditFormContentProps) {
|
|
const { pending } = useFormStatus()
|
|
const setIsPending = useProfileStore((store) => store.setIsPending)
|
|
|
|
useEffect(() => {
|
|
setIsPending(pending)
|
|
}, [pending])
|
|
|
|
return (
|
|
<>
|
|
<Field>
|
|
<Field.Icon>SE</Field.Icon>
|
|
<Field.Label htmlFor="country">*{_("Country")}</Field.Label>
|
|
<Field.Content>
|
|
<CountrySelect name="country" />
|
|
</Field.Content>
|
|
</Field>
|
|
|
|
<Field>
|
|
<Field.Icon>
|
|
<CalendarIcon />
|
|
</Field.Icon>
|
|
<Field.Label htmlFor="dob">*{_("Date of Birth")}</Field.Label>
|
|
<Field.Content>
|
|
<DateSelect
|
|
control={control}
|
|
name="dob"
|
|
registerOptions={{ required: true }}
|
|
/>
|
|
</Field.Content>
|
|
</Field>
|
|
|
|
<Field>
|
|
<Field.Icon>
|
|
<EmailIcon />
|
|
</Field.Icon>
|
|
<Field.Label htmlFor="email">*{_("Email")}</Field.Label>
|
|
<Field.Content>
|
|
<Input
|
|
aria-label={_("Email")}
|
|
control={control}
|
|
name="email"
|
|
placeholder={_("Email")}
|
|
registerOptions={{ required: true }}
|
|
type="email"
|
|
/>
|
|
</Field.Content>
|
|
</Field>
|
|
|
|
<Field>
|
|
<Field.Icon>
|
|
<PhoneIcon />
|
|
</Field.Icon>
|
|
<Field.Label htmlFor="phone">*{_("Phone")}</Field.Label>
|
|
<Field.Content>
|
|
<Phone name="phone" />
|
|
</Field.Content>
|
|
</Field>
|
|
|
|
<Field>
|
|
<Field.Icon>
|
|
<HouseIcon />
|
|
</Field.Icon>
|
|
<Field.Label htmlFor="street">*{_("Address")}</Field.Label>
|
|
<Field.Content>
|
|
<Input
|
|
aria-label={_("Street")}
|
|
control={control}
|
|
name="street"
|
|
placeholder={_("Street 123")}
|
|
registerOptions={{ required: true }}
|
|
/>
|
|
</Field.Content>
|
|
</Field>
|
|
|
|
<Field>
|
|
<Field.Icon>
|
|
<HouseIcon />
|
|
</Field.Icon>
|
|
<Field.Label htmlFor="city">*{_("City/State")}</Field.Label>
|
|
<Field.Content>
|
|
<Input
|
|
aria-label={_("City")}
|
|
control={control}
|
|
name="city"
|
|
placeholder={_("City")}
|
|
registerOptions={{ required: true }}
|
|
/>
|
|
</Field.Content>
|
|
</Field>
|
|
|
|
<Field>
|
|
<Field.Icon>
|
|
<HouseIcon />
|
|
</Field.Icon>
|
|
<Field.Label htmlFor="zip">*{_("Zip code")}</Field.Label>
|
|
<Field.Content>
|
|
<Input
|
|
aria-label={_("Zip code")}
|
|
control={control}
|
|
name="zip"
|
|
placeholder={_("Zip code")}
|
|
registerOptions={{ required: true }}
|
|
/>
|
|
</Field.Content>
|
|
</Field>
|
|
</>
|
|
)
|
|
}
|