list

src/components/EventPreview/index.js

@@ -1,16 +1,36 @@
 import { Link } from "react-router-dom";
 import { BIcon } from "../BIcon";
 import styles from "./index.module.scss";
-
+import React, { useState, useEffect } from "react";
+import {orangeColor} from "../../index.scss";
 export const EventPreview = (props) => {
-    return (
-        <Link to={`/event/${props.id}`} 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>
-    );
+  const [label, setLabel] = useState("");
+  const [color, setColor] = useState("white");
+  useEffect(() => {
+    console.log(orangeColor) //nie działa :((
+    switch (props.type) {
+      case 1:
+        setColor("green");
+        break;
+      case 2:
+        setColor("red");
+        break;
+      default:
+    }
+}, [label,color,props.type]);
+  return (
+    <Link to={`/event/${props.id}`} className={styles.link}>
+      <div className={styles.item}>
+        <span className={styles.location}>{props.name ?? "Event name"}</span>{" "}
+        <br></br>
+        <span className={styles.time}>
+          <BIcon icon="calendar" /> {props.date ?? ""}
+        </span>{" "}
+        <br></br>
+        <div style={{ background: color }} className={styles.block}>
+          {label}
+        </div>
+      </div>
+    </Link>
+  );
 };

src/components/EventPreview/index.module.scss

@@ -25,3 +25,15 @@
     font-size: 1.7em;
     transition: color 0.2s ease;
 }
+.time{
+    font-size: 1.1em;
+}
+.block{
+    text-align: center;
+    font-weight: 600;
+    font-size: 0.8em;
+    max-width:120px;
+    padding:3px;
+    height:25px;
+    border-radius:10px;
+}