time

src/components/EventPreview/index.js

@@ -7,16 +7,27 @@ export const EventPreview = (props) => {
   const [label, setLabel] = useState("");
   const [color, setColor] = useState("white");
   useEffect(() => {
+      console.log(props)
     switch (props.type) {
       case 1:
         setColor("#53d188");
+        setLabel("sadzenie drzew")
         break;
       case 2:
         setColor("#FBBEBE");
+        setLabel("zbieranie śmieci")
         break;
       default:
     }
 }, [label,color,props.type]);
+const  getDate = (time) =>{
+    var date = new Date(time);
+    return date.toLocaleDateString()
+}
+const  getTime = (time) =>{
+    var date = new Date(time);
+    return date.toLocaleTimeString(navigator.language, {hour: '2-digit', minute:'2-digit'});
+}
   return (
     <Link to={`/event/${props.id}`} className={styles.link}>
       <div className={styles.item}>
@@ -26,10 +37,13 @@ export const EventPreview = (props) => {
           <BIcon icon="calendar" /> {props.date ?? ""}
         </span>{" "}
         <br></br>
+        <div className="d-flex justify-content-between align-items-center ">
         <div style={{ background: color }} className={styles.block}>
           {label}
         </div>
-      </div>
+        <span  className={styles.createdSpan}>utworzone {getDate(props.createdTime)} o godzinie {getTime(props.createdTime)}</span>
+        </div>
+        </div>
     </Link>
   );
 };

src/components/EventPreview/index.module.scss

@@ -4,7 +4,11 @@
     text-decoration: none;
     color: black !important;
 }
-
+.created{
+}
+.createdSpan{
+    font-size: 0.8em;
+}
 .item {
     border: 1px solid black;
     border-radius: 15px;
@@ -30,10 +34,10 @@
 }
 .block{
     text-align: center;
-    font-weight: 600;
+    font-weight: 400;
-    font-size: 0.8em;
+    font-size: 0.9em;
-    max-width:120px;
+    max-width:150px;
-    padding:3px;
+    padding:5px;
-    height:25px;
+    height:30px;
     border-radius:10px;
 }

src/pages/Home/index.js

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