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 } from "../components";

export interface DocHomeViewProps extends CommonProps {}

const DocHomeView: ReactView<DocHomeViewProps> = (props) => {
  const { commonProps } = props;
  return (
    <Layout {...commonProps} showSideMenu={true}>
      <StyledDocHomeWrapper>
        <StyledDocSectionEntryCardsGrid>
          {commonProps?.menuDefinition != null &&
            Object.entries(commonProps.menuDefinition).map(
              ([sectionSlug, section]) => (
                <DocSectionEntryCard
                  key={sectionSlug}
                  themeScheme={commonProps?.themeScheme}
                  href={`/docs/${sectionSlug}/${
                    Object.keys(section.pagesBySlug)[0]
                  }`}
                  coverImageUrl={
                    "/public/assets/images/the-big-picture_light-on-dark.svg"
                  }
                  title={section.title}
                  summary={section.summary}
                />
              )
            )}
        </StyledDocSectionEntryCardsGrid>
      </StyledDocHomeWrapper>
    </Layout>
  );
};

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

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

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

DocHomeView.displayName = "DocHomeView";
export default DocHomeView;