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

import React from "react";
import styled from "styled-components";
import { Card, PageLink, Divider, CardSection, CTASection } from "@components/index";
import FrontPageHero from "./FrontPageHero";
import { Event } from "@models/Event";
import { Post } from "@models/Feed";
import { colors } from "@theme/colors";
import Anchor from "@components/Anchor";
import FullWidthSection from "@components/Sections/FullWidthSection";

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

const SponsorReel = styled.div`
  text-align: center;
  & > div {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin-top: 1rem;
    margin-bottom: 4rem;

    & > * {
      margin: 0 1rem;
    }
  }

  a {
    color: ${colors.blue1};
    text-decoration: underline;

    &:hover {
      text-decoration: none;
    }
  }
`;


const FrontPageView: React.FC<FrontPageViewProps> = ({ events, feed }) => (
  <>
    <FrontPageHero />
    <main>
      <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.image || event.tags[0].icon}
            buttonOnClick={() => {}}
          />
        ))}
        <aside>
          <PageLink to="/events/" desc="löydät tapahtumakalenterista&nbsp;›">
            Kaikki tapahtumat
          </PageLink>
        </aside>

      </CardSection>

      <CTASection
        bgColor="orange1"
        link="https://sosso.fi"
        linkText="Lue opiskelijalehden viimeisin numero&nbsp;›"
      >
        Sössöä vuodesta 1969.
      </CTASection>

      <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}`}
            buttonOnClick={() => {}}
          />
        ))}
        <aside>
          <PageLink to="/feed/" desc="ja hallituksen kuulumiset&nbsp;›">
            Lue tuoreimmat uutiset
          </PageLink>
          <PageLink to="https://sik.kuvat.fi" desc="kuvagalleriassa&nbsp;›">
            Kuvia tapahtumista
          </PageLink>
        </aside>
      </CardSection>

      <Divider />

      <FullWidthSection>
        <h6>Yhteistyössä:</h6>
        <SponsorReel>
          <div>
            <Anchor to="#"><img src="https://placehold.it/200x200" /></Anchor>
            <Anchor to="#"><img src="https://placehold.it/200x200" /></Anchor>
            <Anchor to="#"><img src="https://placehold.it/200x200" /></Anchor>
            <Anchor to="#"><img src="https://placehold.it/200x200" /></Anchor>
            <Anchor to="#"><img src="https://placehold.it/200x200" /></Anchor>
          </div>
          <Anchor to="/yritysyhteistyo">Haluatko kuulla lisää yhteistyöstä kanssamme?</Anchor>
        </SponsorReel>
      </FullWidthSection>
    </main>
  </>
)

export default FrontPageView;