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

import React from "react";
import styled from "styled-components";
import { PageSection, Card, PageLink, SponsorReel, Divider, CardSection, SössöSection } 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";

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

const SponsorSection = styled(PageSection)`
  justify-content: center;

  color: ${colors.black};
  background-color: ${colors.white};
  a {
    color: ${colors.blue1};
  }
`;


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={() => {}}
          />
        ))}
        <div>
          <PageLink to="/events/" desc="löydät tapahtumakalenterista&nbsp;›">
            Kaikki tapahtumat
          </PageLink>
        </div>

      </CardSection>

      <SössöSection>
        <h3>Sössöä vuodesta 1969.</h3>
        <Anchor to="https://sosso.fi">Lue opiskelijalehden viimeisin numero&nbsp;›</Anchor>
      </SössöSection>

      <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={() => {}}
          />
        ))}
        <div>
          <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>
      </CardSection>

      <SponsorSection>
        <Divider />
        <SponsorReel />
      </SponsorSection>
    </main>
  </>
)

export default FrontPageView;