Update src/components/sections/contact/ContactSplitForm.tsx
This commit is contained in:
@@ -1,214 +1,59 @@
|
|||||||
"use client";
|
import React, { useState } from "react";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
import { useState } from "react";
|
export interface ContactSplitFormProps {
|
||||||
import TextAnimation from "@/components/text/TextAnimation";
|
tag?: string;
|
||||||
import Button from "@/components/button/Button";
|
title: string;
|
||||||
import Input from "@/components/form/Input";
|
description: string;
|
||||||
import Textarea from "@/components/form/Textarea";
|
useInvertedBackground?: boolean;
|
||||||
import MediaContent from "@/components/shared/MediaContent";
|
inputPlaceholder?: string;
|
||||||
import { cls, shouldUseInvertedText } from "@/lib/utils";
|
buttonText?: string;
|
||||||
import { useTheme } from "@/providers/themeProvider/ThemeProvider";
|
className?: string;
|
||||||
import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
|
containerClassName?: string;
|
||||||
import { getButtonProps } from "@/lib/buttonUtils";
|
|
||||||
import type { AnimationType } from "@/components/text/types";
|
|
||||||
import type { ButtonAnimationType } from "@/types/button";
|
|
||||||
import {sendContactEmail} from "@/utils/sendContactEmail";
|
|
||||||
|
|
||||||
export interface InputField {
|
|
||||||
name: string;
|
|
||||||
type: string;
|
|
||||||
placeholder: string;
|
|
||||||
required?: boolean;
|
|
||||||
className?: string;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface TextareaField {
|
export const ContactSplitForm: React.FC<ContactSplitFormProps> = ({
|
||||||
name: string;
|
tag,
|
||||||
placeholder: string;
|
title,
|
||||||
rows?: number;
|
description,
|
||||||
required?: boolean;
|
useInvertedBackground = false,
|
||||||
className?: string;
|
inputPlaceholder = "Enter your email", buttonText = "Sign Up", className,
|
||||||
}
|
containerClassName
|
||||||
|
}) => {
|
||||||
|
const [email, setEmail] = useState("");
|
||||||
|
|
||||||
interface ContactSplitFormProps {
|
const handleSubmit = (e: React.FormEvent) => {
|
||||||
title: string;
|
e.preventDefault();
|
||||||
description: string;
|
setEmail("");
|
||||||
inputs: InputField[];
|
};
|
||||||
textarea?: TextareaField;
|
|
||||||
useInvertedBackground: boolean;
|
|
||||||
imageSrc?: string;
|
|
||||||
videoSrc?: string;
|
|
||||||
imageAlt?: string;
|
|
||||||
videoAriaLabel?: string;
|
|
||||||
mediaPosition?: "left" | "right";
|
|
||||||
mediaAnimation: ButtonAnimationType;
|
|
||||||
buttonText?: string;
|
|
||||||
onSubmit?: (data: Record<string, string>) => void;
|
|
||||||
ariaLabel?: string;
|
|
||||||
className?: string;
|
|
||||||
containerClassName?: string;
|
|
||||||
contentClassName?: string;
|
|
||||||
formCardClassName?: string;
|
|
||||||
titleClassName?: string;
|
|
||||||
descriptionClassName?: string;
|
|
||||||
buttonClassName?: string;
|
|
||||||
buttonTextClassName?: string;
|
|
||||||
mediaWrapperClassName?: string;
|
|
||||||
mediaClassName?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const ContactSplitForm = ({
|
return (
|
||||||
title,
|
<div
|
||||||
description,
|
className={cn(
|
||||||
inputs,
|
"w-full py-20 px-4", useInvertedBackground && "bg-accent/10", containerClassName
|
||||||
textarea,
|
)}
|
||||||
useInvertedBackground,
|
>
|
||||||
imageSrc,
|
<div className={cn("max-w-2xl mx-auto text-center space-y-6", className)}>
|
||||||
videoSrc,
|
{tag && <p className="text-sm font-semibold text-accent">{tag}</p>}
|
||||||
imageAlt = "",
|
<h2 className="text-4xl font-bold">{title}</h2>
|
||||||
videoAriaLabel = "Contact section video",
|
<p className="text-lg text-muted-foreground">{description}</p>
|
||||||
mediaPosition = "right",
|
|
||||||
mediaAnimation,
|
|
||||||
buttonText = "Submit",
|
|
||||||
onSubmit,
|
|
||||||
ariaLabel = "Contact section",
|
|
||||||
className = "",
|
|
||||||
containerClassName = "",
|
|
||||||
contentClassName = "",
|
|
||||||
formCardClassName = "",
|
|
||||||
titleClassName = "",
|
|
||||||
descriptionClassName = "",
|
|
||||||
buttonClassName = "",
|
|
||||||
buttonTextClassName = "",
|
|
||||||
mediaWrapperClassName = "",
|
|
||||||
mediaClassName = "",
|
|
||||||
}: ContactSplitFormProps) => {
|
|
||||||
const theme = useTheme();
|
|
||||||
const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
|
|
||||||
const { containerRef: mediaContainerRef } = useButtonAnimation({ animationType: mediaAnimation });
|
|
||||||
|
|
||||||
// Validate minimum inputs requirement
|
<form onSubmit={handleSubmit} className="space-y-4">
|
||||||
if (inputs.length < 2) {
|
<input
|
||||||
throw new Error("ContactSplitForm requires at least 2 inputs");
|
type="email"
|
||||||
}
|
placeholder={inputPlaceholder}
|
||||||
|
value={email}
|
||||||
// Initialize form data dynamically
|
onChange={(e) => setEmail(e.target.value)}
|
||||||
const initialFormData: Record<string, string> = {};
|
className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
|
||||||
inputs.forEach(input => {
|
required
|
||||||
initialFormData[input.name] = "";
|
/>
|
||||||
});
|
<button type="submit" className="w-full px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
|
||||||
if (textarea) {
|
{buttonText}
|
||||||
initialFormData[textarea.name] = "";
|
</button>
|
||||||
}
|
</form>
|
||||||
|
</div>
|
||||||
const [formData, setFormData] = useState(initialFormData);
|
</div>
|
||||||
|
);
|
||||||
const handleSubmit = async (e: React.FormEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
try {
|
|
||||||
await sendContactEmail({ formData });
|
|
||||||
console.log("Email send successfully");
|
|
||||||
setFormData(initialFormData);
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Failed to send email:", error);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const getButtonConfigProps = () => {
|
|
||||||
if (theme.defaultButtonVariant === "hover-bubble") {
|
|
||||||
return { bgClassName: "w-full" };
|
|
||||||
}
|
|
||||||
if (theme.defaultButtonVariant === "icon-arrow") {
|
|
||||||
return { className: "justify-between" };
|
|
||||||
}
|
|
||||||
return {};
|
|
||||||
};
|
|
||||||
|
|
||||||
const formContent = (
|
|
||||||
<div className={cls("card rounded-theme-capped p-6 md:p-10 flex items-center justify-center", formCardClassName)}>
|
|
||||||
<form onSubmit={handleSubmit} className="relative z-1 w-full flex flex-col gap-6">
|
|
||||||
<div className="w-full flex flex-col gap-0 text-center">
|
|
||||||
<TextAnimation
|
|
||||||
type={theme.defaultTextAnimation as AnimationType}
|
|
||||||
text={title}
|
|
||||||
variant="trigger"
|
|
||||||
className={cls("text-4xl font-medium leading-[1.175] text-balance", shouldUseLightText ? "text-background" : "text-foreground", titleClassName)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<TextAnimation
|
|
||||||
type={theme.defaultTextAnimation as AnimationType}
|
|
||||||
text={description}
|
|
||||||
variant="words-trigger"
|
|
||||||
className={cls("text-base leading-[1.15] text-balance", shouldUseLightText ? "text-background" : "text-foreground", descriptionClassName)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="w-full flex flex-col gap-4">
|
|
||||||
{inputs.map((input) => (
|
|
||||||
<Input
|
|
||||||
key={input.name}
|
|
||||||
type={input.type}
|
|
||||||
placeholder={input.placeholder}
|
|
||||||
value={formData[input.name] || ""}
|
|
||||||
onChange={(value) => setFormData({ ...formData, [input.name]: value })}
|
|
||||||
required={input.required}
|
|
||||||
ariaLabel={input.placeholder}
|
|
||||||
className={input.className}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
|
|
||||||
{textarea && (
|
|
||||||
<Textarea
|
|
||||||
placeholder={textarea.placeholder}
|
|
||||||
value={formData[textarea.name] || ""}
|
|
||||||
onChange={(value) => setFormData({ ...formData, [textarea.name]: value })}
|
|
||||||
required={textarea.required}
|
|
||||||
rows={textarea.rows || 5}
|
|
||||||
ariaLabel={textarea.placeholder}
|
|
||||||
className={textarea.className}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Button
|
|
||||||
{...getButtonProps(
|
|
||||||
{ text: buttonText, props: getButtonConfigProps() },
|
|
||||||
0,
|
|
||||||
theme.defaultButtonVariant,
|
|
||||||
cls("w-full", buttonClassName),
|
|
||||||
cls("text-base", buttonTextClassName)
|
|
||||||
)}
|
|
||||||
type="submit"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
const mediaContent = (
|
|
||||||
<div ref={mediaContainerRef} className={cls("overflow-hidden rounded-theme-capped card md:relative md:h-full", mediaWrapperClassName)}>
|
|
||||||
<MediaContent
|
|
||||||
imageSrc={imageSrc}
|
|
||||||
videoSrc={videoSrc}
|
|
||||||
imageAlt={imageAlt}
|
|
||||||
videoAriaLabel={videoAriaLabel}
|
|
||||||
imageClassName={cls("w-full md:absolute md:inset-0 md:h-full object-cover", mediaClassName)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<section aria-label={ariaLabel} className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}>
|
|
||||||
<div className={cls("w-content-width mx-auto", containerClassName)}>
|
|
||||||
<div className={cls("grid grid-cols-1 md:grid-cols-2 gap-6 md:auto-rows-fr", contentClassName)}>
|
|
||||||
{mediaPosition === "left" && mediaContent}
|
|
||||||
{formContent}
|
|
||||||
{mediaPosition === "right" && mediaContent}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
ContactSplitForm.displayName = "ContactSplitForm";
|
|
||||||
|
|
||||||
export default ContactSplitForm;
|
export default ContactSplitForm;
|
||||||
|
|||||||
Reference in New Issue
Block a user