Initial commit

2026-01-13 15:02:33 +02:00
commit a197a72080
298 changed files with 59446 additions and 0 deletions
--- a/src/components/sections/contact/ContactCenterForm.tsx
+++ b/src/components/sections/contact/ContactCenterForm.tsx
@@ -0,0 +1,158 @@
+"use client";
+
+import { useState } from "react";
+import TextAnimation from "@/components/text/TextAnimation";
+import Button from "@/components/button/Button";
+import Input from "@/components/form/Input";
+import Textarea from "@/components/form/Textarea";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import { getButtonProps } from "@/lib/buttonUtils";
+import type { AnimationType } from "@/components/text/types";
+
+export interface InputField {
+    name: string;
+    type: string;
+    placeholder: string;
+    required?: boolean;
+    className?: string;
+}
+
+export interface TextareaField {
+    name: string;
+    placeholder: string;
+    rows?: number;
+    required?: boolean;
+    className?: string;
+}
+
+interface ContactCenterFormProps {
+    title: string;
+    description: string;
+    inputs: InputField[];
+    textarea?: TextareaField;
+    useInvertedBackground: "noInvert" | "invertDefault";
+    buttonText?: string;
+    onSubmit?: (data: Record<string, string>) => void;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    contentClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    buttonClassName?: string;
+    buttonTextClassName?: string;
+}
+
+const ContactCenterForm = ({
+    title,
+    description,
+    inputs,
+    textarea,
+    useInvertedBackground,
+    buttonText = "Submit",
+    onSubmit,
+    ariaLabel = "Contact section",
+    className = "",
+    containerClassName = "",
+    contentClassName = "",
+    titleClassName = "",
+    descriptionClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+}: ContactCenterFormProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    // Validate minimum inputs requirement
+    if (inputs.length < 2) {
+        throw new Error("ContactCenterForm requires at least 2 inputs");
+    }
+
+    // Initialize form data dynamically
+    const initialFormData: Record<string, string> = {};
+    inputs.forEach(input => {
+        initialFormData[input.name] = "";
+    });
+    if (textarea) {
+        initialFormData[textarea.name] = "";
+    }
+
+    const [formData, setFormData] = useState(initialFormData);
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        if (onSubmit) {
+            onSubmit(formData);
+        }
+    };
+
+    return (
+        <section aria-label={ariaLabel} className={cls("relative py-20 w-full", useInvertedBackground === "invertDefault" && "bg-foreground", className)}>
+            <div className={cls("w-content-width mx-auto", containerClassName)}>
+                <div className={cls("w-full card p-6 md:p-0 py-20 md:py-20 rounded-theme-capped flex items-center justify-center", contentClassName)}>
+                    <div className="relative z-1 w-full md:w-1/2">
+                        <form onSubmit={handleSubmit} className="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-5">
+                                {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 },
+                                        0,
+                                        theme.defaultButtonVariant,
+                                        cls("w-full", buttonClassName),
+                                        cls("text-base", buttonTextClassName)
+                                    )}
+                                />
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+ContactCenterForm.displayName = "ContactCenterForm";
+
+export default ContactCenterForm;