Created EventPreview component

src/components/EventPreview/index.js

@@ -0,0 +1,16 @@
+import { Link } from "react-router-dom";
+import { BIcon } from "../BIcon";
+import styles from "./index.module.scss";
+
+export const EventPreview = (props) => {
+    return (
+        <Link to="/" className={styles.link}>
+            <div className={styles.item}>
+                <span className={styles.location}>{props.name ?? "Event name"}</span> <br></br>
+                <span>
+                    <BIcon icon="calendar" /> {props.date ?? ""}
+                </span>
+            </div>
+        </Link>
+    );
+};

src/components/EventPreview/index.module.scss

@@ -0,0 +1,21 @@
+@import "../../index.scss";
+
+.link {
+    text-decoration: none;
+    color: black !important;
+}
+
+.item {
+    border: 1px solid black;
+    border-radius: 15px;
+    width: 70vw;
+    max-width: 500px;
+    height: 10vh;
+    margin: 3px auto;
+    padding: 10px 25px;
+}
+
+.location {
+    font-weight: bold;
+    font-size: 1.7em;
+}

src/pages/Home/index.js

@@ -1,7 +1,8 @@
+import axios from "axios";
 import { useState, useEffect } from "react";
 import { Stack } from "react-bootstrap";
+import { EventPreview } from "../../components/EventPreview";
 import styles from "./index.module.scss";
-import axios from "axios";
 import { BACKEND_URL } from "../../constants";
 
 export const Home = () => {
@@ -23,16 +24,10 @@ export const Home = () => {
         <div className={styles.con}>
             <Stack gap={1}>
                 {events.map((e, i) => {
-                    return (
-                        <div key={i} className={styles.item}>
-                           <span className={styles.location}>{e.name}</span> <br></br>
-                           <span>{e.date}</span> 
-                        </div>
-                    );
+                    return <EventPreview name={e.name} date={e.date} key={i} />;
                 })}
-                  <p className={styles.more}>więcej</p>
+                <p className={styles.more}>więcej</p>
             </Stack>
-          
         </div>
     );
 };

src/pages/Home/index.module.scss

@@ -1,24 +1,11 @@
-.item {
-    border: 1px solid black;
-    border-radius: 15px;
-    width: 70vw;
-    max-width: 500px;
-    height:10vh;
-    margin: 0 auto;
-    padding-left:25px;
-    padding-top:10px;
-}
 .con {
     width: 70vw;
     max-width: 500px;
     margin: 0 auto;
     font-family: "Poppins", sans-serif;
 }
-.location {
-    font-weight: bold;
-    font-size: 1.7em;
-}
-.more{
-    color: #5873FF;
+
+.more {
+    color: #5873ff;
     text-align: right;
-}
+}