.ts
TypeScript
(application/typescript)
// 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 { ButtonAnchor, Layout, PageWrapper } from "../components";

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

const HomeView: ReactView<HomeViewProps> = (props) => {
  const { commonProps } = props;
  return (
    <Layout {...commonProps}>
      <PageWrapper>
        <StyledButtonsRow>
          <ButtonAnchor href={"/auth/register"}>Get Started</ButtonAnchor>
          <ButtonAnchor href={"/features"}>Learn More</ButtonAnchor>
        </StyledButtonsRow>
      </PageWrapper>
    </Layout>
  );
};

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;