start new branch

2024-02-03 14:56:21 +02:00
parent 2ea74f90ac
commit 3f2cb7717e
30 changed files with 587 additions and 208 deletions
@@ -0,0 +1,152 @@
+import React from "react";
+import styled from "styled-components";
+import { Divider, TextSection, Link } from "@components/index";
+import colors from "@theme/colors";
+import ContactCard from "@components/ContactCard";
+
+import BoardJson from "./board.json";
+
+const orderedCommittees = [
+  BoardJson,
+];
+
+const blankProfile = "/img/blank_profile.png";
+
+const BlueLink = styled(Link)`
+  color: ${colors.blue1};
+
+  &:hover {
+    color: ${colors.lightBlue};
+  }
+`;
+
+const Container = styled.div`
+  color: ${colors.darkBlue};
+  align-items: center;
+  justify-content: center;
+  width: 50vw;
+
+  & > h2 {
+    text-transform: uppercase;
+    font-size: 4rem;
+    width: 100%;
+  }
+
+  & > div {
+    display: flex;
+    flex-flow: row wrap;
+  }
+
+  @media (max-width: 950px) {
+    width: 100vw;
+  }
+`;
+
+const ContactContainer = styled.div`
+  overflow-x: hidden;
+  @media (max-width: 950px) {
+    margin-top: 0;
+  }
+`;
+
+const TitleContainer = styled.div`
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  padding: 10px 10px;
+  flex-direction: column;
+  margin: auto;
+`;
+
+const CommitteeContainer: React.FC<{
+  committee: Committee;
+  children: React.ReactNode;
+}> = ({ committee, children }) => (
+  <Container>
+    <TitleContainer>
+      <h2>
+        {committee.name_fi || committee.name_en}
+      </h2>
+    </TitleContainer>
+    <div>
+      {committee.roles.map((role) => (
+        role.representatives.map((representative) => (
+          <ContactCard
+            key={representative.name}
+            name={representative.name}
+            phone={representative.phone_number}
+            email={representative.email}
+            image={(committee.name_en === "Board") ? (representative.image || blankProfile) : null}
+            role_fi={role.name_fi}
+            role_en={role.name_en}
+          />
+        ))
+      ))}
+    </div>
+    {children}
+  </Container>
+);
+
+interface Committee {
+  name_fi: string;
+  name_en: string;
+  roles: Array<Role>;
+}
+
+interface Role {
+  name_fi: string;
+  name_en: string;
+  representatives: Array<Representative>
+}
+
+interface Representative {
+  name: string;
+  phone_number?: string;
+  email?: string;
+  image?: string;
+}
+
+const BoardPageView: React.FC = () => (
+  <>
+    <TextSection>
+      <h1>Hallitus</h1>
+      <p>
+        Tältä sivulta löydät killan hallituksen jäsenten yhteystiedot.
+      </p>
+    </TextSection>
+    <ContactContainer>
+      {orderedCommittees.map((json) => (
+        <React.Fragment key={json.slug}>
+          {(json.slug !== "board") && (
+            <Divider />
+          )}
+          <TextSection id={json.slug}>
+            <CommitteeContainer committee={json}>
+              {(json.slug === "board") && (
+                <div>
+                  <p>
+                    {"Koko hallitukseen saa yhteyden lähettämällä sähköpostia osoitteeseen "}
+                    <BlueLink to="mailto:hallitus@sahkoinsinoorikilta.fi">
+                      hallitus@sahkoinsinoorikilta.fi
+                    </BlueLink>
+                    .
+                  </p>
+                  <p>
+                    {"Hallitukselle voi myös lähettää palautetta täyttämällä "}
+                    <BlueLink to="https://docs.google.com/forms/d/e/1FAIpQLSeD8Hm66uvwr7Xa2WGgOCfI2RS1NrZsmISf2QBKUcJf_stv8g/viewform?usp=sf_link">
+                      palautelomakkeen
+                    </BlueLink>
+                    . Lomakkeen vastauksia käydään läpi hallituksen kokouksissa.
+                  </p>
+                </div>
+              )}
+            </CommitteeContainer>
+          </TextSection>
+        </React.Fragment>
+      ))}
+    </ContactContainer>
+  </>
+);
+
+export default BoardPageView;