diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index b36e405..9ea2379 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -16,11 +16,12 @@ import Register from "./Components/auth/Register"; import Profile from "./Components/profile/Profile"; import ProtectedRoute from "./Components/auth/ProtectedRoute"; import Dashboard from "./Components/Dashboard"; - +import Goal from './Components/goals/GoalPage'; // Home component that contains the main landing page content import { ArrowUp } from "lucide-react"; // <-- icon for back to top + function Home() { const [showTop, setShowTop] = useState(false); @@ -69,6 +70,13 @@ function Home() {
+ + +
+ +
+ +
diff --git a/frontend/src/Components/goals/ActivityOverview.jsx b/frontend/src/Components/goals/ActivityOverview.jsx new file mode 100644 index 0000000..e6ca071 --- /dev/null +++ b/frontend/src/Components/goals/ActivityOverview.jsx @@ -0,0 +1,19 @@ +// src/components/ActivityOverview.jsx +import { color } from 'framer-motion'; +import React from 'react'; + +const ActivityOverview = ({ activityData }) => { + return ( +
+

Activity Overview

+
+ {activityData.map((day, index) => ( +
+
+ ))} +
+
+ ); +}; + +export default ActivityOverview; diff --git a/frontend/src/Components/goals/Challenge.jsx b/frontend/src/Components/goals/Challenge.jsx new file mode 100644 index 0000000..39a1ba0 --- /dev/null +++ b/frontend/src/Components/goals/Challenge.jsx @@ -0,0 +1,49 @@ +// src/components/Challenge.jsx +import { color } from 'framer-motion'; +import React from 'react'; +import { useState } from 'react'; + +function complete() { + setIsCompleted(true); +} + +const Challenge = ({ challenge }) => { + const { title, description, difficulty, points, status } = challenge; + const [isCompleted, setIsCompleted] = useState(status === 'completed'); + const getBadgeColor = () => { + switch (difficulty) { + case 'easy': + return 'bg-green-200 text-green-800'; + case 'medium': + return 'bg-yellow-200 text-yellow-800'; + case 'hard': + return 'bg-purple-200 text-purple-800'; + default: + return 'bg-gray-200 text-gray-800'; + } + }; + + function complete() { + setIsCompleted(true); + } + + return ( +
+

{title}

+

{description}

+
+ {difficulty} + {points} pts +
+
+ {isCompleted ? ( + + ) : ( + + )} +
+
+ ) +} + +export default Challenge; diff --git a/frontend/src/Components/goals/GoalPage.jsx b/frontend/src/Components/goals/GoalPage.jsx new file mode 100644 index 0000000..b44c8a9 --- /dev/null +++ b/frontend/src/Components/goals/GoalPage.jsx @@ -0,0 +1,83 @@ +// src/pages/GoalsPage.jsx +import React, { useState } from 'react'; +import ProgressTracker from './ProgressTracker'; +import ActivityOverview from './ActivityOverview.jsx'; +import Challenge from './Challenge.jsx'; +import { TracingBeam } from "../ui/tracing-beam"; +import { useContext } from "react"; +import ThemeContext from "../ui/theme-provider.jsx"; +import { Bold, Weight } from 'lucide-react'; + +const GoalPage = () => { + const theme = useContext(ThemeContext); + // Example state for challenges and progress + const [currentStreak, setCurrentStreak] = useState(7); + const [bestStreak, setBestStreak] = useState(12); + const [totalCompleted, setTotalCompleted] = useState(47); + const [weeklyProgress, setWeeklyProgress] = useState(75); + + // Dummy data for activity overview and challenges + const activityData = [1, 1, 0, 1, 1, 0, 1]; // 1 = active, 0 = inactive + const todaysChallenges = [ + { + id: 1, + title: 'Code Review Champion', + description: 'Review and provide feedback on 3 pull requests.', + difficulty: 'medium', + points: 150, + status: 'pending' + }, + { + id: 2, + title: 'Documentation Warrior', + description: 'Write or update documentation for your project.', + difficulty: 'easy', + points: 100, + status: 'completed' + } + ]; + const weeklyChallenge = { + id: 3, + title: 'Testing Excellence', + description: 'Write comprehensive tests for a new feature.', + difficulty: 'hard', + points: 300, + status: 'not-started' + }; + + return ( + +
+

DevSync Challenges

+ + {/* Progress Cards */} +
+ + + + +
+ + {/* Activity Overview */} + + + {/* Today's Challenges */} +
+

Today's Challenges

+ {todaysChallenges.map((challenge) => ( + + ))} +
+ + {/* This Week's Challenge */} +
+

This Week's Challenge

+ +
+
+ + + ); +}; + +export default GoalPage; diff --git a/frontend/src/Components/goals/ProgressTracker.jsx b/frontend/src/Components/goals/ProgressTracker.jsx new file mode 100644 index 0000000..cd21778 --- /dev/null +++ b/frontend/src/Components/goals/ProgressTracker.jsx @@ -0,0 +1,23 @@ +// src/components/ProgressTracker.jsx + +import React from 'react'; +import './goals.css'; + +const ProgressTracker = ({ title, value, isProgress = false }) => { + return ( +
+

{title}

+ {isProgress ? ( +
+
+
+ ) : ( +

{value}

+ )} +
+ ); +}; + + + +export default ProgressTracker; diff --git a/frontend/src/Components/goals/goals.css b/frontend/src/Components/goals/goals.css new file mode 100644 index 0000000..80fb098 --- /dev/null +++ b/frontend/src/Components/goals/goals.css @@ -0,0 +1,16 @@ +:root { + --background: #fff; + --foreground: #18181b; + --divColor : #1a2b47; + --progressText :#fff; + --buttonBack:#fff; + --buttonText:#000; +} +.dark { + --background: #18181b; + --foreground: #fafafa; + --divColor : #1a2b47; + --progressText:#fff; + --buttonBack:#fff; + --buttonText:#000; +} \ No newline at end of file diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx index 2ca1b3b..0ea6d67 100644 --- a/frontend/src/main.jsx +++ b/frontend/src/main.jsx @@ -10,6 +10,7 @@ import Login from './Components/auth/Login'; import Dashboard from './Components/Dashboard'; import TestDashboardPage from './Components/DashBoard/Test'; import { ThemeProvider } from './Components/ui/theme-provider'; +import GoalsPage from './Components/goals/GoalPage.jsx'; @@ -28,6 +29,7 @@ createRoot(document.getElementById('root')).render( } /> } /> } /> + } /> } />