Continue page/view splitting

src/views/EventPage/EventPageView.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import "./EventPage.scss";
+import { Event } from "@models/Event";
+import Button, { ButtonType } from "@components/Button";
+import Anchor from "@components/Anchor";
+import PageSection from "@components/PageSection";
+import MainSection from "@components/MainSection";
+import AsideSection from "@components/AsideSection/AsideSection";
+
+interface EventPageViewProps {
+  event?: Event;
+}
+
+
+class EventPageView extends React.Component<EventPageViewProps> {
+  render() {
+    const { event } = this.props;
+    if (!event) return <div>Loading</div>
+
+    return (
+      <div className="event-page">
+        <PageSection backgroundColor="white1">
+          <AsideSection textColor="black1" />
+          <MainSection textColor="black1">
+            <img className="event-banner" src={event.tags[0].icon} alt={event.title_fi} ></img>
+            <h1 className="event-title">{event.title_fi}</h1>
+            <p>
+              {event.description_fi}
+            </p>
+            <p>
+              {event.content_fi}
+            </p>
+            {/* We may have multiple signup forms. Generate own Button for each one */}
+            <div className="event-signup-buttons">
+              {event.signupForm.map(sf => (
+                <Anchor key={sf.id} to={`/signup/${sf.id}`}>
+                  <Button type={ButtonType.Filled} onClick={() => {}}>
+                    {sf.title}
+                  </Button>
+                </Anchor>
+              )
+              )}
+            </div>
+          </MainSection>
+          <AsideSection backgroundColor="white1" textColor="black1" />
+        </PageSection>
+      </div>
+    );
+  }
+}
+
+export default EventPageView;