feat(challenges): created challenges pages

src/components/Challenges/ChallengeTile.jsx

@@ -0,0 +1,41 @@
+import { tv } from "tailwind-variants/lite";
+import Button from "../Button";
+import { FaArrowRight } from "react-icons/fa6";
+
+const tileVariants = tv({
+    base: 'font-poppins flex flex-col justify-start py-6 px-4 rounded-lg shadow-[0_4px_15px_rgba(0,0,0,0.25)]',
+
+    variants: {
+        size: {
+            sm: 'h-[222px]',
+            lg: 'h-[222px] md:h-[340px]'
+        },
+        span: {
+            2: 'col-span-1 md:col-span-2',
+            3: 'col-span-1 md:col-span-3'
+        }
+    },
+});
+
+export default function ChallengeTile({ size, span, title, subtitle, tags, to }){
+    return (
+        <div className={tileVariants({ size, span })}>
+            <div className="h-full flex flex-col justify-between">
+                <div className="flex flex-col gap-2">
+                    <h2 className="text-lg md:text-[20px] font-medium">{title}</h2>
+                    <p className="text-base">{subtitle}</p>
+                </div>
+                {/* tag and button */}
+                <div className="flex flex-row justify-between items-center">
+                    <p className="flex-1">{tags}</p>
+                    <Button
+                        size='circ'
+                        color='primary'
+                        label={<FaArrowRight/>}
+                        to={to}
+                    />
+                </div>
+            </div>
+        </div>
+    );
+};

src/pages/Challenges.jsx

@@ -1,66 +1,56 @@
-import { db } from "../firebase";
-import { doc, setDoc, updateDoc, getDoc } from "firebase/firestore";
 import Button from "../components/Button";
-import { useState } from "react";
+import ChallengeTile from "../components/Challenges/ChallengeTile";
 
 export default function Challenges() {
-    // use state to use data
-    const [teamData, setTeamData] = useState(null);
-
-    // add a new document in the collection test function
-    async function writeTestDoc() {
-        // create a collection with a document called team 
-        try {       
-            await setDoc(doc(db, "test", "team"), {
-                name: "Mint Chip Mavericks",
-                sprintsCompleted: 3
-            });
-            console.log("New Team data added")
-        } catch (error) {
-            console.error("The error found", error);
-        };
-    };
-
-    // update data in an existing doc
-    async function addDataToDoc() {
-        const teamDocRef = doc(db, "test", "team")
-        await updateDoc(teamDocRef, {
-            members: 3
-        });
-
-        console.log("New field added");
-    };
-
-    // read data in the doc to display
-    async function readTestDoc() {
-        const teamDocRef = doc(db, "test", "team");
-        const teamDocSnap = await getDoc(teamDocRef);
-
-        if (teamDocSnap.exists()) {
-            console.log("document data", teamDocSnap.data());
-            setTeamData(teamDocSnap.data());
-        } else {
-            console.log("there is no data")
-        };
-    };
-
     return (
-    <div className="min-h-screen bg-emerald-100 flex flex-col gap-10 items-center justify-center">
-        <h1 className="text-4xl font-bold text-lime-500">Challenges Page! 🎉</h1>
-
-        {/* test write document button */}
-        <Button onClick={writeTestDoc} label="create a collection/document" size="lg"/>
-
-        {/* update test document button */}
-        <Button onClick={addDataToDoc} label="add data field to a document" size="lg"/>
-
-        {/* test read document button */}
-        <Button onClick={readTestDoc} label="read a document and display data" size="lg"/>
-
-        {/* tester sentence with the added firestore data */}
-        {teamData && (
-            <p>{teamData.name} has {teamData.members} members and completed {teamData.sprintsCompleted} sprints!</p>
-        )}
-    </div>
+        <div className="bg-white">
+            {/* title section */}
+            <div className="flex flex-col mx-8 sm:mx-15 md:mx-10 lg:mx-20 xl:mx-40 2xl:mx-80">
+                <h1 className="text-3xl font-playfair font-semibold text-eerie place-self-center lg:place-self-start mt-4">Which task would you like to work on today?</h1>
+            </div>
+
+            {/* challenge tile grid */}
+            <div className="grid grid-cols-1 md:grid-cols-6 gap-8 auto-rows-min my-10 mx-8 sm:mx-15 md:mx-10 lg:mx-20 xl:mx-40 2xl:mx-80">
+                {/* row 1 */}
+                <ChallengeTile 
+                    size="sm" 
+                    span="2"
+                    title="Sleep 7-9 hours" 
+                    subtitle="Better sleep means a better you."
+                    tags='#Sleep #Stress'
+                />
+                <ChallengeTile 
+                    size="sm" 
+                    span="2"
+                    title="Read a Book" 
+                    subtitle="Destress by reading for at least 20 minutes a day."
+                    tags='#Sleep #Stress'
+                />
+                <ChallengeTile 
+                    size="sm" 
+                    span="2"
+                    title="Practice Saying No" 
+                    subtitle="Learn the different ways you can say no in & outside in the office."
+                    tags='#Stress #SelfDoubt'
+                />
+
+                {/* row 2 */}
+                <ChallengeTile 
+                    size="lg" 
+                    span="3"
+                    title="Read Positive Affirmations" 
+                    subtitle="Recite empowering messages meant to help you fight self-doubt and anxiety."
+                    tags='#Sleep #SelfDoubt #GenderBias #Postpartum'
+                />
+                <ChallengeTile 
+                    size="lg" 
+                    span="3"
+                    title="Daily Journal Entry" 
+                    subtitle="Answer a different prompt each day or share what’s on your mind."
+                    tags='#Stress #SelfDoubt #GenderBias #Postpartum'
+                    to='/journal'
+                />
+            </div>
+        </div>
   );
 };