page settings

SurveyFrontend/package-lock.json

@@ -8,6 +8,7 @@
       "name": "survey-frontend",
       "version": "0.0.0",
       "dependencies": {
+        "@formkit/tempo": "^0.1.2",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
         "uuid": "^11.1.0"
@@ -842,6 +843,12 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@formkit/tempo": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/@formkit/tempo/-/tempo-0.1.2.tgz",
+      "integrity": "sha512-jNPPbjL8oj7hK3eHX++CwbR6X4GKQt+x00/q4yeXkwynXHGKL27dylYhpEgwrmediPP4y7s0XtN1if/M/JYujg==",
+      "license": "MIT"
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",

SurveyFrontend/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@formkit/tempo": "^0.1.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "uuid": "^11.1.0"

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>
     );