eventitem page

src/App.tsx

@@ -13,6 +13,7 @@ import Main from "./pages/Main";
 import Events from "./pages/Events";
 import Rating from "./pages/Rating";
 import Profile from "./pages/Profile";
+import EventItem from "./pages/EventItem";
 
 const App = () => {
   return (
@@ -24,6 +25,7 @@ const App = () => {
           <Route path="/news" element={<Events />} />
           <Route path="/rating" element={<Rating />} />
           <Route path="/profile" element={<Profile />} />
+          <Route path="/event" element={<EventItem />} />
         </Routes>
       </div>
       <Footer />

src/components/event_item/EventAside.tsx

@@ -0,0 +1,63 @@
+// Modules
+import { v4 as uuidv4 } from "uuid";
+
+// Components
+import Event from "../global/Event";
+
+// Images
+import competition from "../../images/competition.jpg";
+import competition2 from "../../images/competition2.jpg";
+import competition3 from "../../images/competition3.jpg";
+
+// 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",
+  },
+];
+
+const EventAside = () => {
+  return (
+    <aside className="latest">
+      <h2 className="latest-title">Последние новости</h2>
+      <div className="latest-content">
+        {eventsData.map((evnt) => {
+          return (
+            <Event
+              key={uuidv4()}
+              image={evnt.image}
+              text={evnt.text}
+              time={evnt.time}
+              date={evnt.date}
+            />
+          );
+        })}
+      </div>
+    </aside>
+  );
+};
+
+export default EventAside;

src/components/global/Event.tsx

@@ -1,8 +1,8 @@
 // Modules
 import { Link } from "react-router-dom";
 
-// Icons
-import divider from "../../icons/divider.svg";
+// Components
+import EventDate from "./EventDate";
 
 // Types
 import { eventProps } from "../../types/eventProps";
@@ -14,13 +14,7 @@ const Event = ({ image, time, date, text }: eventProps) => {
         <div className="event-img">
           <img src={image} alt="" />
         </div>
-        <div className="event-date">
-          <span className="event-time">{time}</span>
-          <span className="event-divider">
-            <img src={divider} alt="" />
-          </span>
-          <span className="event-day">{date}</span>
-        </div>
+        <EventDate time={time} date={date} />
       </div>
       <div className="event-bottom">
         <p>{text}</p>

src/components/global/EventDate.tsx

@@ -0,0 +1,19 @@
+// Icons
+import divider from "../../icons/divider.svg";
+
+// Types
+import { eventTimeProps } from "../../types/eventProps";
+
+const EventDate = ({ time, date }: eventTimeProps) => {
+  return (
+    <div className="event-date">
+      <span className="event-time">{time}</span>
+      <span className="event-divider">
+        <img src={divider} alt="" />
+      </span>
+      <span className="event-day">{date}</span>
+    </div>
+  );
+};
+
+export default EventDate;

src/pages/EventItem.tsx

@@ -0,0 +1,104 @@
+// Modules
+
+// Components
+import EventAside from "../components/event_item/EventAside";
+import EventDate from "../components/global/EventDate";
+
+// Images
+import chess from "../images/chess.jpg";
+import prizes from "../images/prizes.jpg";
+
+// Link: /event
+
+const EventItem = () => {
+  return (
+    <main className="eventitem">
+      <div className="container">
+        <div className="eventitem-inner">
+          <div className="eventitem-content">
+            <div className="eventitem-top">
+              <EventDate time={"02:58"} date={"16.12.2021"} />
+              <h2>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Velit
+                pellentesque mattis aliquet semper.
+              </h2>
+            </div>
+            <div className="eventitem-bottom">
+              <div className="eventitem-img">
+                <img src={chess} alt="" />
+              </div>
+              <p>
+                The chess federations of Turkmenistan and Armenia held the first
+                remote session, which was attended by famous chess
+                representatives of the two stated, including heads of
+                federations, masters of sports, international FIDE judges and
+                coaches, grandmasters and long-time friends who once competed
+                with each other at different matches.
+              </p>
+              <p>
+                The Turkmen side was headed by Myratdurdy Hashayev, Chairman of
+                the National Chess Federation, while the Armenian side was
+                headed by the First Vice-President of the Chess Federation of
+                Armenia, Director of the Chess Academy Smbat Lputyan.
+              </p>
+              <p>
+                During the meeting that, despite its remote format, was held in
+                a very warm and friendly atmosphere, the issues related to the
+                educational processes, the training of chess teachers and
+                trainers, cooperation between the federations of the two
+                countries, as well as methods of online chess teaching were
+                discussed.
+              </p>
+              <p>
+                It is worth to note, in Armenia, since 2011, chess has been
+                included in the curriculum of the 2-4th grades of general
+                education schools as a compulsory subject. And the world’s first
+                Center of Chess Educational Research was established on the
+                basis of the Armenian State Pedagogical University named after
+                Khachatur Abovian (ASPU).
+              </p>
+              <div className="eventitem-img">
+                <img src={prizes} alt="" />
+              </div>
+              <p>
+                According to the research of this center, this wise game serves
+                as a locomotive for various psychological processes, contributes
+                to the development of combinatorial and strategic thinking in
+                children, and sense of responsibility. Srbuhi Gevorgyan, Doctor
+                of Psychological Sciences, Professor, Vice-Rector for Academic
+                Affairs, ASPU, expressed the readiness to share with their
+                Turkmen colleagues the materials, research results, information
+                on the introduction of chess in the general educational process.
+              </p>
+              <p>
+                During the video session, the parties agreed to launch a new
+                format of cooperation – online exchange of experience in the
+                field of teaching chess, holding open tournaments of the two
+                countries, etc. In addition, Armenian chess grandmaster Samvel
+                Ter-Sahakyan shared some of his secrets.
+              </p>
+              <p>
+                In turn, Turkmen chess players told about the new Chess Academy
+                in Ashgabat, which is a gift from the head of state. The Academy
+                has two tournament halls for 100 and 200 persons, 10 computer
+                and 25 training classes, chess attributes store, library, rooms
+                for analyzing games, museum, and the office of the Chess
+                Federation of Turkmenistan.
+              </p>
+              <p>
+                At the end of the video bridge, organized with the assistance of
+                the Embassy of Turkmenistan in Yerevan, its participants
+                expressed their common desire to develop cooperation between the
+                chess communities of the two countries, using, among other ways,
+                the possibilities of Internet communication.
+              </p>
+            </div>
+          </div>
+          <EventAside />
+        </div>
+      </div>
+    </main>
+  );
+};
+
+export default EventItem;

src/styles/_event-item.scss

@@ -0,0 +1,67 @@
+.latest {
+  top: 4.8rem;
+  position: sticky;
+  display: flex;
+  flex-direction: column;
+  gap: 4.8rem;
+  width: 100%;
+  max-width: 42rem;
+  height: fit-content;
+}
+
+.latest-title {
+  font-size: 2.8rem;
+  color: $base-green;
+}
+
+.latest-content {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 4rem;
+}
+
+.eventitem-inner {
+  position: relative;
+  display: grid;
+  gap: 5.6rem;
+  grid-template-columns: 2.2fr 1fr;
+}
+
+.eventitem-inner {
+  padding: 8rem 0 16rem 0;
+}
+
+.eventitem-top {
+  display: flex;
+  flex-direction: column;
+  gap: 1.6rem;
+
+  h2 {
+    font-size: 2.8rem;
+  }
+}
+
+.eventitem-bottom {
+  display: flex;
+  flex-direction: column;
+  gap: 3.2rem;
+  font-size: 1.8rem;
+  line-height: 2.52rem;
+}
+
+.eventitem-img {
+  width: 100%;
+  height: 100%;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.eventitem-content {
+  display: flex;
+  flex-direction: column;
+  gap: 4rem;
+}

src/styles/_event.scss

@@ -4,9 +4,14 @@
   gap: 1.6rem;
   padding-bottom: 1.6rem;
   border-bottom: 0.1rem solid $base-green;
+  max-width: 42rem;
+  overflow: hidden;
 }
 
 .event-img {
+  max-width: 42rem;
+  max-height: 30rem;
+  overflow: hidden;
   img {
     width: 100%;
     height: 100%;

src/styles/style.scss

@@ -10,3 +10,4 @@
 @import "./events";
 @import "./rating";
 @import "./profile";
+@import "./event-item";

src/types/eventProps.ts

@@ -1,7 +1,10 @@
-export interface eventProps {
-  image: string;
+export interface eventTimeProps {
   time: string;
   date: string;
+}
+
+export interface eventProps extends eventTimeProps {
+  image: string;
   text: string;
 }