add and styled calendar

src/components/mainPart/mainPart.tsx

@@ -6,11 +6,15 @@ import { ContentContainer } from "./contentContainer";
 import { MainPartFooter } from "./main-part-footer";
 import { OrLineContainer } from "./orLineContainer";
 import { CSSTransition, TransitionGroup } from "react-transition-group";
+import Calendar from "react-calendar";
+import { CalendarComponent } from "./calendar/calendar";
+import { PlanContentContainer } from "./planContentContainer";
 
 
 export const MainPart: React.FC = React.memo(() => {
     const changeContent = useRef(0);
     const [showBackground, setShowBackground] = useState<boolean>(false);
+    const [planContent, setPlaneContent] = useState<JSX.Element>();
     const [currentContent, setCurrentContent] = useState<JSX.Element>(
         <ContentContainer 
             titleText="Удаленная демонстрация жилого комплекса"
@@ -57,6 +61,13 @@ export const MainPart: React.FC = React.memo(() => {
 
     function onClickPlaneDemo() {
         enableBackground();
+        setPlaneContent(
+            <PlanContentContainer 
+                title="Выбор даты"
+                content={<CalendarComponent />}
+            />
+        );
+        setCurrentContent(<></>);
     }
 
     function onClickConnect() {
@@ -84,7 +95,14 @@ export const MainPart: React.FC = React.memo(() => {
                     {currentContent}                
                 </div>
             </CSSTransition>            
-        </TransitionGroup>            
+        </TransitionGroup>
+        {
+            planContent ?
+            <div className="main-part-plan-content">
+                {planContent}
+            </div>
+            : null
+        }        
         <CSSTransition
             in={showBackground}
             timeout={300}