GitFOSS

// 3rd-party
import React from "react";
import type { ReactView } from "@ethicdevs/react-monolith";
import styled from "styled-components";

// app
import type { CommonProps } from "../types";
import { Layout, DocSectionEntryCard, ButtonAnchor } from "../components";
import { ReactMonolithLogo } from "../components/icons";

export interface HomeViewProps extends CommonProps {
  foo?: boolean;
}

const HomeView: ReactView<HomeViewProps> = (props) => {
  const { commonProps } = props;
  return (
    <Layout {...commonProps} showSideMenu={false}>
      <StyledHomeWrapper>
        <ReactMonolithLogo size={256} />
        <StyledButtonsRow>
          <ButtonAnchor href={"/docs"}>Get Started</ButtonAnchor>
          <ButtonAnchor href={"/api-reference"}>API Reference</ButtonAnchor>
        </StyledButtonsRow>
        <StyledCardsGrid>
          {commonProps?.menuDefinition != null &&
            Object.entries(commonProps.menuDefinition)
              .slice(0, 3)
              .map(([sectionSlug, section]) => (
                <DocSectionEntryCard
                  key={sectionSlug}
                  themeScheme={commonProps?.themeScheme}
                  href={`/docs/${sectionSlug}/${
                    Object.keys(section.pagesBySlug)[0]
                  }`}
                  coverImageUrl={""}
                  title={section.title}
                  summary={section.summary}
                />
              ))}
        </StyledCardsGrid>
        <ButtonAnchor href={"/docs"}>Discover More</ButtonAnchor>
      </StyledHomeWrapper>
    </Layout>
  );
};

const StyledHomeWrapper = styled.div`
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;

  gap: 24px;
  padding: 24px 16px 64px 16px;
  width: 100%;
  max-width: 1176px;
  margin: 0 auto;
`;

const StyledCardsGrid = styled.div`
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
`;

const StyledButtonsRow = styled.div`
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
  max-width: 440px;
  width: 100%;
`;

HomeView.displayName = "HomeView";
export default HomeView;