diff --git a/public/badge.svg b/public/badge.svg new file mode 100644 index 0000000..9d23566 --- /dev/null +++ b/public/badge.svg @@ -0,0 +1,178 @@ + + + + + + + + + \ No newline at end of file diff --git a/public/people.svg b/public/people.svg new file mode 100644 index 0000000..36e30c3 --- /dev/null +++ b/public/people.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/pietrs.png b/public/pietrs.png new file mode 100644 index 0000000..99fc755 Binary files /dev/null and b/public/pietrs.png differ diff --git a/src/components/Dashboard/DashboardTile.jsx b/src/components/Dashboard/DashboardTile.jsx new file mode 100644 index 0000000..8f1a0e3 --- /dev/null +++ b/src/components/Dashboard/DashboardTile.jsx @@ -0,0 +1,51 @@ +import { tv } from "tailwind-variants/lite"; + +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-[340px]' + }, + span: { + 2: 'col-span-1 md:col-span-2', + 3: 'col-span-1 md:col-span-3' + }, + type: { + regular: '', + data: '', + }, + }, +}); + +const imgVariants = tv({ + base: 'place-self-center', + + variants: { + size: { + sm: 'w-25', + lg: 'w-50' + }, + }, +}); + +export default function DashboardTile({ type, size, span, title, subtitle, imgSource, altText, dataSentence }){ + return ( +
+ {type == "data" ? ( +
+

{title}

+

{dataSentence}

+

{subtitle}

+
+ ) : ( +
+

{title}

+

{subtitle}

+ {altText} +
+ )} +
+ ); +} \ No newline at end of file diff --git a/src/components/Dashboard/TaskModal.jsx b/src/components/Dashboard/TaskModal.jsx new file mode 100644 index 0000000..1e96f06 --- /dev/null +++ b/src/components/Dashboard/TaskModal.jsx @@ -0,0 +1,76 @@ +import { useEffect, useState } from 'react'; +import Button from "../Button"; +import { IoClose } from "react-icons/io5"; + +export default function TaskModal({ isOpen, onClose}) { + const [selectedTask, setSelectedTask] = useState([]); + + // log the selectedTask after the array changes to update automatically + useEffect(() => { + console.log('Updated Tasks:', selectedTask); + }, [selectedTask]); + + function toggleTask(challenge) { + // if the clicked challenge is not selectedTask, setSelectedTask + if (!selectedTask.includes(challenge)) { + // log the selection + console.log(`${challenge} button selected!`); + setSelectedTask([...selectedTask, challenge]); + // if the clicked challenge is already in selectedTask, filter it out of selectedTask + } else { + // log the deselection + console.log(`${challenge} button deselected!`); + setSelectedTask(selectedTask.filter(item => item !== challenge)); + } + } + + if (!isOpen) return null; + + return ( +
+
+ +

Detox Challenge Options

+ {/* buttons */} +
+
+
+
+ ); +} \ No newline at end of file diff --git a/src/pages/Dashboard.jsx b/src/pages/Dashboard.jsx index 30c787d..4b10d49 100644 --- a/src/pages/Dashboard.jsx +++ b/src/pages/Dashboard.jsx @@ -1,9 +1,76 @@ -function Dashboard() { +import { useState } from "react"; +import Button from "../components/Button"; +import DashboardTile from "../components/Dashboard/DashboardTile"; +import TaskModal from "../components/Dashboard/TaskModal"; + +let daysCompleted = 0; +let daysLeft = 30 - daysCompleted; +let loginStreak = 1; + +export default function Dashboard() { + const [taskModalOpen, setTaskModalOpen] = useState(false); + return ( -
-

Dashboard Page! 🎉

+
+ {/* title and button */} +
+

Welcome Back!

+
+
+
+ setTaskModalOpen(false)} /> + {/* card grid */} +
+ {/* row 1 */} + + + + + {/* row 2 */} + + +
); -} - -export default Dashboard; +} \ No newline at end of file