100 lines
3.2 KiB
TypeScript
100 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import React, { memo, useState } from "react";
|
|
import Input from "@/components/form/Input";
|
|
import Button from "@/components/button/Button";
|
|
import { cls } from "@/lib/utils";
|
|
import { getButtonProps } from "@/lib/buttonUtils";
|
|
import { useTheme } from "@/providers/themeProvider/ThemeProvider";
|
|
|
|
interface FormField {
|
|
name: string;
|
|
type?: string;
|
|
placeholder?: string;
|
|
ariaLabel?: string;
|
|
required?: boolean;
|
|
}
|
|
|
|
interface WaitlistFormProps {
|
|
fields?: FormField[];
|
|
buttonText?: string;
|
|
onSubmit?: (data: Record<string, string>) => void;
|
|
className?: string;
|
|
inputsContainerClassName?: string;
|
|
inputClassName?: string;
|
|
buttonClassName?: string;
|
|
buttonTextClassName?: string;
|
|
}
|
|
|
|
const WaitlistForm = ({
|
|
fields = [
|
|
{ name: "email", type: "email", placeholder: "Your email", ariaLabel: "Email address", required: true },
|
|
{ name: "username", type: "text", placeholder: "Telegram username", ariaLabel: "Username", required: true }
|
|
],
|
|
buttonText = "Join waitlist",
|
|
onSubmit,
|
|
className = "",
|
|
inputsContainerClassName = "",
|
|
inputClassName = "",
|
|
buttonClassName = "",
|
|
buttonTextClassName = "",
|
|
}: WaitlistFormProps) => {
|
|
const theme = useTheme();
|
|
const [formData, setFormData] = useState<Record<string, string>>(
|
|
fields.reduce((acc, field) => ({ ...acc, [field.name]: "" }), {})
|
|
);
|
|
|
|
const handleInputChange = (name: string, value: string) => {
|
|
setFormData(prev => ({ ...prev, [name]: value }));
|
|
};
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (onSubmit) {
|
|
onSubmit(formData);
|
|
}
|
|
};
|
|
|
|
const getButtonConfigProps = () => {
|
|
if (theme.defaultButtonVariant === "hover-bubble") {
|
|
return { bgClassName: "w-full" };
|
|
}
|
|
if (theme.defaultButtonVariant === "icon-arrow") {
|
|
return { className: "justify-between" };
|
|
}
|
|
return {};
|
|
};
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit} className={cls("relative z-1 flex flex-col gap-3 w-full", className)}>
|
|
<div className={cls("flex flex-col md:flex-row gap-3", inputsContainerClassName)}>
|
|
{fields.map((field) => (
|
|
<Input
|
|
key={field.name}
|
|
type={field.type || "text"}
|
|
placeholder={field.placeholder || ""}
|
|
value={formData[field.name] || ""}
|
|
onChange={(value) => handleInputChange(field.name, value)}
|
|
required={field.required !== false}
|
|
ariaLabel={field.ariaLabel || field.placeholder}
|
|
className={cls("w-full", inputClassName)}
|
|
/>
|
|
))}
|
|
</div>
|
|
<Button
|
|
{...getButtonProps(
|
|
{ text: buttonText, props: getButtonConfigProps() },
|
|
0,
|
|
theme.defaultButtonVariant,
|
|
cls("w-full", buttonClassName),
|
|
buttonTextClassName
|
|
)}
|
|
/>
|
|
</form>
|
|
);
|
|
};
|
|
|
|
WaitlistForm.displayName = "WaitlistForm";
|
|
|
|
export default memo(WaitlistForm);
|