- implement donation link, in about section

src/components/builder/right/RightSidebar.js

@@ -9,6 +9,7 @@ import Layout from './sections/Layout';
 import Templates from './sections/Templates';
 import Actions from './sections/Actions';
 import Settings from './sections/Settings';
+import About from './sections/About';
 
 const getComponent = (id) => {
   switch (id) {
@@ -24,6 +25,8 @@ const getComponent = (id) => {
       return Actions;
     case 'settings':
       return Settings;
+    case 'about':
+      return About;
     default:
       throw new Error();
   }

src/components/builder/right/sections/About.js

@@ -0,0 +1,44 @@
+import React, { memo } from 'react';
+import { FaCoffee } from 'react-icons/fa';
+import Button from '../../../shared/Button';
+import Heading from '../../../shared/Heading';
+import styles from './About.module.css';
+
+const About = () => {
+  return (
+    <section>
+      <Heading>About</Heading>
+
+      <div className={styles.container}>
+        <h5>Donate to Reactive Resume</h5>
+
+        <p className="leading-loose">
+          As you know, every nook and cranny of this app is free and
+          open-source, but servers don&apos;t pay for themselves.
+        </p>
+
+        <p className="leading-loose">
+          I try to do what I can, but if you found the app helpful, or
+          you&apos;re in a better position than the others who depend on this
+          project for their first job, please consider donating{' '}
+          <span className="font-semibold">
+            as little as $5 to help keep the project alive
+          </span>{' '}
+          :)
+        </p>
+
+        <div className="mt-4 flex">
+          <a
+            href="https://www.buymeacoffee.com/AmruthPillai"
+            rel="noreferrer"
+            target="_blank"
+          >
+            <Button icon={FaCoffee}>Buy me a coffee!</Button>
+          </a>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default memo(About);

src/components/builder/right/sections/About.module.css

@@ -0,0 +1,11 @@
+.container {
+  @apply bg-primary-100 rounded grid gap-5 p-8;
+}
+
+.container h5 {
+  @apply text-lg font-semibold;
+}
+
+.container p {
+  @apply text-sm font-medium;
+}

src/data/rightSections.js

@@ -3,6 +3,7 @@ import {
   MdDashboard,
   MdFontDownload,
   MdImportExport,
+  MdInfo,
   MdSettings,
   MdStyle,
 } from 'react-icons/md';
@@ -38,4 +39,9 @@ export default [
     name: 'Settings',
     icon: MdSettings,
   },
+  {
+    id: 'about',
+    name: 'About',
+    icon: MdInfo,
+  },
 ];

src/modals/sections/ExportModal.js

@@ -38,20 +38,16 @@ const ExportModal = () => {
 
   const handleSinglePageDownload = async () => {
     setLoadingSingle(true);
-    const printSinglePageResume = firebase
-      .functions()
-      .httpsCallable('printSinglePageResume');
-    const { data } = await printSinglePageResume({ id: state.id });
+    const printResume = firebase.functions().httpsCallable('printResume');
+    const { data } = await printResume({ id: state.id, type: 'single' });
     const blob = b64toBlob(data, 'application/pdf');
     openFile(blob);
   };
 
   const handleMultiPageDownload = async () => {
     setLoadingMulti(true);
-    const printMultiPageResume = firebase
-      .functions()
-      .httpsCallable('printMultiPageResume');
-    const { data } = await printMultiPageResume({ id: state.id });
+    const printResume = firebase.functions().httpsCallable('printResume');
+    const { data } = await printResume({ id: state.id, type: 'multi' });
     const blob = b64toBlob(data, 'application/pdf');
     openFile(blob);
   };