added Event page

client/src/App.js

@@ -38,7 +38,19 @@ export const App = (props) => {
                         props.events.map((e) => {
                             return (
                                 <Route key={e._id} exact path={`/event/${e._id}`}>
-                                    <Event id={e._id}></Event>
+                                    <Event
+                                        data={{
+                                            name: e.name,
+                                            type: e.type,
+                                            description: e.description,
+                                            address: e.address,
+                                            time: e.time,
+                                            lat: e.lat,
+                                            lon: e.lon,
+                                            id: e._id,
+                                            createdTime: e.created.time,
+                                        }}
+                                    ></Event>
                                 </Route>
                             );
                         })}
@@ -48,5 +60,3 @@ export const App = (props) => {
         </EVENT_CONTEXT.Provider>
     );
 };
-
-export default App;

client/src/pages/Event/index.js

@@ -1,5 +1,25 @@
-// import styles from "./index.module.scss";
+import { useTitle } from "../../utils/useTitle";
+import { container } from "../../global.module.scss";
+import { Stack } from "react-bootstrap";
+import styles from "./index.module.scss";
+import { EventField } from "../../components/EventField";
+import { EventType } from "../../components/EventType";
 
 export const Event = (props) => {
-    return <></>;
+    const { data } = props;
+    useTitle(data.name);
+
+    return (
+        <div className={container}>
+            <Stack gap={2}>
+                <span className={styles.header}>
+                    <p className={styles.title}>{data.name}</p>
+                    <EventType style={{ display: "inline-block" }} type={data.type} />
+                </span>
+                {data.address && data.address !== "Brak lokalizacji" && <EventField icon="geo-alt-fill" content={data.address} />}
+                <EventField icon="calendar3" content={new Date(data.time).toLocaleString(navigator.language, { dateStyle: "full", timeStyle: "short" })} />
+                <p className={styles.description}>{data.description}</p>
+            </Stack>
+        </div>
+    );
 };

client/src/pages/Event/index.module.scss

@@ -0,0 +1,21 @@
+@import "../../index.scss";
+
+.title {
+    color: $accent;
+    text-align: center;
+    font-size: 2.1em;
+    font-weight: bold;
+    margin: 0;
+    margin-bottom: 5px;
+}
+.header {
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    column-gap: 10px;
+    justify-content: center;
+}
+.description {
+    font-size: 1.2em;
+    text-align: center;
+}