Merge pull request #122 from MTeresaMB/feature/#119-add-new-export-bu…

…ttons add new export buttons
Lemoncode · Jul 11, 2023 · c6475a4 · c6475a4
2 parents 63148bd + cfd840c
commit c6475a4
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 8 deletions.
diff --git a/apps/react-app/src/pods/template-export/template-export.component.tsx b/apps/react-app/src/pods/template-export/template-export.component.tsx
@@ -32,14 +32,24 @@ export const TemplateExport: React.FC<Props> = props => {
           placeholder="Pega aquí tu JSON en formato MAC"
           className={classes.textarea}
         ></textarea>
-        <Button
-          disabled={text ? false : true}
-          onClick={handleOnExport}
-          className={classes.buttonClass}
-          showIcon={false}
-        >
-          Export
-        </Button>
+        <div className={classes.buttonContainer}>
+          <Button
+            disabled={text ? false : true}
+            onClick={handleOnExport}
+            className={classes.buttonClass}
+            showIcon={false}
+          >
+            Export To Word
+          </Button>
+          <Button
+            disabled={text ? false : true}
+            onClick={handleOnExport} /* TODO functionality for Markdown export */
+            className={classes.buttonClass}
+            showIcon={false}
+          >
+            Export To Markdwon
+          </Button>
+        </div>
       </div>
       <Footer />
     </div>

diff --git a/apps/react-app/src/pods/template-export/template-export.styles.ts b/apps/react-app/src/pods/template-export/template-export.styles.ts
@@ -48,7 +48,26 @@ export const textarea = css`
   color: ${theme.palette.light[700]};
 `;
 
+export const buttonContainer = css `
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  gap: ${theme.spacing(4)};
+  width: 100%;
+
+  @media (max-width: 725px) {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+`;
+
 export const buttonClass = css`
   width: 50%;
   cursor: pointer;
+
+  @media (max-width: 725px) {
+    width: 100%;
+  }
 `;
+