From 212901e63836278bd000661c23c2023dc81e8239 Mon Sep 17 00:00:00 2001
From: VividTruthKeeper <mr.aydogdy02@gmail.com>
Date: Sun, 17 Jul 2022 19:38:15 +0500
Subject: [PATCH] calendar on main page

---
 src/App.tsx                                        | 2 --
 src/components/event_item/EventContentSkeleton.tsx | 2 +-
 src/components/main/CalendarSection.tsx            | 9 ++++-----
 src/styles/_calendar.scss                          | 9 +++++----
 src/styles/_event-item.scss                        | 4 ++--
 src/styles/_main.scss                              | 5 +++++
 6 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 7e71b6c..62bfcf0 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -21,7 +21,6 @@ import Profile from "./pages/Profile";
 import EventItem from "./pages/EventItem";
 import Structure from "./pages/Structure";
 import Contacts from "./pages/Contact";
-import Calendar from "./components/global/Calendar";
 
 const App = () => {
   // Types
@@ -50,7 +49,6 @@ const App = () => {
             <Route path="/event/:eventId" element={<EventItem />} />
             <Route path="/structure" element={<Structure />} />
             <Route path="/contact" element={<Contacts />} />
-            <Route path="/calendar" element={<Calendar />} />
           </Routes>
         </div>
         <Footer dropdown={dropdown} setDropdown={setDropdown} />
diff --git a/src/components/event_item/EventContentSkeleton.tsx b/src/components/event_item/EventContentSkeleton.tsx
index 7652c9f..b9efe90 100644
--- a/src/components/event_item/EventContentSkeleton.tsx
+++ b/src/components/event_item/EventContentSkeleton.tsx
@@ -3,7 +3,7 @@ const EventContentSkeleton = () => {
     <div className="eventitem-content skeleton">
       <div className="eventitem-top">
         <p></p>
-        <h2></h2>
+        <p className="big"></p>
       </div>
       <div className="eventitem-bottom">
         <div className="eventitem-img"></div>
diff --git a/src/components/main/CalendarSection.tsx b/src/components/main/CalendarSection.tsx
index b197ab6..bd47514 100644
--- a/src/components/main/CalendarSection.tsx
+++ b/src/components/main/CalendarSection.tsx
@@ -1,16 +1,12 @@
 // Modules
 import { useState, useEffect } from "react";
 import { Swiper, SwiperSlide } from "swiper/react";
-import { Navigation, Autoplay } from "swiper";
 import "swiper/css";
 import { v4 as uuidv4 } from "uuid";
 
-// Icons
-import arrowPrev from "../../icons/arrow-left-white.svg";
-import arrowNext from "../../icons/arrow-right-white.svg";
-
 // Components
 import VideoPlayer from "../global/VideoPlayer";
+import Calendar from "../global/Calendar";
 
 // Types
 import { playerType } from "../../types/playerType";
@@ -69,6 +65,9 @@ const CalendarSection = () => {
               </Swiper>
             </div>
           </div>
+          <div className="calendars-right">
+            <Calendar />
+          </div>
         </div>
       </div>
     </section>
diff --git a/src/styles/_calendar.scss b/src/styles/_calendar.scss
index ee8422c..9e0f4a0 100644
--- a/src/styles/_calendar.scss
+++ b/src/styles/_calendar.scss
@@ -1,6 +1,6 @@
 .calendar {
-  padding: 10rem;
-  max-width: 62rem;
+  align-self: center;
+  max-width: 36rem;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -90,7 +90,7 @@
   tbody {
     display: flex;
     flex-direction: column;
-    gap: 2.4rem;
+    gap: 2rem;
   }
   th {
     color: $base-green;
@@ -99,7 +99,8 @@
     pointer-events: none;
     display: grid;
     grid-template-columns: repeat(7, 1fr);
-    gap: 3.2rem;
+    justify-content: space-between;
+    gap: 2rem;
 
     * {
       font-size: 1.8rem;
diff --git a/src/styles/_event-item.scss b/src/styles/_event-item.scss
index ab37164..1c52a72 100644
--- a/src/styles/_event-item.scss
+++ b/src/styles/_event-item.scss
@@ -75,8 +75,8 @@
       @include shineLoad;
     }
 
-    h2 {
-      height: 3rem;
+    p.big {
+      height: 4rem;
     }
 
     .eventitem-content {
diff --git a/src/styles/_main.scss b/src/styles/_main.scss
index 56d737f..7d2c47b 100644
--- a/src/styles/_main.scss
+++ b/src/styles/_main.scss
@@ -195,3 +195,8 @@
     height: 16rem;
   }
 }
+
+.calendars-right {
+  display: flex;
+  align-items: center;
+}