add end widget

App/src/App.tsx

@@ -102,7 +102,7 @@ function generateConfig(): Promise<React.ReactNode[]> {
         })
             .then(data => data.json())
             .then(suggestions => {
-                const widgets = generateWidgets({ config: suggestions, numberOfWidgets: 15 })
+                const widgets = generateWidgets({ config: suggestions, numberOfWidgets: CONFIG.MAX_WIDGETS })
                 resolve(widgets);
             })
             .catch(reject)

App/src/components/categories/Affirmation.tsx

@@ -17,7 +17,7 @@ const Affirmation = (props: AffirmationProps) => {
 
         useEffect(() => {
             if (affRef.current && writeRef.current) {
-                gsap.fromTo(affRef.current, { opacity: 0 }, { opacity: 1, duration: 2, ease: "power2.inOut" });
+                gsap.fromTo(affRef.current, { opacity: 0 }, { opacity: 1, duration: 0.5, ease: "power2.inOut" });
                 gsap.fromTo(writeRef.current, { scale: 0.9 }, { scale: 1.1, duration: 1, yoyo: true, repeat: -1, ease: "bounce.in" });
             }
         }, []);
@@ -34,4 +34,4 @@ const Affirmation = (props: AffirmationProps) => {
         );
     }
 
-export default Affirmation;
+export default Affirmation;

App/src/components/categories/EndCard.tsx

@@ -0,0 +1,31 @@
+import { useEffect, useRef } from "react";
+import { FaCrown } from "react-icons/fa";
+import { gsap } from 'gsap';
+
+const EndCard = () => {
+    const affRef = useRef<HTMLDivElement>(null);
+    const writeRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (affRef.current && writeRef.current) {
+            gsap.fromTo(affRef.current, { opacity: 0 }, { opacity: 1, duration: 0.5, ease: "power2.inOut" });
+            gsap.fromTo(writeRef.current, { scale: 0.9 }, { scale: 1.1, duration: 1, yoyo: true, repeat: -1, ease: "bounce.in" });
+        }
+    }, []);
+
+    return (
+        <div className="flex justify-center items-center h-full bg-slate-900">
+            <div>
+                <div ref={affRef} className="pb-8 text-2xl text-slate-200">
+                    Good Job!!<br />
+                    <small>You're all done</small>
+                </div>
+                <div ref={writeRef} className="flex justify-center items-center text-slate-200">
+                    <FaCrown size={148} />
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default EndCard;

App/src/components/categories/Exercise.tsx

@@ -36,4 +36,4 @@ const Exercise = (props: ExerciseProps) => {
     );
 }
 
-export default Exercise;
+export default Exercise;

App/src/config.ts

@@ -10,7 +10,7 @@ export const CONFIG = {
     /**
      * @brief The max widgets that the app will generate for a given day
      */
-    MAX_WIDGETS: 4,
+    MAX_WIDGETS: 15,
     /**
     * @brief The time after which it is considered the end of day (military time)
     */

App/src/utils/generateWidgets.tsx

@@ -5,6 +5,7 @@ import Social from "../components/categories/Social";
 import Water from "../components/categories/Water";
 import Widget from "../components/Widget";
 import Affirmation from "../components/categories/Affirmation";
+import EndCard from "../components/categories/EndCard"
 import { Affirmations } from "./constants";
 
 export interface Widget {
@@ -62,5 +63,7 @@ export const generateWidgets = (props: Widget): React.ReactNode[] => {
             widgets.push(<Widget><Affirmation affirmation={affirmation}></Affirmation></Widget>);
         }
     }
+
+    widgets.push(<Widget><EndCard></EndCard></Widget>)
     return widgets;
 }