page settings

SurveyFrontend/src/components/SettingSurvey/SettingSurvey.module.css

@@ -3,4 +3,23 @@
 .settingSurvey{
     width: 65%;
     margin-left: 8.9%;
+}
+
+.startEndTime{
+    display: flex;
+    justify-content: space-between;
+    gap: 14px;
+}
+
+.param{
+    background-color: #FFFFFF;
+    padding-top: 15px;
+    padding-bottom: 97px;
+    padding-left: 19px;
+}
+
+.param h2{
+    font-size: 24px;
+    font-weight: 600;
+    border-radius: 4px;
 }

SurveyFrontend/src/components/SettingSurvey/SettingSurvey.tsx

@@ -1,12 +1,20 @@
 import React from 'react';
 import SurveyInfo from "../SurveyInfo/SurveyInfo.tsx";
 import styles from "./SettingSurvey.module.css";
+import TimeEvent from "../TimeEvent/TimeEvent.tsx";
 
 
 const SettingSurvey: React.FC = () => {
     return (
         <div className={styles.settingSurvey}>
             <SurveyInfo />
+            <div className={styles.startEndTime}>
+                <TimeEvent title='Время начала'/>
+                <TimeEvent title='Время окончания'/>
+            </div>
+            <div className={styles.param}>
+                <h2>Параметры видимости</h2>
+            </div>
         </div>
     )
 }

SurveyFrontend/src/components/TimeEvent/TimeEvent.module.css

@@ -0,0 +1,37 @@
+/*TimeEvent.module.css*/
+
+
+.timeEvent{
+    width: 49%;
+    padding: 17px 25px 48px 20px;
+    background-color: #FFFFFF;
+    border-radius: 6px;
+    margin-bottom: 34px;
+}
+
+.title{
+    font-weight: 600;
+    font-size: 24px;
+    margin-bottom: 23px;
+}
+
+.datetime{
+    display: flex;
+    justify-content: space-between;
+}
+
+.inputDate{
+    border: 3px solid #007AFF26;
+    padding: 12px 107px 12px 21px;
+    font-size: 20px; /*??????????????????????? в макете указано bodyLarge/Size*/
+    font-weight: 400;
+    border-radius: 3px;
+}
+
+.inputTime{
+    border: 3px solid #007AFF26;
+    padding: 12px 42px;
+    font-size: 20px; /*??????????????????????? в макете указано bodyLarge/Size*/
+    font-weight: 400;
+    border-radius: 3px;
+}

SurveyFrontend/src/components/TimeEvent/TimeEvent.tsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import { format } from "@formkit/tempo";
+import styles from "./TimeEvent.module.css";
 
 
 interface TimeEventProps {
@@ -7,11 +9,22 @@ interface TimeEventProps {
 }
 
 const TimeEvent: React.FC<TimeEventProps> = ({title}) => {
-    return (
-        <div>
-            <h2>{title}</h2>
-            <div>
+    const date = new Date();
 
+    return (
+        <div className={styles.timeEvent}>
+            <h2 className={styles.title}>{title}</h2>
+            <div className={styles.datetime}>
+                <input
+                    className={styles.inputDate}
+                    type='date'
+                    placeholder={format(date, "MM/DD/YYYY")}
+                />
+                <input
+                    className={styles.inputTime}
+                    type='time'
+                    placeholder={format(date, "HH:mm")}
+                />
             </div>
         </div>
     );