feat: Quick and Dirty Export page

frontend/src/Views/Export/ExportPage.styles.ts

@@ -0,0 +1,68 @@
+import styled from '@emotion/styled';
+import * as tokens from '@bcgov/design-tokens/js';
+import screenSizes from '@Constants/ScreenSize';
+
+const StyledLandingContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  margin-top: auto;
+  gap: 40px;
+`;
+
+const StyledContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  max-width: 90%;
+  margin: 50px 0 30px 0;
+  top: 15vh;
+  gap: 10px;
+  padding: 0 0 20px 0;
+  border: 1px solid ${tokens.themeGray40};
+
+  #dataFileHeader {
+    display: flex;
+    text-align: center;
+    width: 100%;
+    height: 51px;
+    background-color: ${tokens.themeGray10};
+    border: 1px solid ${tokens.themeGray40};
+    font: ${tokens.typographyBoldH6};
+    justify-content: center;
+    align-items: center;
+  }
+
+  h6 {
+    margin-bottom: 0;
+  }
+
+  p {
+    font: ${tokens.typographyRegularSmallBody};
+    color: ${tokens.typographyColorSecondary};
+    text-align: center;
+    padding: 0 54px 0 54px;
+  }
+
+  @media (min-width: ${screenSizes.desktop}) {
+    max-width: 40%;
+    min-height: 40%;
+    gap: 2px;
+    top: 10vh;
+    text-align: center;
+
+    h2 {
+      font: ${tokens.typographyBoldH2};
+    }
+
+    p {
+      font: ${tokens.typographyRegularLargeBody};
+      color: ${tokens.typographyColorSecondary};
+    }
+  }
+`;
+
+export { StyledContent, StyledLandingContainer };

frontend/src/Views/Export/ExportPage.tsx

@@ -1,14 +1,46 @@
 /**
- * Hello World page. Nothing Special. This is a skeleton!!!
- * @desc only shows Hello World, will implement as Designer creates mockup
- * @author @Kcaparas
+ * @desc Export page for downloading your work in nmp format
+ * @author @GDamaso
  */
 
-import React from 'react';
+import Button from '@Commons/Button/Button.tsx';
+import MainPageHeader from '@Commons/MainPageHeader/MainPageHeader.tsx';
+import MainPageFooter from '@Commons/MainPageFooter/MainPageFooter.tsx';
+import { FC } from 'react';
+import { StyledContent, StyledLandingContainer } from './ExportPage.styles.ts';
 
-const ExportPage: React.FC = () => {
-  localStorage.clear();
-  return <h2>Export Page</h2>;
+const ExportPage: FC = () => {
+  const downloadFile = () => {
+    localStorage.clear();
+    console.log('Downloading');
+  };
+
+  return (
+    <StyledLandingContainer>
+      <MainPageHeader />
+      <StyledContent>
+        <div id="dataFileHeader">
+          <h6>NMP Data File </h6>
+        </div>
+        <p>To continue later, Download this file to your computer or mobile device.</p>
+        <p>Load a NMP file on the Homepage when you want to continue.</p>
+        <a href="https://nmp.apps.nrs.gov.bc.ca/Report/Report#">
+          <p>How to use this data file</p>
+        </a>
+        <Button
+          size="md"
+          text="Download file"
+          handleClick={downloadFile}
+        />
+      </StyledContent>
+      <Button
+        size="lg"
+        text="Return to Calculation"
+        path="/main"
+      />
+      <MainPageFooter />
+    </StyledLandingContainer>
+  );
 };
 
 export default ExportPage;