добавлена форма записи, но инпуты не до конца стилизованы

src/components/mainPart/button.tsx

@@ -1,10 +1,19 @@
 import React from "react";
 
 type TProps = {
-    onClick: () => void
     textButton: string
+    onClick?: () => void
+    type?: 'submit' | 'button'
+    width?: '100%' | string
 }
 
 export const PinkButton:React.FC<TProps> = React.memo((props) => {
-    return <button className="main-part-text-button" onClick={() => props.onClick()}>{props.textButton}</button>
+    return <button
+        style={{width: props.width ? props.width : ''}}
+        className="main-part-text-button"
+        onClick={() => props?.onClick()}
+        type={props.type ? props.type : 'button'}
+        >
+            {props.textButton}
+        </button>
 })

src/components/mainPart/form/form.css

@@ -0,0 +1,40 @@
+.request-form-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-width: 500px;
+    gap: 24px;
+    height: 100%;
+}
+
+.request-form-date {
+    font-weight: 600;
+    font-size: 24px;
+    line-height: 110%;
+}
+
+.request-form {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    gap: 30px;
+
+    height: 100%;
+}
+
+.request-form-submit-button {
+    width: 100%;
+    height: 60px;
+    border: none;
+    color: #FFFFFF;
+    font-weight: 600;
+    font-size: 17px;
+    line-height: 21px;
+    background: #333333;
+    /* margin-top: auto; */
+    cursor: pointer;
+}
+
+.request-form-submit-button:hover {
+    opacity: 0.7;
+}

src/components/mainPart/form/form.tsx

@@ -0,0 +1,151 @@
+import React, { useState } from "react";
+import './form.css';
+import { useForm, Controller } from 'react-hook-form';
+import { InputProps, styled, TextField, TextFieldProps } from "@mui/material";
+import { PinkButton } from "../button";
+import { StyledOptions } from "@emotion/styled";
+import { MUIStyledCommonProps } from "@mui/system";
+
+type TProps = {
+    // dateInfo: string
+    onSubmit: (data: FormData) => void
+}
+
+type FormData = {
+    phone: string
+    email: string
+    firstName: string
+}
+
+export const Form:React.FC<TProps> = React.memo((props) => {    
+    const {control, handleSubmit} = useForm<FormData>();
+    const [isError, setIsError] = useState(false);
+    let inputPr: InputProps = {
+        
+    }
+    let a: StyledOptions<TextFieldProps> = {
+        
+    }
+    const CustomizedTextField = styled(TextField)`
+        background: #322948;
+        border-radius: 8px;
+        & label {
+            color: #B196AF;
+            font-weight: 500;
+            font-size: 17px;
+            line-height: 21px;
+        }
+        & input {
+            color: #FFFFFF;
+            font-weight: 500;
+            font-size: 17px;
+            line-height: 21px;
+        }
+        & input:hover {
+            border: none;
+        }        
+        & label.Mui-focused {
+            color: #B196AF;
+        }
+        & .MuiTextField-root:hover {
+            
+        }
+        .bottom-line-color(red)     
+        & .MuiFilledInput-underline:before {
+            border: none;           
+        }  
+        & .MuiFilledInput-underline:before-focused {
+            border-bottom-color: red;
+        }
+        & .MuiOutlinedInput-root {
+            & fieldset {
+                border-color: red;
+                color: red;
+            }
+            &.Mui-focused fieldset {
+                border-color: white;
+            }
+        }
+
+    `;
+
+    function onSubmit(data: FormData) { 
+        if(!(data.email && data.firstName && data.phone)) {
+            setIsError(true);
+            return
+        }
+        console.log(data)
+        props.onSubmit(data)
+    }
+
+    return <div className="request-form-container">
+        {/* <span className="request-form-date">
+            {props.dateInfo}
+        </span>      */}
+        <form className="request-form" onSubmit={handleSubmit(onSubmit)}>
+            <Controller
+                name="phone"
+                control={control}
+                defaultValue=''                
+                render={({ field }) => 
+                    <CustomizedTextField 
+                        {...field}
+                        // variant={"filled"}
+                        variant={isError && field.value === '' ? 'outlined' : "filled"}
+                        // required
+                        size="medium"
+                        label='Номер телефона'
+                        autoComplete="off"
+                        type={'number'}
+                        error={isError && field.value === ''}
+                        helperText={isError && field.value === '' ? 'Заполните поле' : ''}
+                    />
+                }
+            />
+            <Controller
+                name="email"
+                control={control}
+                defaultValue=''
+                render={({ field }) =>
+                    <CustomizedTextField                        
+                        {...field}
+                        // variant={"filled"}
+                        variant={isError && field.value === '' ? 'outlined' : "filled"}
+                        size="medium"
+                        label='E-mail'
+                        // required
+                        type={"email"}
+                        autoComplete="off"
+                        error={isError && field.value === ''}
+                        helperText={isError && field.value === '' ? 'Заполните поле' : ''}
+                    />                    
+                }
+            />
+            <Controller
+                name="firstName"
+                control={control}
+                defaultValue=''
+                render={({ field }) => 
+                    <CustomizedTextField
+                        {...field} 
+                        // variant={"filled"}
+                        variant={isError && field.value === '' ? 'outlined' : "filled"}
+                        size="medium"
+                        label='Ваше имя'
+                        // required
+                        type={'text'}
+                        autoComplete="off"
+                        error={isError && field.value === ''}
+                        helperText={isError && field.value === '' ? 'Заполните поле' : ''}
+                    />
+                }
+            />
+            {/* <input className="request-form-submit-button" type="submit" value={'Записаться на просмотр'}/> */}
+            <PinkButton 
+                type="submit" 
+                textButton={'Записаться на просмотр'}
+                width='100%'
+            />
+        </form>
+    </div>
+})

src/components/mainPart/mainPart.tsx

@@ -8,7 +8,13 @@ import { CSSTransition, TransitionGroup } from "react-transition-group";
 import { CalendarComponent } from "./calendar/calendar";
 import { PlanContentContainer } from "./planContentContainer";
 import { TimeSelector } from "./timeSelector/timeSelector";
+import { Form } from "./form/form";
 
+type FormData = {
+    phone: string
+    email: string
+    firstName: string
+}
 
 export const MainPart: React.FC = React.memo(() => {
     const changeContent = useRef(0);
@@ -90,9 +96,21 @@ export const MainPart: React.FC = React.memo(() => {
 
     function onSelectTime(date: string, time: string) {
         let dateTime = `${date} в ${time}`;
+        setPlaneContent(
+            <PlanContentContainer
+                title="Оформление"
+                date={dateTime}
+                content={<Form onSubmit={(data) => onSubmit(data)} />}
+                isLegend={false}
+            />
+        )
         console.log(dateTime)
     }
 
+    function onSubmit(data: FormData) {
+
+    }
+
     function enableBackground() {
         setShowBackground(true);
     }