From d10ad6b217ae4ccf8a1056f3d2f4f5388619b551 Mon Sep 17 00:00:00 2001
From: DmitriyB <dimasik_burdin@inbox.ru>
Date: Mon, 25 Jul 2022 19:15:06 +0530
Subject: [PATCH] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B0=20=D0=BB=D0=B5=D0=B3=D0=B5=D0=BD=D0=B4=D0=B0=20?=
 =?UTF-8?q?=D0=BF=D1=80=D0=B8=20=D0=B7=D0=B0=D0=BF=D0=B8=D1=81=D0=B8,=20?=
 =?UTF-8?q?=D0=B4=D0=BE=D0=BF=D0=B8=D1=81=D0=B0=D0=BD=D1=8B=20=D1=81=D1=82?=
 =?UTF-8?q?=D0=B8=D0=BB=D0=B8=20=D0=BA=D0=B0=D0=BB=D0=B5=D0=BD=D0=B4=D0=B0?=
 =?UTF-8?q?=D1=80=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/mainPart/calendar/calendar.css |  3 +-
 src/components/mainPart/legend.tsx            | 18 +++++++++
 src/components/mainPart/mainPart.css          | 40 +++++++++++++++++++
 src/components/mainPart/mainPart.tsx          |  9 +++++
 .../mainPart/planContentContainer.tsx         | 10 +++++
 5 files changed, 79 insertions(+), 1 deletion(-)
 create mode 100644 src/components/mainPart/legend.tsx

diff --git a/src/components/mainPart/calendar/calendar.css b/src/components/mainPart/calendar/calendar.css
index 9b0f566..3158f9e 100644
--- a/src/components/mainPart/calendar/calendar.css
+++ b/src/components/mainPart/calendar/calendar.css
@@ -122,7 +122,8 @@
   }
   .react-calendar__tile:enabled:hover,
   .react-calendar__tile:enabled:focus {
-    background-color: #e6e6e6;
+    background-color: #443A5D;
+    /* border-radius: 8px; */
   }
   .react-calendar__tile--now {
     /* background: #ffff76; */
diff --git a/src/components/mainPart/legend.tsx b/src/components/mainPart/legend.tsx
new file mode 100644
index 0000000..b15348b
--- /dev/null
+++ b/src/components/mainPart/legend.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+
+type TProps = {
+    active: boolean
+}
+
+export const Legend:React.FC<TProps> = React.memo((props) => {
+    return <div className="legend-container">
+        <span className={`legend-circle ${props.active ? 'active' : 'disable'}`}></span>
+        <span className={`legend-text ${props.active ? 'active' : 'disable'}`}>
+            {
+                props.active            
+                ? 'Запись есть'
+                : 'Записи нет'
+            }
+        </span>
+    </div>
+})
\ No newline at end of file
diff --git a/src/components/mainPart/mainPart.css b/src/components/mainPart/mainPart.css
index bf707a4..51cc001 100644
--- a/src/components/mainPart/mainPart.css
+++ b/src/components/mainPart/mainPart.css
@@ -219,4 +219,44 @@
     flex-direction: column;
     padding: 80px 0;
     margin-bottom: auto;
+}
+
+.legend-container {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+}
+
+.legend-circle {
+    width: 12px;
+    height: 12px;
+    border-radius: 50px;
+}
+
+.legend-circle.active {
+    background-color: #CE56C2;
+}
+
+.legend-circle.disable {
+    background-color: #B196AF;
+}
+
+.legend-text {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 130%;
+}
+
+.legend-text.active {
+    color: #CE56C2;
+}
+
+.legend-text.disabled {
+    color: #B196AF;
+}
+
+.plan-content-legend {
+    margin-top: 24px;
+    display: flex;
+    gap: 32px;
 }
\ No newline at end of file
diff --git a/src/components/mainPart/mainPart.tsx b/src/components/mainPart/mainPart.tsx
index 9702b5c..711eef0 100644
--- a/src/components/mainPart/mainPart.tsx
+++ b/src/components/mainPart/mainPart.tsx
@@ -65,6 +65,7 @@ export const MainPart: React.FC = React.memo(() => {
             <PlanContentContainer 
                 title="Выбор даты"
                 content={<CalendarComponent />}
+                isLegend={true}
             />
         );
         setCurrentContent(<></>);
@@ -74,6 +75,14 @@ export const MainPart: React.FC = React.memo(() => {
 
     }
 
+    function onSelectDay() {
+
+    }
+
+    function onSelectTime() {
+        
+    }
+
     function enableBackground() {
         setShowBackground(true);
     }
diff --git a/src/components/mainPart/planContentContainer.tsx b/src/components/mainPart/planContentContainer.tsx
index 79859ca..cc046f8 100644
--- a/src/components/mainPart/planContentContainer.tsx
+++ b/src/components/mainPart/planContentContainer.tsx
@@ -1,13 +1,23 @@
 import React from "react";
+import { Legend } from "./legend";
 
 type TProps = {
     title: string
     content: JSX.Element
+    isLegend: boolean
 }
 
 export const PlanContentContainer:React.FC<TProps> = React.memo((props) => {
     return <div className="plan-content-container">
         <span className="plan-content-title">{props.title}</span>
         {props.content}
+        {
+            props.isLegend 
+            ? <div className="plan-content-legend">
+                <Legend active={true} />
+                <Legend active={false} />
+            </div>
+            : null
+        }
     </div>
 })
\ No newline at end of file