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;
+}

src/index.scss

@@ -5,8 +5,18 @@ $gray: #dadada;
 $bggray: #e8e8e8;
 $bghover: darken($bggray, 10);
 $bg: #ffffff;
+$orange:#FBBEBE;
 $defaultWidth: 90vw;
 $maxWidth: 650px;
+$theme-colors: (
+  'orangeColor': #FBBEBE,
+  'anotherColor': #FFF,
+);
+:export {
+    @each $key, $value in $theme-colors {
+      #{unquote($key)}: $value;
+    }
+  }
 
 * {
     margin: 0;

src/pages/Home/index.js

@@ -67,7 +67,7 @@ export const Home = () => {
                     </Button>
                 </Stack>
                 {list.map((e, i) => {
-                    return <EventPreview name={e.name} date={e.date} id={e._id} key={i} />;
+                    return <EventPreview name={e.name} type={e.type} date={e.date} id={e._id} key={i} />;
                 })}
             </Stack>
         </div>