From d07e77857047576671d39a034dfb1ef657566e3e Mon Sep 17 00:00:00 2001
From: Anuarbek Zhakhangir <zhaxa65@gmail.com>
Date: Thu, 31 Jul 2025 02:00:09 +0900
Subject: [PATCH] feat: implement Fight registration form with input validation
 and file upload

---
 src/components/form/Checkbox.tsx   |   2 +-
 src/components/form/Fileupload.tsx |  72 +++++++++++---
 src/components/form/Input.tsx      |   2 +-
 src/components/form/Radio.tsx      |   2 +-
 src/components/form/Select.tsx     |   2 +-
 src/components/form/Textarea.tsx   |   2 +-
 src/pages/forms/exhibition.tsx     | 146 +++++++++++++++--------------
 src/pages/forms/fight.tsx          | 144 ++++++++++++++++++++++++++++
 8 files changed, 285 insertions(+), 87 deletions(-)
 create mode 100644 src/pages/forms/fight.tsx

diff --git a/src/components/form/Checkbox.tsx b/src/components/form/Checkbox.tsx
index 9c8785c..bc4bee5 100644
--- a/src/components/form/Checkbox.tsx
+++ b/src/components/form/Checkbox.tsx
@@ -47,7 +47,7 @@ export default function Checkbox({
   };
 
   return (
-    <div className={`flex flex-col gap-2 w-full max-w-sm ${className}`}>
+    <div className={`flex flex-col gap-2 w-full ${className}`}>
       <div
         className={`flex gap-2 ${
           direction === "vertical" ? "flex-col" : "flex-row flex-wrap"
diff --git a/src/components/form/Fileupload.tsx b/src/components/form/Fileupload.tsx
index 17594fb..92ba23c 100644
--- a/src/components/form/Fileupload.tsx
+++ b/src/components/form/Fileupload.tsx
@@ -1,4 +1,4 @@
-import { gothampro } from "@/utils/fonts";
+import { gothampro, fluxgore } from "@/utils/fonts";
 import React, { useState, useRef, DragEvent, ChangeEvent } from "react";
 
 interface FileUploadProps {
@@ -6,6 +6,7 @@ interface FileUploadProps {
   onFileSelect?: (files: File[]) => void;
   acceptedTypes?: string[];
   maxFileSize?: number; // in MB
+  maxFiles?: number; // maximum number of files
   multiple?: boolean;
   disabled?: boolean;
   placeholder?: string;
@@ -19,6 +20,7 @@ function Fileupload({
   onFileSelect,
   acceptedTypes = ["image/*", "application/pdf", ".doc", ".docx"],
   maxFileSize = 10,
+  maxFiles = 5,
   multiple = false,
   disabled = false,
   placeholder = "Файл в формате jpg или png до N мб",
@@ -67,15 +69,41 @@ function Fileupload({
     if (!files) return;
 
     const fileArray = Array.from(files);
-    const { valid, errors } = validateFiles(fileArray);
-
-    setErrors(errors);
+    const { valid, errors: validationErrors } = validateFiles(fileArray);
+    const allErrors = [...validationErrors];
 
     if (valid.length > 0) {
-      const newFiles = multiple ? [...selectedFiles, ...valid] : valid;
+      let newFiles: File[];
+
+      if (multiple) {
+        // Check if adding new files would exceed maxFiles limit
+        const totalFiles = selectedFiles.length + valid.length;
+        if (totalFiles > maxFiles) {
+          const allowedCount = maxFiles - selectedFiles.length;
+          if (allowedCount <= 0) {
+            allErrors.push(
+              `Maximum ${maxFiles} files allowed. Remove some files first.`
+            );
+            setErrors(allErrors);
+            return;
+          } else {
+            allErrors.push(
+              `Only ${allowedCount} more files can be added (max ${maxFiles} total).`
+            );
+            newFiles = [...selectedFiles, ...valid.slice(0, allowedCount)];
+          }
+        } else {
+          newFiles = [...selectedFiles, ...valid];
+        }
+      } else {
+        newFiles = valid;
+      }
+
       setSelectedFiles(newFiles);
       onFileSelect?.(newFiles);
     }
+
+    setErrors(allErrors);
   };
 
   const handleDrag = (e: DragEvent<HTMLDivElement>) => {
@@ -116,6 +144,10 @@ function Fileupload({
     }
   };
 
+  // Check if upload button should be disabled
+  const isUploadDisabled =
+    disabled || (multiple && selectedFiles.length >= maxFiles);
+
   return (
     <div className="w-full">
       {label && (
@@ -131,10 +163,12 @@ function Fileupload({
       {/* Upload Area */}
       <div
         className={`
-          flex items-center border rounded-md overflow-hidden transition-colors
-          ${dragActive ? "border-blue-400 bg-blue-50" : "border-gray-300"}
+          flex items-center overflow-hidden transition-colors
+          ${dragActive ? "border-[#1068B0] bg-[#1068B0]/10" : "border-gray-300"}
           ${
-            disabled ? "opacity-50 cursor-not-allowed" : "hover:border-blue-400"
+            isUploadDisabled
+              ? "opacity-50 cursor-not-allowed"
+              : "hover:border-[#1068B0]"
           }
         `}
         onDragEnter={handleDrag}
@@ -149,7 +183,7 @@ function Fileupload({
           multiple={multiple}
           accept={acceptedTypes.join(",")}
           onChange={handleInputChange}
-          disabled={disabled}
+          disabled={isUploadDisabled}
           id={id}
           name={name}
         />
@@ -158,8 +192,8 @@ function Fileupload({
         <button
           type="button"
           onClick={openFileDialog}
-          disabled={disabled}
-          className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 text-sm font-medium uppercase tracking-wide disabled:opacity-50"
+          disabled={isUploadDisabled}
+          className={`${fluxgore.className} bg-[#1068B0] hover:bg-[#0d5a96] text-white px-9 py-4 text-base font-medium uppercase tracking-wide disabled:opacity-50`}
         >
           ПРИКРЕПИТЬ
         </button>
@@ -167,9 +201,14 @@ function Fileupload({
         {/* File Display Area */}
         <div className="flex-1 px-3 py-2 min-h-[40px] flex items-center">
           {selectedFiles.length > 0 ? (
-            <div className="flex items-center justify-between w-full">
+            <div className="flex items-center justify-between">
               <span className="text-sm text-gray-900 truncate">
                 {selectedFiles[0].name}
+                {multiple && selectedFiles.length > 1 && (
+                  <span className="text-gray-500 ml-1">
+                    and {selectedFiles.length - 1} more
+                  </span>
+                )}
               </span>
               <button
                 type="button"
@@ -195,13 +234,20 @@ function Fileupload({
               </button>
             </div>
           ) : (
-            <span className="text-sm text-gray-500">
+            <span className={`${gothampro.className} text-sm text-gray-500`}>
               {placeholder.replace("N", maxFileSize.toString())}
             </span>
           )}
         </div>
       </div>
 
+      {/* File count indicator for multiple files */}
+      {multiple && selectedFiles.length > 0 && (
+        <div className="mt-1 text-xs text-gray-500">
+          {selectedFiles.length} of {maxFiles} files selected
+        </div>
+      )}
+
       {/* Error Messages */}
       {errors.length > 0 && (
         <div className="mt-2 text-sm text-red-600">
diff --git a/src/components/form/Input.tsx b/src/components/form/Input.tsx
index 2ef5c5a..bd98e4d 100644
--- a/src/components/form/Input.tsx
+++ b/src/components/form/Input.tsx
@@ -32,7 +32,7 @@ function Input({
   name,
 }: InputProps) {
   return (
-    <div className={`flex flex-col gap-2 w-full max-w-sm ${className}`}>
+    <div className={`flex flex-col gap-2 w-full ${className}`}>
       {label && (
         <label
           htmlFor={id || name}
diff --git a/src/components/form/Radio.tsx b/src/components/form/Radio.tsx
index 331e8c0..7bbacf5 100644
--- a/src/components/form/Radio.tsx
+++ b/src/components/form/Radio.tsx
@@ -41,7 +41,7 @@ export default function Radio({
   };
 
   return (
-    <div className={`flex flex-col gap-2 w-full max-w-sm ${className}`}>
+    <div className={`flex flex-col gap-2 w-full ${className}`}>
       {label && (
         <label
           className={`${gothampro.className} text-base font-bold text-black`}
diff --git a/src/components/form/Select.tsx b/src/components/form/Select.tsx
index 19c66de..4706d88 100644
--- a/src/components/form/Select.tsx
+++ b/src/components/form/Select.tsx
@@ -37,7 +37,7 @@ export default function Select({
   name,
 }: SelectProps) {
   return (
-    <div className={`flex flex-col gap-2 w-full max-w-sm ${className}`}>
+    <div className={`flex flex-col gap-2 w-full ${className}`}>
       {label && (
         <label
           htmlFor={id || name}
diff --git a/src/components/form/Textarea.tsx b/src/components/form/Textarea.tsx
index 646c6a7..95ab9d6 100644
--- a/src/components/form/Textarea.tsx
+++ b/src/components/form/Textarea.tsx
@@ -45,7 +45,7 @@ function Textarea({
   }[resize];
 
   return (
-    <div className={`flex flex-col gap-2 w-full max-w-sm ${className}`}>
+    <div className={`flex flex-col gap-2 w-full ${className}`}>
       {label && (
         <label
           htmlFor={id || name}
diff --git a/src/pages/forms/exhibition.tsx b/src/pages/forms/exhibition.tsx
index 122e6ce..5f98071 100644
--- a/src/pages/forms/exhibition.tsx
+++ b/src/pages/forms/exhibition.tsx
@@ -1,92 +1,100 @@
 import Checkbox from "@/components/form/Checkbox";
 import Fileupload from "@/components/form/Fileupload";
 import Input from "@/components/form/Input";
-import Radio from "@/components/form/Radio";
-import Select from "@/components/form/Select";
 import Textarea from "@/components/form/Textarea";
 import { fluxgore, gothampro } from "@/utils/fonts";
 import { useState } from "react";
 
 function ExhibtionFormPage() {
-  const [selectedOption, setSelectedOption] = useState("online");
   const [checkboxValues, setCheckboxValues] = useState<string[]>([]);
 
   return (
-    <div className="bg-[#ffffff] relative h-full">
+    <div className="bg-[#ffffff] relative p-6 md:p-8 lg:p-12 flex flex-col items-center justify-center md:h-full">
       <h1
-        className={`${fluxgore.className} text-4xl md:text-7xl text-[#060606] relative`}
+        className={`${fluxgore.className} text-4xl md:text-7xl text-[#060606] relative mb-8 md:mb-12`}
       >
-        Регистрация участника
+        Регистрация на выставку
       </h1>
 
-      <Input
-        label="Имя"
-        placeholder="Введите ваше имя"
-        type="text"
-        required
-        className="mt-4"
-      />
+      <div className="space-y-6 max-w-2xl w-full">
+        <Input
+          label="Имя"
+          placeholder="Введите ваше имя"
+          type="text"
+          required
+        />
 
-      <Select
-        label="Выберите тип участия"
-        options={[
-          { value: "speaker", label: "Спикер" },
-          { value: "attendee", label: "Посетитель" },
-          { value: "sponsor", label: "Спонсор" },
-        ]}
-        required
-        className="mt-4"
-      />
+        <Input
+          label="Телефон"
+          placeholder="+7 (___) ___-__-__"
+          type="tel"
+          required
+        />
 
-      <Radio
-        value={selectedOption}
-        onChange={setSelectedOption}
-        label="Выберите формат участия"
-        options={[
-          { value: "online", label: "Онлайн" },
-          { value: "offline", label: "Офлайн" },
-          { value: "hybrid", label: "Гибридный" },
-        ]}
-        required
-        className="mt-4"
-        direction="vertical"
-        name="participationFormat"
-      />
+        <Input
+          label="Почта"
+          placeholder="example@email.com"
+          type="email"
+          required
+        />
 
-      <Textarea
-        label="Дополнительная информация"
-        placeholder="Введите дополнительную информацию"
-        rows={4}
-        cols={50}
-        className="mt-4"
-      />
+        <Input
+          label="Марка автомобиля"
+          placeholder="Введите марку автомобиля"
+          type="text"
+          required
+        />
 
-      <Checkbox
-        value={checkboxValues}
-        onChange={(values) => setCheckboxValues(values)}
-        options={[
-          {
-            value: "terms",
-            label: (
-              <label className={`${gothampro.className} text-base text-black`}>
-                Согласие на обработку персональных данных
-              </label>
-            ),
-          },
-        ]}
-        required
-        className="mt-4"
-        direction="vertical"
-        name="termsAgreement"
-      />
+        <Input
+          label="Модель"
+          placeholder="Введите модель автомобиля"
+          type="text"
+          required
+        />
 
-      <Fileupload
-        label="Загрузите файлы"
-        onFileSelect={(files) => console.log("Selected files:", files)}
-        acceptedTypes={["image/*", "application/pdf"]}
-        maxFileSize={5}
-        multiple={true}
-      />
+        <Fileupload
+          label="Фото автомобиля (до 3 файлов)"
+          onFileSelect={(files) => console.log("Selected files:", files)}
+          acceptedTypes={["image/*"]}
+          maxFileSize={5}
+          multiple={true}
+          maxFiles={3}
+        />
+
+        <Textarea
+          label="Интересное об автомобиле"
+          placeholder="Расскажите что-то интересное о вашем автомобиле"
+          rows={4}
+          cols={50}
+        />
+
+        <Checkbox
+          value={checkboxValues}
+          onChange={(values) => setCheckboxValues(values)}
+          options={[
+            {
+              value: "terms",
+              label: (
+                <label
+                  className={`${gothampro.className} text-base text-black`}
+                >
+                  Согласие на обработку персональных данных
+                </label>
+              ),
+            },
+          ]}
+          required
+          direction="vertical"
+          name="termsAgreement"
+        />
+
+        <button
+          type="submit"
+          className={`${fluxgore.className} bg-[#1068B0] hover:bg-[#0d5a96] text-white px-9 py-4 text-base font-medium uppercase tracking-wide disabled:opacity-50 w-full`}
+        >
+          Отправить
+        </button>
+      </div>
     </div>
   );
 }
diff --git a/src/pages/forms/fight.tsx b/src/pages/forms/fight.tsx
new file mode 100644
index 0000000..fcbefed
--- /dev/null
+++ b/src/pages/forms/fight.tsx
@@ -0,0 +1,144 @@
+import Checkbox from "@/components/form/Checkbox";
+import Fileupload from "@/components/form/Fileupload";
+import Input from "@/components/form/Input";
+import Textarea from "@/components/form/Textarea";
+import { fluxgore, gothampro } from "@/utils/fonts";
+import { useState } from "react";
+
+function FightFormPage() {
+  const [checkboxValues, setCheckboxValues] = useState<string[]>([]);
+
+  return (
+    <div className="bg-[#ffffff] relative p-6 md:p-8 lg:p-12 flex flex-col items-center justify-center">
+      <h1
+        className={`${fluxgore.className} text-4xl md:text-7xl text-[#060606] relative mb-8 md:mb-12`}
+      >
+        Регистрация на Битву за Москву
+      </h1>
+
+      <div className="space-y-6 max-w-2xl w-full">
+        <Input
+          label="Фамилия"
+          placeholder="Введите вашу фамилию"
+          type="text"
+          required
+        />
+
+        <Input
+          label="Имя"
+          placeholder="Введите ваше имя"
+          type="text"
+          required
+        />
+
+        <Input
+          label="Отчество"
+          placeholder="Введите ваше отчество"
+          type="text"
+          required
+        />
+
+        <Input
+          label="Дата рождения"
+          placeholder="дд.мм.гггг"
+          type="text"
+          required
+        />
+
+        <Input
+          label="Гражданство"
+          placeholder="Введите ваше гражданство"
+          type="text"
+          required
+        />
+
+        <Input
+          label="Телефон"
+          placeholder="+7 (___) ___-__-__"
+          type="tel"
+          required
+        />
+
+        <Input
+          label="Почта"
+          placeholder="example@email.com"
+          type="email"
+          required
+        />
+
+        <Input
+          label="Марка автомобиля"
+          placeholder="Введите марку автомобиля"
+          type="text"
+          required
+        />
+
+        <Input
+          label="Модель"
+          placeholder="Введите модель автомобиля"
+          type="text"
+          required
+        />
+
+        <Input
+          label="Двигатель"
+          placeholder="Введите тип двигателя"
+          type="text"
+          required
+        />
+
+        <Input
+          label="Мощность"
+          placeholder="Введите мощность (л.с.)"
+          type="text"
+          required
+        />
+
+        <Fileupload
+          label="Фото автомобиля (до 3 файлов)"
+          onFileSelect={(files) => console.log("Selected files:", files)}
+          acceptedTypes={["image/*"]}
+          maxFileSize={5}
+          multiple={true}
+          maxFiles={3}
+        />
+
+        <Textarea
+          label="Дополнительная информация"
+          placeholder="Дополнительная информация об автомобиле"
+          rows={4}
+          cols={50}
+        />
+
+        <Checkbox
+          value={checkboxValues}
+          onChange={(values) => setCheckboxValues(values)}
+          options={[
+            {
+              value: "terms",
+              label: (
+                <label
+                  className={`${gothampro.className} text-base text-black`}
+                >
+                  Согласие на обработку персональных данных
+                </label>
+              ),
+            },
+          ]}
+          required
+          direction="vertical"
+          name="termsAgreement"
+        />
+
+        <button
+          type="submit"
+          className={`${fluxgore.className} bg-[#1068B0] hover:bg-[#0d5a96] text-white px-9 py-4 text-base font-medium uppercase tracking-wide disabled:opacity-50 w-full`}
+        >
+          Отправить
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default FightFormPage;