From 8a3fa2a066b61188b9d6c131020a840708046580 Mon Sep 17 00:00:00 2001
From: VividTruthKeeper <mr.aydogdy02@gmail.com>
Date: Fri, 24 Jun 2022 00:14:20 +0500
Subject: [PATCH] events page desktop

---
 src/App.tsx                               |   2 +
 src/components/{main => global}/Event.tsx |   0
 src/components/global/Nav.tsx             |   2 +-
 src/components/main/EventsSection.tsx     |   2 +-
 src/pages/Events.tsx                      | 112 ++++++++++++++++++++++
 src/styles/_event.scss                    |  48 ++++++++++
 src/styles/_events.scss                   |   8 ++
 src/styles/_main.scss                     |  49 ----------
 src/styles/style.scss                     |   2 +
 9 files changed, 174 insertions(+), 51 deletions(-)
 rename src/components/{main => global}/Event.tsx (100%)
 create mode 100644 src/pages/Events.tsx
 create mode 100644 src/styles/_event.scss
 create mode 100644 src/styles/_events.scss

diff --git a/src/App.tsx b/src/App.tsx
index e418bbb..2e0977f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -10,6 +10,7 @@ import Footer from "./components/global/Footer";
 
 // Pages
 import Main from "./pages/Main";
+import Events from "./pages/Events";
 
 const App = () => {
   return (
@@ -18,6 +19,7 @@ const App = () => {
       <div className="inner-body">
         <Routes>
           <Route path="/" element={<Main />} />
+          <Route path="/news" element={<Events />} />
         </Routes>
       </div>
       <Footer />
diff --git a/src/components/main/Event.tsx b/src/components/global/Event.tsx
similarity index 100%
rename from src/components/main/Event.tsx
rename to src/components/global/Event.tsx
diff --git a/src/components/global/Nav.tsx b/src/components/global/Nav.tsx
index bcb4551..7c66cb0 100644
--- a/src/components/global/Nav.tsx
+++ b/src/components/global/Nav.tsx
@@ -24,7 +24,7 @@ const Nav = () => {
                 </div>
               </li>
               <li>
-                <Link to={"/"}>Новости и события</Link>
+                <Link to={"/news"}>Новости и события</Link>
               </li>
               <li>
                 <Link to={"/"}>Турниры</Link>
diff --git a/src/components/main/EventsSection.tsx b/src/components/main/EventsSection.tsx
index 51a6bbc..639b05a 100644
--- a/src/components/main/EventsSection.tsx
+++ b/src/components/main/EventsSection.tsx
@@ -3,7 +3,7 @@ import { v4 as uuidv4 } from "uuid";
 
 // Components
 import SectionTitle from "../global/SectionTitle";
-import Event from "./Event";
+import Event from "../global/Event";
 
 // Images
 import competition from "../../images/competition.jpg";
diff --git a/src/pages/Events.tsx b/src/pages/Events.tsx
new file mode 100644
index 0000000..e748f08
--- /dev/null
+++ b/src/pages/Events.tsx
@@ -0,0 +1,112 @@
+// Modules
+import { v4 as uuidv4 } from "uuid";
+
+// Images
+import competition from "../images/competition.jpg";
+import competition2 from "../images/competition2.jpg";
+import competition3 from "../images/competition3.jpg";
+
+// Components
+import Event from "../components/global/Event";
+
+// Types
+import { eventProps } from "../types/eventProps";
+
+const eventsData: eventProps[] = [
+  {
+    image: competition,
+    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+    time: "02:58",
+    date: "16.12.2021",
+  },
+  {
+    image: competition2,
+    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+    time: "02:58",
+    date: "16.12.2021",
+  },
+  {
+    image: competition3,
+    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+    time: "02:58",
+    date: "16.12.2021",
+  },
+  {
+    image: competition,
+    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+    time: "02:58",
+    date: "16.12.2021",
+  },
+  {
+    image: competition2,
+    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+    time: "02:58",
+    date: "16.12.2021",
+  },
+  {
+    image: competition3,
+    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+    time: "02:58",
+    date: "16.12.2021",
+  },
+  {
+    image: competition,
+    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+    time: "02:58",
+    date: "16.12.2021",
+  },
+  {
+    image: competition2,
+    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+    time: "02:58",
+    date: "16.12.2021",
+  },
+  {
+    image: competition3,
+    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+    time: "02:58",
+    date: "16.12.2021",
+  },
+  {
+    image: competition,
+    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+    time: "02:58",
+    date: "16.12.2021",
+  },
+  {
+    image: competition2,
+    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+    time: "02:58",
+    date: "16.12.2021",
+  },
+  {
+    image: competition3,
+    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+    time: "02:58",
+    date: "16.12.2021",
+  },
+];
+
+const Events = () => {
+  return (
+    <main className="events-page">
+      <div className="container">
+        <div className="events-page-inner">
+          {eventsData.map((evnt) => {
+            return (
+              <Event
+                key={uuidv4()}
+                image={evnt.image}
+                text={evnt.text}
+                time={evnt.time}
+                date={evnt.date}
+              />
+            );
+          })}
+        </div>
+      </div>
+    </main>
+  );
+};
+
+export default Events;
diff --git a/src/styles/_event.scss b/src/styles/_event.scss
new file mode 100644
index 0000000..ca272f1
--- /dev/null
+++ b/src/styles/_event.scss
@@ -0,0 +1,48 @@
+.event {
+  display: flex;
+  flex-direction: column;
+  gap: 1.6rem;
+  padding-bottom: 1.6rem;
+  border-bottom: 0.1rem solid $base-green;
+}
+
+.event-img {
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.event-top {
+  display: flex;
+  flex-direction: column;
+  gap: 1.6rem;
+}
+
+.event-date {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  font-size: 1.6rem;
+}
+
+.event-divider {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+
+  img {
+    width: 0.6rem;
+    height: 0.6rem;
+  }
+}
+
+.event-bottom {
+  p {
+    font-size: 1.6rem;
+    font-weight: bold;
+  }
+}
diff --git a/src/styles/_events.scss b/src/styles/_events.scss
new file mode 100644
index 0000000..d705bb5
--- /dev/null
+++ b/src/styles/_events.scss
@@ -0,0 +1,8 @@
+.events-page-inner {
+  padding: 8rem 0;
+  padding-bottom: 16rem;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  column-gap: 7rem;
+  row-gap: 3.2rem;
+}
diff --git a/src/styles/_main.scss b/src/styles/_main.scss
index 1e65816..9449c5a 100644
--- a/src/styles/_main.scss
+++ b/src/styles/_main.scss
@@ -106,14 +106,6 @@
   padding-bottom: 8rem;
 }
 
-.event {
-  display: flex;
-  flex-direction: column;
-  gap: 1.6rem;
-  padding-bottom: 1.6rem;
-  border-bottom: 0.1rem solid $base-green;
-}
-
 .events-content {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
@@ -121,47 +113,6 @@
   row-gap: 3.2rem;
 }
 
-.event-img {
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-}
-
-.event-top {
-  display: flex;
-  flex-direction: column;
-  gap: 1.6rem;
-}
-
-.event-date {
-  display: flex;
-  align-items: center;
-  gap: 0.8rem;
-  font-size: 1.6rem;
-}
-
-.event-divider {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1rem;
-  height: 1rem;
-
-  img {
-    width: 0.6rem;
-    height: 0.6rem;
-  }
-}
-
-.event-bottom {
-  p {
-    font-size: 1.6rem;
-    font-weight: bold;
-  }
-}
-
 // Partners
 .partners-inner {
   padding-bottom: 16rem;
diff --git a/src/styles/style.scss b/src/styles/style.scss
index c4f3638..00986bd 100644
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -3,6 +3,8 @@
 @import "./general";
 @import "./section-title";
 @import "./search-table";
+@import "./event";
 @import "./nav";
 @import "./footer";
 @import "./main";
+@import "./events";