web2.0-frontend/src/views/FrontPage/FrontPageView.tsx

import React from "react";
import "./FrontPage.scss";
import Card from "@components/Card";
import { Event } from "@models/Event";
import { Post } from "@models/Feed";

import PageSection from "@components/PageSection";

import PageLink from "@components/PageLink/PageLink";
import HeroMainSection from "@components/Hero/HeroMainSection/HeroMainSection";
import HeroAsideSection from "@components/Hero/HeroAsideSection/HeroAsideSection";
import Button, { ButtonType } from "@components/Button";
import Ribbon from "@components/Ribbon";
import SponsorReel from "@components/SponsorReel";
import HeroAsideItem from "@components/Hero/HeroAsideItem/HeroAsideItem";
import TextAnchor from "@components/TextAnchor";

interface FrontPageViewProps {
  events: Event[];
  feed: Post[];
}

const FrontPageView: React.FC<FrontPageViewProps> = ({ events, feed }) => (
  <div className="front-page">
    <PageSection backgroundColor="dark-blue" fullSize className="lander-hero">
      <HeroMainSection>
        <h1>Aalto-yliopiston Sähköinsinöörikilta</h1>
        <p>
              on elektroniikan ja sähkötekniikan opiskelijoiden järjestö. Kilta
              kasaa yhteen yli 600 alansa huippua, jotka ovat avainasemassa
              vauhdilla sähköistyvän maailmamme kehityksessä.
        </p>
        <div className="hero-button-container">
          <Button type={ButtonType.Hero} onClick={() => { }}>
            <h6>Killan tehtävät&nbsp;›</h6>
          </Button>
          <Button type={ButtonType.Hero} onClick={() => { }}>
            <h6>Vastapainoa opiskelulle&nbsp;›</h6>
          </Button>
        </div>
      </HeroMainSection>
      <HeroAsideSection textColor="light-blue" backgroundColor="dark-blue">
        <HeroAsideItem
          title="Vasta-aloittanut opiskelija"
          linkHref="/kilta/fuksi"
          linkText="Fuksit"
        >
              Fuksikasvatusta, ISO-toimintaa, lorem ipsum dolor sit ja amet.
        </HeroAsideItem>
        <HeroAsideItem
          title="Harkitsetko uraa alalla?"
          linkHref="/opinnot_ja_ura"
          linkText="Opinnot ja ura"
        >
              Oletko abi, vaihtamassa uraa tai valmistumassa?
        </HeroAsideItem>
        <HeroAsideItem
          title="Yhteistyö yritysten kanssa"
          linkHref="/yritysyhteistyo"
          linkText="Yritysyhteistyö"
        >
              Avoimet työpaikat ja excursiot. Infoa yritysten edustajille ja
              sponsseille.
        </HeroAsideItem>
      </HeroAsideSection>
    </PageSection>
    <PageSection backgroundColor="white1" cardSection>
      {events.map(event => (
        <Card
          key={event.id}
          title={event.title_fi}
          start_time={event.start_time}
          text={event.description_fi}
          link={`/events/${event.id}`}
          image={event.tags[0].icon}
          button={
            <Button type={ButtonType.Filled} onClick={() => { }}>
              <h6>Lue lisää&nbsp;›</h6>
            </Button>
          }
        />
      ))}
      <div className="card" key="links">
        <PageLink to="/events/" desc="löydät tapahtumakalenterista&nbsp;›">
              Kaikki tapahtumat
        </PageLink>
      </div>
    </PageSection>
    <PageSection backgroundColor="orange1">
      <Ribbon>
        <h3>Sössöä vuodesta 1969.</h3>
        <TextAnchor textColor="white1" hoverColor="blue1" size="small-ribbon" to="https://sosso.fi">
          <h4>Lue opiskelijalehden viimeisin numero&nbsp;›</h4>
        </TextAnchor>
      </Ribbon>
    </PageSection>
    <PageSection
      backgroundColor="white1"
      bottomBorder
      cardSection
    >
      {feed.map(inst => (
        <Card
          key={inst.id}
          title={inst.title_fi}
          start_time={inst.publish_time}
          text={inst.description_fi}
          link={`/feed/${inst.id}`}
          button={
            <Button type={ButtonType.Filled} onClick={() => { }}>
              <h6>Lue lisää&nbsp;›</h6>
            </Button>
          }
        />
      ))}
      <div className="card" key="links">
        <PageLink to="/feed/" desc="ja hallituksen kuulumiset&nbsp;›">
              Lue tuoreimmat uutiset
        </PageLink>
        <PageLink to="https://sik.kuvat.fi" desc="kuvagalleriassa&nbsp;›">
              Kuvia tapahtumista
        </PageLink>
      </div>
    </PageSection>
    <PageSection center backgroundColor="white1">
      <SponsorReel />
    </PageSection>
  </div>
)

export default FrontPageView;