Merge pull request #145 from gridaco/staging

Add comming-soon screens

Author: softmarshmallow

app/lib/components/comming-soon-template.tsx

@@ -0,0 +1,55 @@
+import styled from "@emotion/styled";
+import React, { ReactNode } from "react";
+import { BlackButton } from "./style/global-style";
+
+interface Props {
+  coverImage?: string;
+  content: ReactNode;
+  buttonText: string;
+  onClick: () => void;
+}
+
+export function CommingSoonTemplate(props: Props) {
+  return (
+    <Wrapper>
+      {props.coverImage && (
+        <ImageBox>
+          <Image src={props.coverImage} />
+        </ImageBox>
+      )}
+
+      <Content hasImage={!!props.coverImage}>{props.content}</Content>
+      <ButtonWrapper>
+        <Button onClick={props.onClick}>{props.buttonText}</Button>
+      </ButtonWrapper>
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  /* -8 is for reset body margin */
+  margin: 0 -8px;
+`;
+
+const ImageBox = styled.div``;
+
+const Image = styled.img`
+  width: 100vw;
+  height: auto;
+`;
+
+const Content = styled.div<{ hasImage: boolean }>`
+  margin-top: ${(props) => (props.hasImage ? "27px" : "36px")};
+  padding: 0 16px;
+`;
+
+const ButtonWrapper = styled.div`
+  position: absolute;
+  bottom: 12px;
+  margin: 0 16px;
+`;
+
+const Button = styled.button`
+  ${BlackButton}
+  width: calc(100vw - 32px);
+`;