From e692b569b1757c58e0f29589dd5fbcb3e0cb9d3c Mon Sep 17 00:00:00 2001 From: AnsariTufail <168163201+AnsariTufail@users.noreply.github.com> Date: Thu, 4 Sep 2025 11:12:58 +0530 Subject: [PATCH 1/3] Create Compenents --- package-lock.json | 100 ++++ package.json | 2 + src/Redux/Store.tsx | 11 + src/Redux/services/demo.service.ts | 16 + src/main.tsx | 4 + src/pages/Surveys.tsx | 3 +- src/pages/learner/ConnectionStatus.tsx | 56 +++ src/pages/learner/CurrentLearningProgress.tsx | 206 ++++++++ src/pages/learner/Dashboard.tsx | 445 +----------------- src/pages/learner/RecentActivity.tsx | 167 +++++++ src/pages/learner/WelcomeMessage.tsx | 36 ++ 11 files changed, 611 insertions(+), 435 deletions(-) create mode 100644 src/Redux/Store.tsx create mode 100644 src/Redux/services/demo.service.ts create mode 100644 src/pages/learner/ConnectionStatus.tsx create mode 100644 src/pages/learner/CurrentLearningProgress.tsx create mode 100644 src/pages/learner/RecentActivity.tsx create mode 100644 src/pages/learner/WelcomeMessage.tsx diff --git a/package-lock.json b/package-lock.json index 0843507..8cefc8c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -34,6 +34,7 @@ "@radix-ui/react-toggle": "^1.1.2", "@radix-ui/react-toggle-group": "^1.1.2", "@radix-ui/react-tooltip": "^1.1.8", + "@reduxjs/toolkit": "^2.9.0", "@tailwindcss/postcss": "^4.1.12", "class-variance-authority": "^0.7.1", "clsx": "*", @@ -48,6 +49,7 @@ "react-day-picker": "^8.10.1", "react-dom": "^18.3.1", "react-hook-form": "^7.55.0", + "react-redux": "^9.2.0", "react-resizable-panels": "^2.1.7", "react-router-dom": "^7.8.2", "recharts": "^2.15.2", @@ -1891,6 +1893,32 @@ "integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==", "license": "MIT" }, + "node_modules/@reduxjs/toolkit": { + "version": "2.9.0", + "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.9.0.tgz", + "integrity": "sha512-fSfQlSRu9Z5yBkvsNhYF2rPS8cGXn/TZVrlwN1948QyZ8xMZ0JvP50S2acZNaf+o63u6aEeMjipFyksjIcWrog==", + "license": "MIT", + "dependencies": { + "@standard-schema/spec": "^1.0.0", + "@standard-schema/utils": "^0.3.0", + "immer": "^10.0.3", + "redux": "^5.0.1", + "redux-thunk": "^3.1.0", + "reselect": "^5.1.0" + }, + "peerDependencies": { + "react": "^16.9.0 || ^17.0.0 || ^18 || ^19", + "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + }, + "react-redux": { + "optional": true + } + } + }, "node_modules/@rolldown/pluginutils": { "version": "1.0.0-beta.27", "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz", @@ -2178,6 +2206,18 @@ "win32" ] }, + "node_modules/@standard-schema/spec": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.0.0.tgz", + "integrity": "sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==", + "license": "MIT" + }, + "node_modules/@standard-schema/utils": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz", + "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==", + "license": "MIT" + }, "node_modules/@swc/core": { "version": "1.13.5", "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.13.5.tgz", @@ -2765,6 +2805,12 @@ "@types/react": "^19.0.0" } }, + "node_modules/@types/use-sync-external-store": { + "version": "0.0.6", + "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz", + "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==", + "license": "MIT" + }, "node_modules/@vitejs/plugin-react-swc": { "version": "3.11.0", "resolved": "https://registry.npmjs.org/@vitejs/plugin-react-swc/-/plugin-react-swc-3.11.0.tgz", @@ -3167,6 +3213,16 @@ "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==", "license": "ISC" }, + "node_modules/immer": { + "version": "10.1.3", + "resolved": "https://registry.npmjs.org/immer/-/immer-10.1.3.tgz", + "integrity": "sha512-tmjF/k8QDKydUlm3mZU+tjM6zeq9/fFpPqH9SzWmBnVVKsPBg/V66qsMwb3/Bo90cgUN+ghdVBess+hPsxUyRw==", + "license": "MIT", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/immer" + } + }, "node_modules/input-otp": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/input-otp/-/input-otp-1.4.2.tgz", @@ -3691,6 +3747,29 @@ "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==", "license": "MIT" }, + "node_modules/react-redux": { + "version": "9.2.0", + "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz", + "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==", + "license": "MIT", + "dependencies": { + "@types/use-sync-external-store": "^0.0.6", + "use-sync-external-store": "^1.4.0" + }, + "peerDependencies": { + "@types/react": "^18.2.25 || ^19", + "react": "^18.0 || ^19", + "redux": "^5.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "redux": { + "optional": true + } + } + }, "node_modules/react-remove-scroll": { "version": "2.7.1", "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.1.tgz", @@ -3871,6 +3950,27 @@ "decimal.js-light": "^2.4.1" } }, + "node_modules/redux": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz", + "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==", + "license": "MIT" + }, + "node_modules/redux-thunk": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz", + "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==", + "license": "MIT", + "peerDependencies": { + "redux": "^5.0.0" + } + }, + "node_modules/reselect": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz", + "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==", + "license": "MIT" + }, "node_modules/rollup": { "version": "4.49.0", "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.49.0.tgz", diff --git a/package.json b/package.json index 24082b8..717df5f 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "@radix-ui/react-toggle": "^1.1.2", "@radix-ui/react-toggle-group": "^1.1.2", "@radix-ui/react-tooltip": "^1.1.8", + "@reduxjs/toolkit": "^2.9.0", "@tailwindcss/postcss": "^4.1.12", "class-variance-authority": "^0.7.1", "clsx": "*", @@ -43,6 +44,7 @@ "react-day-picker": "^8.10.1", "react-dom": "^18.3.1", "react-hook-form": "^7.55.0", + "react-redux": "^9.2.0", "react-resizable-panels": "^2.1.7", "react-router-dom": "^7.8.2", "recharts": "^2.15.2", diff --git a/src/Redux/Store.tsx b/src/Redux/Store.tsx new file mode 100644 index 0000000..a985924 --- /dev/null +++ b/src/Redux/Store.tsx @@ -0,0 +1,11 @@ +import {configureStore} from '@reduxjs/toolkit'; +import { demoApi } from './services/demo.service'; + +export const store = configureStore({ + reducer: { + [demoApi.reducerPath]: demoApi.reducer}, + middleware: (getDefaultMiddleware) => + getDefaultMiddleware().concat(demoApi.middleware), +}); +export type RootState = ReturnType; +export type AppDispatch = typeof store.dispatch; \ No newline at end of file diff --git a/src/Redux/services/demo.service.ts b/src/Redux/services/demo.service.ts new file mode 100644 index 0000000..1c9c23b --- /dev/null +++ b/src/Redux/services/demo.service.ts @@ -0,0 +1,16 @@ +// import { createApi } from '@reduxjs/toolkit/query' +import { fetchBaseQuery, createApi } from '@reduxjs/toolkit/query/react' + + +export const demoApi = createApi({ + reducerPath: 'demoApi', + baseQuery: fetchBaseQuery({ baseUrl: "https://jsonplaceholder.typicode.com" }), + endpoints: (builder) => ({ + // GET example + getPosts: builder.query({ + query: () => "/posts", + }), + }), +}) + +export const { useGetPostsQuery } = demoApi; \ No newline at end of file diff --git a/src/main.tsx b/src/main.tsx index 07567cb..ae3c4b2 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -2,9 +2,13 @@ import { createRoot } from "react-dom/client"; import { BrowserRouter } from "react-router-dom"; import App from "./App.tsx"; import "./styles/globals.css"; +import { Provider } from "react-redux"; +import { store } from "./Redux/Store.tsx"; createRoot(document.getElementById("root")!).render( + + ); diff --git a/src/pages/Surveys.tsx b/src/pages/Surveys.tsx index fc3933b..452f34e 100644 --- a/src/pages/Surveys.tsx +++ b/src/pages/Surveys.tsx @@ -40,8 +40,9 @@ import { ExternalLink } from 'lucide-react'; import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell } from 'recharts'; -import exampleImage from 'figma:asset/c501c3d3f3a828828d4cb2dadb9558b43986718f.png'; +// import exampleImage from 'figma:asset/c501c3d3f3a828828d4cb2dadb9558b43986718f.png'; import { useNavigate } from 'react-router-dom'; + const exampleImage = 'https://via.placeholder.com/600x400?text=Example+Image'; interface SurveyProps { userType: 'individual' | 'corporate'; diff --git a/src/pages/learner/ConnectionStatus.tsx b/src/pages/learner/ConnectionStatus.tsx new file mode 100644 index 0000000..e27027c --- /dev/null +++ b/src/pages/learner/ConnectionStatus.tsx @@ -0,0 +1,56 @@ +import React, { useEffect, useState } from "react"; +import { WifiOff, Wifi, RefreshCw } from "lucide-react"; +import { Alert, AlertDescription } from "../../components/ui/alert"; +import { Button } from "../../components/ui/button"; + + +// Connection status component + export function ConnectionStatus() { + const [isOnline, setIsOnline] = useState(navigator.onLine); + const [isLoading, setIsLoading] = useState(false); + + useEffect(() => { + const handleOnline = () => setIsOnline(true); + const handleOffline = () => setIsOnline(false); + + window.addEventListener('online', handleOnline); + window.addEventListener('offline', handleOffline); + + return () => { + window.removeEventListener('online', handleOnline); + window.removeEventListener('offline', handleOffline); + }; + }, []); + + const handleRetry = async () => { + setIsLoading(true); + await new Promise(resolve => setTimeout(resolve, 1000)); + setIsLoading(false); + window.location.reload(); + }; + + if (isOnline) return null; + + return ( + + + + You're currently offline. Some features may not be available. + + + + ); +} diff --git a/src/pages/learner/CurrentLearningProgress.tsx b/src/pages/learner/CurrentLearningProgress.tsx new file mode 100644 index 0000000..f2143cc --- /dev/null +++ b/src/pages/learner/CurrentLearningProgress.tsx @@ -0,0 +1,206 @@ +import React from "react"; +import { useNavigate } from "react-router-dom"; +import { Play, FastForward, CheckCircle, ChevronRight, BookOpen } from "lucide-react"; +import { Card, CardContent, CardHeader, CardTitle } from "../../components/ui/card"; +import CurrentLearningHeaderIcon from "../../imports/CurrentLearningHeaderIcon-4285-106"; +import { Badge } from "../../components/ui/badge"; +import { Button } from "../../components/ui/button"; + +export function CurrentLearningProgress({ userType = 'individual' }: { userType?: 'individual' | 'corporate' }) { + const currentCourse = { + title: "Strategic Leadership Excellence Program", + rating: 4.9, + provider: "Dr. Rajesh Sharma, KLC", + dueDate: "Aug 30, 2025", + totalModules: 8, + currentModule: { + title: "Building High-Performance Teams", + number: 6, + progress: 65, + lessonsRemaining: 3 + }, + nextModule: { + title: "Leadership Communication Mastery", + number: 7 + } + }; + + // Sample module data to match the image layout + const moduleList = [ + { title: "Leadership Fundamentals", duration: "1h 15m", completed: true }, + { title: "Emotional Intelligence for Leaders", duration: "1h 30m", completed: true }, + { title: "Strategic Decision Making", duration: "1h", completed: true }, + { title: "Conflict Resolution & Negotiation", duration: "50m", completed: true }, + { title: "Change Management Principles", duration: "40m", completed: true }, + { title: "Building High-Performance Teams", duration: "1h 20m", completed: false, current: true }, + { title: "Leadership Communication Mastery", duration: "1h 45m", completed: false, upcoming: true }, + { title: "Innovation & Strategic Thinking", duration: "2h", completed: false } + ]; + + const completedModules = moduleList.filter(module => module.completed).length; + const totalModules = moduleList.length; + const overallProgress = Math.round((completedModules / totalModules) * 100); + const navigate = useNavigate(); + + return ( + + +
+
+
+
+ +
+
+ + Current Learning Progress + +
+
+ + + + {/* Course Header */} +
+
+

+ {currentCourse.title} +

+

+ with {currentCourse.provider} +

+
+
+ + In Progress + +

2h 30m remaining

+
+
+ + {/* Overall Progress */} +
+
+ Overall Progress + Modules +
+
+ {overallProgress}% + {completedModules}/{totalModules} +
+
+ Started + Completed +
+ + {/* Progress Bar */} +
+
+
+
+ + {/* Current and Up Next Modules */} +
+ {/* Current Module */} +
+
+
+ +
+ Current +
+

+ {currentCourse.currentModule.title} +

+ +
+ + {/* Up Next Module */} +
+
+
+ +
+ Up Next +
+

+ {currentCourse.nextModule.title} +

+ +
+
+ + {/* Course Modules List */} +
+
+

Course Modules

+ +
+ +
+ {moduleList.slice(0, 5).map((module, index) => ( +
+
+
+ {module.completed ? ( + + ) : ( +
+ )} +
+ + {module.title} + +
+
+ {module.duration} + +
+
+ ))} +
+
+ + {/* Action Buttons */} +
+ + + +
+ + + ); +} \ No newline at end of file diff --git a/src/pages/learner/Dashboard.tsx b/src/pages/learner/Dashboard.tsx index 230d693..6e02ff9 100644 --- a/src/pages/learner/Dashboard.tsx +++ b/src/pages/learner/Dashboard.tsx @@ -78,250 +78,25 @@ import { // import { navigate } from '../../components/Router'; import { ImageWithFallback } from '../../components/figma/ImageWithFallback'; import CurrentLearningHeaderIcon from '../../imports/CurrentLearningHeaderIcon-4285-106'; -import platinumTrophy from 'figma:asset/a224fb6efc954992c535e482fe88d93f1f4178d8.png'; -import goldTrophy from 'figma:asset/9ebc01e8eb24f9d71683b2ee63d224583a979590.png'; -import silverTrophy from 'figma:asset/9852710543a90e291ecb85d77ea02234139264c5.png'; -import bronzeTrophy from 'figma:asset/5fddc261d2e35ee810113f2537c5a59a97fd7fbd.png'; import { useNavigate } from 'react-router-dom'; +import { RecentActivity } from './RecentActivity'; +import { WelcomeMessage } from './WelcomeMessage'; +import { CurrentLearningProgress } from './CurrentLearningProgress'; +import { ConnectionStatus } from './ConnectionStatus'; +const platinumTrophy = 'https://via.placeholder.com/150?text=Platinum+Trophy'; +const goldTrophy = 'https://via.placeholder.com/150?text=Gold+Trophy'; +const silverTrophy = 'https://via.placeholder.com/150?text=Silver+Trophy'; +const bronzeTrophy = 'https://via.placeholder.com/150?text=Bronze+Trophy'; interface DashboardProps { userType?: 'individual' | 'corporate'; } -// Recent Activity component - increased height to match Global Leaderboard -function RecentActivity() { - const activities = [ - { - id: 1, - type: 'course_completed', - title: 'Completed "Strategic Decision Making"', - description: 'Module 3 of 4 • Leadership Fundamentals', - timestamp: '2 hours ago', - icon: CheckCircle, - iconColor: 'text-green-600', - iconBg: 'bg-green-100' - }, - { - id: 2, - type: 'webinar_joined', - title: 'Attended Live Webinar', - description: 'Digital Transformation for Leaders', - timestamp: '5 hours ago', - icon: Video, - iconColor: 'text-blue-600', - iconBg: 'bg-blue-100' - }, - { - id: 3, - type: 'assessment_completed', - title: 'Assessment Completed', - description: 'Leadership Style Assessment • Score: 92%', - timestamp: '1 day ago', - icon: FileText, - iconColor: 'text-purple-600', - iconBg: 'bg-purple-100' - }, - { - id: 4, - type: 'certificate_earned', - title: 'Certificate Earned', - description: 'Leadership Foundation Certification', - timestamp: '2 days ago', - icon: Award, - iconColor: 'text-brand-gold', - iconBg: 'bg-yellow-100' - }, - { - id: 5, - type: 'course_started', - title: 'Started New Course', - description: 'Innovation Leadership Track', - timestamp: '3 days ago', - icon: PlayCircle, - iconColor: 'text-green-600', - iconBg: 'bg-green-100' - }, - { - id: 6, - type: 'discussion_posted', - title: 'Discussion Contribution', - description: 'Team Management Best Practices', - timestamp: '4 days ago', - icon: MessageSquare, - iconColor: 'text-orange-600', - iconBg: 'bg-orange-100' - }, - { - id: 7, - type: 'resource_downloaded', - title: 'Resource Downloaded', - description: 'Leadership Skills Handbook PDF', - timestamp: '5 days ago', - icon: BookOpen, - iconColor: 'text-gray-600', - iconBg: 'bg-gray-100' - }, - { - id: 8, - type: 'peer_connection', - title: 'New Connection', - description: 'Connected with 3 peer learners', - timestamp: '1 week ago', - icon: Users, - iconColor: 'text-brand-navy', - iconBg: 'bg-blue-100' - } - ]; - return ( - - -
-
-
- -
- - Recent Activity - -
- -
-

- Your recent learning activities -

- - - - -
- {activities.map((activity) => { - const Icon = activity.icon; - return ( -
- {/* Activity Icon */} -
- -
- - {/* Activity Content */} -
-

- {activity.title} -

-

- {activity.description} -

-

- {activity.timestamp} -

-
-
- ); - })} -
- - - - ); -} -// Welcome Message component with simple visible emoji -function WelcomeMessage({ user }: { user: any }) { - const [showEmoji, setShowEmoji] = useState(true); - const emojiChar = '👋'; - - useEffect(() => { - const timer = setTimeout(() => { - setShowEmoji(false); - }, 5000); - - return () => clearTimeout(timer); - }, []); - - return ( -
- - Welcome back, Priya Sharma! - - {showEmoji && ( - - {emojiChar} - - )} -
- ); -} -// Connection status component -function ConnectionStatus() { - const [isOnline, setIsOnline] = useState(navigator.onLine); - const [isLoading, setIsLoading] = useState(false); - useEffect(() => { - const handleOnline = () => setIsOnline(true); - const handleOffline = () => setIsOnline(false); - - window.addEventListener('online', handleOnline); - window.addEventListener('offline', handleOffline); - - return () => { - window.removeEventListener('online', handleOnline); - window.removeEventListener('offline', handleOffline); - }; - }, []); - - const handleRetry = async () => { - setIsLoading(true); - await new Promise(resolve => setTimeout(resolve, 1000)); - setIsLoading(false); - window.location.reload(); - }; - - if (isOnline) return null; - - return ( - - - - You're currently offline. Some features may not be available. - - - - ); -} // Weekly Progress Goal Setting Modal component function WeeklyProgressModal({ @@ -698,205 +473,6 @@ function AchievementBadges() { ); } -// Current Learning Progress component -function CurrentLearningProgress({ userType = 'individual' }: { userType?: 'individual' | 'corporate' }) { - const currentCourse = { - title: "Strategic Leadership Excellence Program", - rating: 4.9, - provider: "Dr. Rajesh Sharma, KLC", - dueDate: "Aug 30, 2025", - totalModules: 8, - currentModule: { - title: "Building High-Performance Teams", - number: 6, - progress: 65, - lessonsRemaining: 3 - }, - nextModule: { - title: "Leadership Communication Mastery", - number: 7 - } - }; - - // Sample module data to match the image layout - const moduleList = [ - { title: "Leadership Fundamentals", duration: "1h 15m", completed: true }, - { title: "Emotional Intelligence for Leaders", duration: "1h 30m", completed: true }, - { title: "Strategic Decision Making", duration: "1h", completed: true }, - { title: "Conflict Resolution & Negotiation", duration: "50m", completed: true }, - { title: "Change Management Principles", duration: "40m", completed: true }, - { title: "Building High-Performance Teams", duration: "1h 20m", completed: false, current: true }, - { title: "Leadership Communication Mastery", duration: "1h 45m", completed: false, upcoming: true }, - { title: "Innovation & Strategic Thinking", duration: "2h", completed: false } - ]; - - const completedModules = moduleList.filter(module => module.completed).length; - const totalModules = moduleList.length; - const overallProgress = Math.round((completedModules / totalModules) * 100); - - return ( - - -
-
-
-
- -
-
- - Current Learning Progress - -
-
- - - - {/* Course Header */} -
-
-

- {currentCourse.title} -

-

- with {currentCourse.provider} -

-
-
- - In Progress - -

2h 30m remaining

-
-
- - {/* Overall Progress */} -
-
- Overall Progress - Modules -
-
- {overallProgress}% - {completedModules}/{totalModules} -
-
- Started - Completed -
- - {/* Progress Bar */} -
-
-
-
- - {/* Current and Up Next Modules */} -
- {/* Current Module */} -
-
-
- -
- Current -
-

- {currentCourse.currentModule.title} -

- -
- - {/* Up Next Module */} -
-
-
- -
- Up Next -
-

- {currentCourse.nextModule.title} -

- -
-
- - {/* Course Modules List */} -
-
-

Course Modules

- -
- -
- {moduleList.slice(0, 5).map((module, index) => ( -
-
-
- {module.completed ? ( - - ) : ( -
- )} -
- - {module.title} - -
-
- {module.duration} - -
-
- ))} -
-
- - {/* Action Buttons */} -
- - - -
- - - ); -} - // Global Leaderboard component - increased height to match Recent Activity function GlobalLeaderboard() { const leaderboardData = [ @@ -976,6 +552,7 @@ function GlobalLeaderboard() { default: return 'bg-gray-100 text-gray-600'; } }; + const navigate = useNavigate(); return ( @@ -1443,9 +1020,9 @@ export default function Dashboard({ userType = 'individual' }: DashboardProps) { const user = { name: 'Alex', email: 'alex@example.com' }; return ( - +
- + {/* Welcome Section */}
diff --git a/src/pages/learner/RecentActivity.tsx b/src/pages/learner/RecentActivity.tsx new file mode 100644 index 0000000..7fd6c7b --- /dev/null +++ b/src/pages/learner/RecentActivity.tsx @@ -0,0 +1,167 @@ +import { + CheckCircle, + Video, + FileText, + Award, + PlayCircle, + MessageSquare, + BookOpen, + Users, + Activity +} from "lucide-react"; + +import { useNavigate } from "react-router-dom"; +import { Card, CardContent, CardHeader, CardTitle } from "../../components/ui/card"; +import { Button } from "../../components/ui/button"; +import { ScrollArea } from "../../components/ui/scroll-area"; +// import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"; +// import { Button } from "@/components/ui/button"; +// import { ScrollArea } from "@/components/ui/scroll-area"; + +// Recent Activity component - increased height to match Global Leaderboard +export function RecentActivity() { + const activities = [ + { + id: 1, + type: 'course_completed', + title: 'Completed "Strategic Decision Making"', + description: 'Module 3 of 4 • Leadership Fundamentals', + timestamp: '2 hours ago', + icon: CheckCircle, + iconColor: 'text-green-600', + iconBg: 'bg-green-100' + }, + { + id: 2, + type: 'webinar_joined', + title: 'Attended Live Webinar', + description: 'Digital Transformation for Leaders', + timestamp: '5 hours ago', + icon: Video, + iconColor: 'text-blue-600', + iconBg: 'bg-blue-100' + }, + { + id: 3, + type: 'assessment_completed', + title: 'Assessment Completed', + description: 'Leadership Style Assessment • Score: 92%', + timestamp: '1 day ago', + icon: FileText, + iconColor: 'text-purple-600', + iconBg: 'bg-purple-100' + }, + { + id: 4, + type: 'certificate_earned', + title: 'Certificate Earned', + description: 'Leadership Foundation Certification', + timestamp: '2 days ago', + icon: Award, + iconColor: 'text-brand-gold', + iconBg: 'bg-yellow-100' + }, + { + id: 5, + type: 'course_started', + title: 'Started New Course', + description: 'Innovation Leadership Track', + timestamp: '3 days ago', + icon: PlayCircle, + iconColor: 'text-green-600', + iconBg: 'bg-green-100' + }, + { + id: 6, + type: 'discussion_posted', + title: 'Discussion Contribution', + description: 'Team Management Best Practices', + timestamp: '4 days ago', + icon: MessageSquare, + iconColor: 'text-orange-600', + iconBg: 'bg-orange-100' + }, + { + id: 7, + type: 'resource_downloaded', + title: 'Resource Downloaded', + description: 'Leadership Skills Handbook PDF', + timestamp: '5 days ago', + icon: BookOpen, + iconColor: 'text-gray-600', + iconBg: 'bg-gray-100' + }, + { + id: 8, + type: 'peer_connection', + title: 'New Connection', + description: 'Connected with 3 peer learners', + timestamp: '1 week ago', + icon: Users, + iconColor: 'text-brand-navy', + iconBg: 'bg-blue-100' + } + ]; + const navigate = useNavigate(); + return ( + + +
+
+
+ +
+ + Recent Activity + +
+ +
+

+ Your recent learning activities +

+ + + + +
+ {activities.map((activity) => { + const Icon = activity.icon; + return ( +
+ {/* Activity Icon */} +
+ +
+ + {/* Activity Content */} +
+

+ {activity.title} +

+

+ {activity.description} +

+

+ {activity.timestamp} +

+
+
+ ); + })} +
+ + + + ); +} \ No newline at end of file diff --git a/src/pages/learner/WelcomeMessage.tsx b/src/pages/learner/WelcomeMessage.tsx new file mode 100644 index 0000000..9d0ee1e --- /dev/null +++ b/src/pages/learner/WelcomeMessage.tsx @@ -0,0 +1,36 @@ +import React, { useState, useEffect } from "react"; + +// Welcome Message component with simple visible emoji + export function WelcomeMessage({ user }: { user: any }) { + const [showEmoji, setShowEmoji] = useState(true); + const emojiChar = '👋'; + + useEffect(() => { + const timer = setTimeout(() => { + setShowEmoji(false); + }, 5000); + + return () => clearTimeout(timer); + }, []); + + return ( +
+ + Welcome back, Priya Sharma! + + {showEmoji && ( + + {emojiChar} + + )} +
+ ); +} \ No newline at end of file From f3f1eea55cac1d2be75760a514fe35ddd9400d0d Mon Sep 17 00:00:00 2001 From: AnsariTufail <168163201+AnsariTufail@users.noreply.github.com> Date: Thu, 4 Sep 2025 19:31:00 +0530 Subject: [PATCH 2/3] Create Compenents --- src/components/learner/LibraryStats.tsx | 2 +- src/pages/learner/AchievementBadges.tsx | 150 +++ src/pages/learner/ActivityRecommendations.tsx | 139 +++ src/pages/learner/Dashboard.tsx | 1013 +---------------- src/pages/learner/GlobalLeaderboard.tsx | 163 +++ src/pages/learner/RecentlyViewed.tsx | 155 +++ src/pages/learner/WeeklyProgressModal.tsx | 121 ++ src/pages/learner/WeeklyProgressTracker.tsx | 133 +++ src/pages/learner/WhatOthersLearning.tsx | 141 +++ 9 files changed, 1010 insertions(+), 1007 deletions(-) create mode 100644 src/pages/learner/AchievementBadges.tsx create mode 100644 src/pages/learner/ActivityRecommendations.tsx create mode 100644 src/pages/learner/GlobalLeaderboard.tsx create mode 100644 src/pages/learner/RecentlyViewed.tsx create mode 100644 src/pages/learner/WeeklyProgressModal.tsx create mode 100644 src/pages/learner/WeeklyProgressTracker.tsx create mode 100644 src/pages/learner/WhatOthersLearning.tsx diff --git a/src/components/learner/LibraryStats.tsx b/src/components/learner/LibraryStats.tsx index 2b044b6..83622b9 100644 --- a/src/components/learner/LibraryStats.tsx +++ b/src/components/learner/LibraryStats.tsx @@ -173,7 +173,7 @@ export function LibraryStats({ courses, userType }: LibraryStatsProps) {
{stats.completedCourses} Course Completed -
+
diff --git a/src/pages/learner/AchievementBadges.tsx b/src/pages/learner/AchievementBadges.tsx new file mode 100644 index 0000000..1328513 --- /dev/null +++ b/src/pages/learner/AchievementBadges.tsx @@ -0,0 +1,150 @@ +import React from "react"; +import { Card, CardHeader, CardTitle, CardContent } from "../../components/ui/card"; +import { Trophy } from "lucide-react"; +import { ImageWithFallback } from "../../components/figma/ImageWithFallback"; + +const platinumTrophy = 'https://via.placeholder.com/150?text=Platinum+Trophy'; +const goldTrophy = 'https://via.placeholder.com/150?text=Gold+Trophy'; +const silverTrophy = 'https://via.placeholder.com/150?text=Silver+Trophy'; +const bronzeTrophy = 'https://via.placeholder.com/150?text=Bronze+Trophy'; + +// Achievement Badges component +export function AchievementBadges() { + const badges = [ + { + id: 'bronze', + title: 'Bronze Trophy', + description: 'Complete 3 foundational leadership courses and score 80%+ in all assessments', + exp: 20, + unlocked: true, + bgColor: 'from-orange-50 to-orange-100', + borderColor: 'border-orange-200', + trophyImage: bronzeTrophy + }, + { + id: 'silver', + title: 'Silver Trophy', + description: 'Master 5 advanced leadership modules and lead a successful team project', + exp: 40, + unlocked: true, + bgColor: 'from-gray-50 to-gray-100', + borderColor: 'border-gray-300', + trophyImage: silverTrophy + }, + { + id: 'gold', + title: 'Gold Trophy', + description: 'Achieve executive leadership certification and mentor 3 junior leaders', + exp: 60, + unlocked: true, + bgColor: 'from-yellow-50 to-yellow-100', + borderColor: 'border-yellow-300', + trophyImage: goldTrophy + }, + { + id: 'platinum', + title: 'Platinum Trophy', + description: 'Complete all specialization tracks and become a certified KLC ambassador', + exp: 100, + unlocked: false, + bgColor: 'from-gray-50 to-gray-100', + borderColor: 'border-gray-200', + trophyImage: platinumTrophy + } + ]; + + const unlockedCount = badges.filter(badge => badge.unlocked).length; + const totalCount = badges.length; + + return ( + + +
+
+
+ +
+ + Achievement Badges + +
+
+ + + {unlockedCount}/{totalCount} + +
+
+ +

+ Unlock trophies by completing challenges and competitions +

+ +
+
+
+
+
+ + + +
+ {badges.map((badge) => ( +
+
+
+ +{badge.exp} EXP +
+
+ +
+
+
+ +
+
+
+ +
+

+ {badge.title} +

+

+ {badge.description} +

+
+ +
+
+ {badge.unlocked ? 'UNLOCKED' : 'LOCKED'} +
+
+
+ ))} +
+ + + ); +} diff --git a/src/pages/learner/ActivityRecommendations.tsx b/src/pages/learner/ActivityRecommendations.tsx new file mode 100644 index 0000000..d25f5e5 --- /dev/null +++ b/src/pages/learner/ActivityRecommendations.tsx @@ -0,0 +1,139 @@ +import React from "react"; +import { useNavigate } from "react-router-dom"; +import { Clock, Users } from "lucide-react"; + +import { Card, CardContent } from "../../components/ui/card"; +import { Button } from "../../components/ui/button"; +import { Badge } from "../../components/ui/badge"; +import { ImageWithFallback } from "../../components/figma/ImageWithFallback"; + +// Based on your recent activity recommendations component - redesigned to match provided image +export function ActivityRecommendations({ userType = 'individual' }: { userType?: 'individual' | 'corporate' }) { + const recommendations = [ + { + id: 1, + title: "Emotional Intelligence Mastery", + description: "Develop self-awareness and interpersonal skills to become a more effective leader.", + duration: "5 hours", + difficulty: "Intermediate", + badgeText: "Intermediate", + badgeColor: "bg-yellow-100 text-yellow-800", + thumbnail: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=400&h=240&fit=crop", + recentLearners: 248 + }, + { + id: 2, + title: "Strategic Thinking Framework", + description: "Learn to analyze complex business scenarios and make data-driven decisions.", + duration: "4 hours", + difficulty: "Advanced", + badgeText: "Advanced", + badgeColor: "bg-red-100 text-red-800", + thumbnail: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=240&fit=crop", + recentLearners: 189 + }, + { + id: 3, + title: "Team Leadership Excellence", + description: "Master the art of motivating and guiding high-performance teams.", + duration: "8 hours", + difficulty: "Intermediate", + badgeText: "Intermediate", + badgeColor: "bg-yellow-100 text-yellow-800", + thumbnail: "https://images.unsplash.com/photo-1600880292203-757bb62b4baf?w=400&h=240&fit=crop", + recentLearners: 156 + }, + { + id: 4, + title: "Change Management Strategies", + description: "Navigate organizational transformation with confidence and clarity.", + duration: "3 hours", + difficulty: "Beginner", + badgeText: "Beginner", + badgeColor: "bg-green-100 text-green-800", + thumbnail: "https://images.unsplash.com/photo-1542744173-8e7e53415bb0?w=400&h=240&fit=crop", + recentLearners: 134 + } + ]; +const navigate = useNavigate(); + return ( +
+
+
+

+ Based on your recent activity, here are your recommendations +

+

+ Personalized course suggestions to accelerate your leadership journey +

+
+ +
+ +
+ {recommendations.map((course) => ( + + {/* Course Thumbnail */} +
+ +
+ + {course.badgeText} + +
+
+ + + {/* Course Title */} +

+ {course.title} +

+ + {/* Course Description */} +

+ {course.description} +

+ + {/* Duration and Recent Learners (Balanced) */} +
+ {/* Duration */} +
+ + {course.duration} +
+ + {/* Recent Learners */} +
+ + {course.recentLearners} +
+
+ + {/* Enroll Button */} + + + + + ))} +
+
+ ); +} \ No newline at end of file diff --git a/src/pages/learner/Dashboard.tsx b/src/pages/learner/Dashboard.tsx index 6e02ff9..ce4037b 100644 --- a/src/pages/learner/Dashboard.tsx +++ b/src/pages/learner/Dashboard.tsx @@ -1,1022 +1,23 @@ -import React, { useState, useEffect } from 'react'; import { LearnerLayout } from '../../components/learner/LearnerLayout'; -import { Card, CardContent, CardHeader, CardTitle } from '../../components/ui/card'; -import { Button } from '../../components/ui/button'; -import { Badge } from '../../components/ui/badge'; -import { Progress } from '../../components/ui/progress'; -import { Avatar, AvatarFallback, AvatarImage } from '../../components/ui/avatar'; -import { Separator } from '../../components/ui/separator'; -import { Skeleton } from '../../components/ui/skeleton'; -import { Alert, AlertDescription } from '../../components/ui/alert'; -import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogTrigger } from '../../components/ui/dialog'; -import { Checkbox } from '../../components/ui/checkbox'; -import { ScrollArea } from '../../components/ui/scroll-area'; - -import { - BookOpen, - Clock, - Trophy, - Calendar, - TrendingUp, - Play, - CheckCircle, - Users, - Target, - Award, - ArrowRight, - Gift, - BarChart3, - Brain, - Lightbulb, - Network, - AlertCircle, - Wifi, - WifiOff, - RefreshCw, - Sparkles, - Flame, - Building2, - Zap, - Star, - MessageSquare, - MessageCircle, - Gauge, - TrendingDown, - Globe, - Hand, - Settings, - X, - CreditCard, - ShoppingCart, - PlayCircle, - Calendar as CalendarIcon, - FastForward, - Edit2, - Info, - Eye, - UserCheck, - FileText, - Medal, - ChevronRight, - Video, - PlusCircle, - BookmarkPlus, - Activity, - Bookmark, - ThumbsUp, - Share2, - Download, - ExternalLink, - Filter, - Search, - TrendingUpIcon, - GraduationCap, - Briefcase, - Monitor, - PieChart -} from 'lucide-react'; -// import { navigate } from '../../components/Router'; -import { ImageWithFallback } from '../../components/figma/ImageWithFallback'; -import CurrentLearningHeaderIcon from '../../imports/CurrentLearningHeaderIcon-4285-106'; -import { useNavigate } from 'react-router-dom'; import { RecentActivity } from './RecentActivity'; import { WelcomeMessage } from './WelcomeMessage'; import { CurrentLearningProgress } from './CurrentLearningProgress'; import { ConnectionStatus } from './ConnectionStatus'; +import { WeeklyProgressTracker } from './WeeklyProgressTracker'; +import { AchievementBadges } from './AchievementBadges'; +import { GlobalLeaderboard } from './GlobalLeaderboard'; +import { ActivityRecommendations } from './ActivityRecommendations'; +import { RecentlyViewed } from './RecentlyViewed'; +import { WhatOthersLearning } from './WhatOthersLearning'; + -const platinumTrophy = 'https://via.placeholder.com/150?text=Platinum+Trophy'; -const goldTrophy = 'https://via.placeholder.com/150?text=Gold+Trophy'; -const silverTrophy = 'https://via.placeholder.com/150?text=Silver+Trophy'; -const bronzeTrophy = 'https://via.placeholder.com/150?text=Bronze+Trophy'; interface DashboardProps { userType?: 'individual' | 'corporate'; } - - - - - -// Weekly Progress Goal Setting Modal component -function WeeklyProgressModal({ - isOpen, - onClose, - weeklyGoal, - setWeeklyGoal, - completedDays, - setCompletedDays -}: { - isOpen: boolean; - onClose: () => void; - weeklyGoal: number; - setWeeklyGoal: (goal: number) => void; - completedDays: number[]; - setCompletedDays: (days: number[]) => void; -}) { - const [selectedDays, setSelectedDays] = useState(completedDays); - - const daysOfWeek = [ - { label: 'Monday', index: 0 }, - { label: 'Tuesday', index: 1 }, - { label: 'Wednesday', index: 2 }, - { label: 'Thursday', index: 3 }, - { label: 'Friday', index: 4 }, - { label: 'Saturday', index: 5 }, - { label: 'Sunday', index: 6 } - ]; - - const toggleDay = (dayIndex: number) => { - setSelectedDays(prev => - prev.includes(dayIndex) - ? prev.filter(d => d !== dayIndex) - : [...prev, dayIndex] - ); - }; - - const handleSave = () => { - setCompletedDays(selectedDays); - setWeeklyGoal(selectedDays.length); - onClose(); - }; - - const handleCancel = () => { - setSelectedDays(completedDays); - onClose(); - }; - - return ( - - - - - Set your weekly learning goal - - - Consistency is key to success! Choose your learning days so we can - estimate your course completion dates and schedule assignment - deadlines, helping you stay on track. - - - -
-
-

- Choose your learning days -

-

- The days you select will apply to all your courses on KLC -

- -
- {daysOfWeek.map((day) => ( -
- toggleDay(day.index)} - className="h-5 w-5" - /> - -
- ))} -
-
-
- -
- - -
- - - ); -} - -// Weekly Progress component based on the provided design -function WeeklyProgressTracker() { - const [weeklyGoal, setWeeklyGoal] = useState("Learn 1 day a week on KLC"); - const [completedDays, setCompletedDays] = useState([0, 1, 2]); - const [isModalOpen, setIsModalOpen] = useState(false); - - const kpiData = [ - { - id: 'courses', - value: 8, - label: "Courses Completed", - change: "+2 this month", - icon: BookOpen, - iconBg: "bg-gradient-to-br from-emerald-500 to-emerald-600" - }, - { - id: 'hours', - value: 47, - label: "Learning Hours", - change: "+8 this week", - icon: Clock, - iconBg: "bg-gradient-to-br from-blue-500 to-blue-600" - } - ]; - - const daysOfWeek = [ - { label: 'M', full: 'Monday', index: 0 }, - { label: 'T', full: 'Tuesday', index: 1 }, - { label: 'W', full: 'Wednesday', index: 2 }, - { label: 'T', full: 'Thursday', index: 3 }, - { label: 'F', full: 'Friday', index: 4 }, - { label: 'S', full: 'Saturday', index: 5 }, - { label: 'S', full: 'Sunday', index: 6 } - ]; - - return ( - <> -
- {kpiData.map((data) => { - const Icon = data.icon; - return ( - - -
-
-
- {data.label} -
-
- -
-
- -
- {data.value}{data.id === 'hours' ? 'h' : ''} -
-
- -
- {data.change} -
- - - ); - })} - - - -
- - Weekly Learning Goal - - -
- - - -
-

- {weeklyGoal} -

- -
- {daysOfWeek.map((day) => ( -
-
- {day.label} -
-
- ))} -
-
- -

- {completedDays.length} days completed -

- - -
- - setIsModalOpen(false)} - weeklyGoal={1} - setWeeklyGoal={() => {}} - completedDays={completedDays} - setCompletedDays={setCompletedDays} - /> - - ); -} - -// Achievement Badges component -function AchievementBadges() { - const badges = [ - { - id: 'bronze', - title: 'Bronze Trophy', - description: 'Complete 3 foundational leadership courses and score 80%+ in all assessments', - exp: 20, - unlocked: true, - bgColor: 'from-orange-50 to-orange-100', - borderColor: 'border-orange-200', - trophyImage: bronzeTrophy - }, - { - id: 'silver', - title: 'Silver Trophy', - description: 'Master 5 advanced leadership modules and lead a successful team project', - exp: 40, - unlocked: true, - bgColor: 'from-gray-50 to-gray-100', - borderColor: 'border-gray-300', - trophyImage: silverTrophy - }, - { - id: 'gold', - title: 'Gold Trophy', - description: 'Achieve executive leadership certification and mentor 3 junior leaders', - exp: 60, - unlocked: true, - bgColor: 'from-yellow-50 to-yellow-100', - borderColor: 'border-yellow-300', - trophyImage: goldTrophy - }, - { - id: 'platinum', - title: 'Platinum Trophy', - description: 'Complete all specialization tracks and become a certified KLC ambassador', - exp: 100, - unlocked: false, - bgColor: 'from-gray-50 to-gray-100', - borderColor: 'border-gray-200', - trophyImage: platinumTrophy - } - ]; - - const unlockedCount = badges.filter(badge => badge.unlocked).length; - const totalCount = badges.length; - - return ( - - -
-
-
- -
- - Achievement Badges - -
-
- - - {unlockedCount}/{totalCount} - -
-
- -

- Unlock trophies by completing challenges and competitions -

- -
-
-
-
-
- - - -
- {badges.map((badge) => ( -
-
-
- +{badge.exp} EXP -
-
- -
-
-
- -
-
-
- -
-

- {badge.title} -

-

- {badge.description} -

-
- -
-
- {badge.unlocked ? 'UNLOCKED' : 'LOCKED'} -
-
-
- ))} -
- - - ); -} - -// Global Leaderboard component - increased height to match Recent Activity -function GlobalLeaderboard() { - const leaderboardData = [ - { - rank: 1, - name: "Sarah Chen", - points: 2450, - avatar: "https://images.unsplash.com/photo-1494790108755-2616b612b5c8?w=80&h=80&fit=crop&crop=face", - badge: "gold", - change: "+15" - }, - { - rank: 2, - name: "Marcus Johnson", - points: 2380, - avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=80&h=80&fit=crop&crop=face", - badge: "silver", - change: "+8" - }, - { - rank: 3, - name: "Emily Rodriguez", - points: 2320, - avatar: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=80&h=80&fit=crop&crop=face", - badge: "bronze", - change: "+12" - }, - { - rank: 4, - name: "David Kim", - points: 2180, - avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=80&h=80&fit=crop&crop=face", - badge: "regular", - change: "+5" - }, - { - rank: 5, - name: "Lisa Thompson", - points: 2140, - avatar: "https://images.unsplash.com/photo-1517841905240-472988babdf9?w=80&h=80&fit=crop&crop=face", - badge: "regular", - change: "+20" - }, - { - rank: 6, - name: "Alex Patel", - points: 2090, - avatar: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=80&h=80&fit=crop&crop=face", - badge: "regular", - change: "+3" - }, - { - rank: 7, - name: "Your Position", - points: 1950, - avatar: "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=80&h=80&fit=crop&crop=face", - badge: "user", - change: "+18", - isCurrentUser: true - }, - { - rank: 8, - name: "Jennifer Lee", - points: 1890, - avatar: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=80&h=80&fit=crop&crop=face", - badge: "regular", - change: "+7" - } - ]; - - const getBadgeColor = (badge: string) => { - switch (badge) { - case 'gold': return 'bg-gradient-to-r from-yellow-400 to-yellow-500 text-white'; - case 'silver': return 'bg-gradient-to-r from-gray-300 to-gray-400 text-gray-800'; - case 'bronze': return 'bg-gradient-to-r from-orange-400 to-orange-500 text-white'; - case 'user': return 'bg-gradient-to-r from-brand-navy to-brand-navy/90 text-white'; - default: return 'bg-gray-100 text-gray-600'; - } - }; - const navigate = useNavigate(); - - return ( - - -
-
-
- -
- - Global Leaderboard - -
- -
-

- Top learners this month -

- - - - -
- {leaderboardData.map((user) => ( -
- {/* Rank */} -
- {user.rank} -
- - {/* Avatar */} - - - {user.name.split(' ').map(n => n[0]).join('')} - - - {/* User Info */} -
-

- {user.name} -

-

- {user.points.toLocaleString()} points -

-
- - {/* Change */} -
- {user.change} -
-
- ))} -
- - - - ); -} - -// Based on your recent activity recommendations component - redesigned to match provided image -function ActivityRecommendations({ userType = 'individual' }: { userType?: 'individual' | 'corporate' }) { - const recommendations = [ - { - id: 1, - title: "Emotional Intelligence Mastery", - description: "Develop self-awareness and interpersonal skills to become a more effective leader.", - duration: "5 hours", - difficulty: "Intermediate", - badgeText: "Intermediate", - badgeColor: "bg-yellow-100 text-yellow-800", - thumbnail: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=400&h=240&fit=crop", - recentLearners: 248 - }, - { - id: 2, - title: "Strategic Thinking Framework", - description: "Learn to analyze complex business scenarios and make data-driven decisions.", - duration: "4 hours", - difficulty: "Advanced", - badgeText: "Advanced", - badgeColor: "bg-red-100 text-red-800", - thumbnail: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=240&fit=crop", - recentLearners: 189 - }, - { - id: 3, - title: "Team Leadership Excellence", - description: "Master the art of motivating and guiding high-performance teams.", - duration: "8 hours", - difficulty: "Intermediate", - badgeText: "Intermediate", - badgeColor: "bg-yellow-100 text-yellow-800", - thumbnail: "https://images.unsplash.com/photo-1600880292203-757bb62b4baf?w=400&h=240&fit=crop", - recentLearners: 156 - }, - { - id: 4, - title: "Change Management Strategies", - description: "Navigate organizational transformation with confidence and clarity.", - duration: "3 hours", - difficulty: "Beginner", - badgeText: "Beginner", - badgeColor: "bg-green-100 text-green-800", - thumbnail: "https://images.unsplash.com/photo-1542744173-8e7e53415bb0?w=400&h=240&fit=crop", - recentLearners: 134 - } - ]; - - return ( -
-
-
-

- Based on your recent activity, here are your recommendations -

-

- Personalized course suggestions to accelerate your leadership journey -

-
- -
- -
- {recommendations.map((course) => ( - - {/* Course Thumbnail */} -
- -
- - {course.badgeText} - -
-
- - - {/* Course Title */} -

- {course.title} -

- - {/* Course Description */} -

- {course.description} -

- - {/* Duration and Recent Learners */} -
-
- - {course.duration} -
-
- - {course.recentLearners} -
-
- - {/* Enroll Button */} - - - - ))} -
-
- ); -} - -// Recently Viewed component - redesigned to match course card layout -function RecentlyViewed({ userType = 'individual' }: { userType?: 'individual' | 'corporate' }) { - const recentItems = [ - { - id: 1, - title: "Strategic Decision Making", - description: "Master critical thinking and decision-making frameworks for effective leadership.", - type: "Course", - progress: 75, - lastAccessed: "2 hours ago", - thumbnail: "https://images.unsplash.com/photo-1664575602276-acd073f104c1?w=400&h=240&fit=crop", - duration: "4.2 hours", - badgeText: "In Progress", - badgeColor: "bg-blue-100 text-blue-800", - recentLearners: 312 - }, - { - id: 2, - title: "Digital Transformation for Leaders", - description: "Navigate the digital landscape and lead technological change in organizations.", - type: "Webinar", - progress: 100, - lastAccessed: "5 hours ago", - thumbnail: "https://images.unsplash.com/photo-1551434678-e076c223a692?w=400&h=240&fit=crop", - duration: "1.5 hours", - badgeText: "Completed", - badgeColor: "bg-green-100 text-green-800", - recentLearners: 189 - }, - { - id: 3, - title: "Leadership Style Assessment", - description: "Discover your leadership style and develop targeted improvement strategies.", - type: "Assessment", - progress: 100, - lastAccessed: "1 day ago", - thumbnail: "https://images.unsplash.com/photo-1450101499163-c8848c66ca85?w=400&h=240&fit=crop", - duration: "30 minutes", - badgeText: "Completed", - badgeColor: "bg-green-100 text-green-800", - recentLearners: 276 - }, - { - id: 4, - title: "Team Management Fundamentals", - description: "Build essential skills for managing and developing high-performing teams.", - type: "Course", - progress: 45, - lastAccessed: "2 days ago", - thumbnail: "https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=400&h=240&fit=crop", - duration: "6.1 hours", - badgeText: "In Progress", - badgeColor: "bg-blue-100 text-blue-800", - recentLearners: 198 - } - ]; - - return ( -
-
-
-

- Recently Viewed -

-

- Continue where you left off or revisit completed content -

-
- -
- -
- {recentItems.map((item) => ( - - {/* Course Thumbnail */} -
- -
- - {item.badgeText} - -
- {/* Progress overlay for in-progress items */} - {item.progress > 0 && item.progress < 100 && ( -
- Progress: {item.progress}% -
- )} -
- - - {/* Course Title */} -

- {item.title} -

- - {/* Course Description */} -

- {item.description} -

- - {/* Duration and Recent Learners */} -
-
- - {item.duration} -
-
- - {item.recentLearners} -
-
- - {/* Action Button */} - - - - ))} -
-
- ); -} - -// What are others learning component - redesigned to match course card layout -function WhatOthersLearning({ userType = 'individual' }: { userType?: 'individual' | 'corporate' }) { - const trendingContent = [ - { - id: 1, - title: "AI in Leadership Decision Making", - description: "Explore how artificial intelligence is reshaping leadership strategies and decision-making processes.", - trend: "Hot", - enrollments: 2340, - duration: "5.2 hours", - badgeColor: "bg-red-100 text-red-800", - thumbnail: "https://images.unsplash.com/photo-1485827404703-89b55fcc595e?w=400&h=240&fit=crop", - recentLearners: 423 - }, - { - id: 2, - title: "Remote Team Management", - description: "Master the art of leading distributed teams effectively in the modern workplace.", - trend: "Trending", - enrollments: 1890, - duration: "3 sessions", - badgeColor: "bg-orange-100 text-orange-800", - thumbnail: "https://images.unsplash.com/photo-1556761175-b413da4baf72?w=400&h=240&fit=crop", - recentLearners: 267 - }, - { - id: 3, - title: "Sustainable Leadership Practices", - description: "Build leadership approaches that create lasting organizational change and impact.", - trend: "Rising", - enrollments: 1560, - duration: "1 day", - badgeColor: "bg-green-100 text-green-800", - thumbnail: "https://images.unsplash.com/photo-1542744094-3a31f272c490?w=400&h=240&fit=crop", - recentLearners: 198 - }, - { - id: 4, - title: "Data-Driven Leadership", - description: "Learn to make strategic decisions using data analytics and business insights.", - trend: "Popular", - enrollments: 2100, - duration: "4.8 hours", - badgeColor: "bg-blue-100 text-blue-800", - thumbnail: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=400&h=240&fit=crop", - recentLearners: 356 - } - ]; - - return ( -
-
-
-

- What are others learning -

-

- Trending courses and popular content among your peers -

-
- -
- -
- {trendingContent.map((content) => ( - - {/* Course Thumbnail */} -
- -
- - {content.trend} - -
-
- - - {/* Course Title */} -

- {content.title} -

- - {/* Course Description */} -

- {content.description} -

- - {/* Duration and Recent Learners */} -
-
- - {content.duration} -
-
- - {content.recentLearners} -
-
- - {/* Enroll Button */} - - - - ))} -
-
- ); -} - // Main Dashboard component export default function Dashboard({ userType = 'individual' }: DashboardProps) { - const navigate = useNavigate(); const user = { name: 'Alex', email: 'alex@example.com' }; return ( diff --git a/src/pages/learner/GlobalLeaderboard.tsx b/src/pages/learner/GlobalLeaderboard.tsx new file mode 100644 index 0000000..e324573 --- /dev/null +++ b/src/pages/learner/GlobalLeaderboard.tsx @@ -0,0 +1,163 @@ +import React from "react"; +import { useNavigate } from "react-router-dom"; +import { Trophy } from "lucide-react"; + +import { Card, CardHeader, CardTitle, CardContent } from "../../components/ui/card"; +import { Button } from "../../components/ui/button"; +import { ScrollArea } from "../../components/ui/scroll-area"; +import { Avatar, AvatarImage, AvatarFallback } from "../../components/ui/avatar"; + +// Global Leaderboard component - increased height to match Recent Activity +export function GlobalLeaderboard() { + const leaderboardData = [ + { + rank: 1, + name: "Sarah Chen", + points: 2450, + avatar: "https://images.unsplash.com/photo-1494790108755-2616b612b5c8?w=80&h=80&fit=crop&crop=face", + badge: "gold", + change: "+15" + }, + { + rank: 2, + name: "Marcus Johnson", + points: 2380, + avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=80&h=80&fit=crop&crop=face", + badge: "silver", + change: "+8" + }, + { + rank: 3, + name: "Emily Rodriguez", + points: 2320, + avatar: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=80&h=80&fit=crop&crop=face", + badge: "bronze", + change: "+12" + }, + { + rank: 4, + name: "David Kim", + points: 2180, + avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=80&h=80&fit=crop&crop=face", + badge: "regular", + change: "+5" + }, + { + rank: 5, + name: "Lisa Thompson", + points: 2140, + avatar: "https://images.unsplash.com/photo-1517841905240-472988babdf9?w=80&h=80&fit=crop&crop=face", + badge: "regular", + change: "+20" + }, + { + rank: 6, + name: "Alex Patel", + points: 2090, + avatar: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=80&h=80&fit=crop&crop=face", + badge: "regular", + change: "+3" + }, + { + rank: 7, + name: "Your Position", + points: 1950, + avatar: "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=80&h=80&fit=crop&crop=face", + badge: "user", + change: "+18", + isCurrentUser: true + }, + { + rank: 8, + name: "Jennifer Lee", + points: 1890, + avatar: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=80&h=80&fit=crop&crop=face", + badge: "regular", + change: "+7" + } + ]; + + const getBadgeColor = (badge: string) => { + switch (badge) { + case 'gold': return 'bg-gradient-to-r from-yellow-400 to-yellow-500 text-white'; + case 'silver': return 'bg-gradient-to-r from-gray-300 to-gray-400 text-gray-800'; + case 'bronze': return 'bg-gradient-to-r from-orange-400 to-orange-500 text-white'; + case 'user': return 'bg-gradient-to-r from-brand-navy to-brand-navy/90 text-white'; + default: return 'bg-gray-100 text-gray-600'; + } + }; + const navigate = useNavigate(); + + return ( + + +
+
+
+ +
+ + Global Leaderboard + +
+ +
+

+ Top learners this month +

+ + + + +
+ {leaderboardData.map((user) => ( +
+ {/* Rank */} +
+ {user.rank} +
+ + {/* Avatar */} + + + {user.name.split(' ').map(n => n[0]).join('')} + + + {/* User Info */} +
+

+ {user.name} +

+

+ {user.points.toLocaleString()} points +

+
+ + {/* Change */} +
+ {user.change} +
+
+ ))} +
+ + + + ); +} \ No newline at end of file diff --git a/src/pages/learner/RecentlyViewed.tsx b/src/pages/learner/RecentlyViewed.tsx new file mode 100644 index 0000000..94ca2f0 --- /dev/null +++ b/src/pages/learner/RecentlyViewed.tsx @@ -0,0 +1,155 @@ +import React from "react"; +import { useNavigate } from "react-router-dom"; +import { Box, Clock, Users } from "lucide-react"; + +import { Card, CardContent } from "../../components/ui/card"; +import { Button } from "../../components/ui/button"; +import { Badge } from "../../components/ui/badge"; +import { ImageWithFallback } from "../../components/figma/ImageWithFallback"; + +// Recently Viewed component - redesigned to match course card layout +export function RecentlyViewed({ userType = 'individual' }: { userType?: 'individual' | 'corporate' }) { + const recentItems = [ + { + id: 1, + title: "Strategic Decision Making", + description: "Master critical thinking and decision-making frameworks for effective leadership.", + type: "Course", + progress: 75, + lastAccessed: "2 hours ago", + thumbnail: "https://images.unsplash.com/photo-1664575602276-acd073f104c1?w=400&h=240&fit=crop", + duration: "4.2 hours", + badgeText: "In Progress", + badgeColor: "bg-blue-100 text-blue-800", + recentLearners: 312 + }, + { + id: 2, + title: "Digital Transformation for Leaders", + description: "Navigate the digital landscape and lead technological change in organizations.", + type: "Webinar", + progress: 100, + lastAccessed: "5 hours ago", + thumbnail: "https://images.unsplash.com/photo-1551434678-e076c223a692?w=400&h=240&fit=crop", + duration: "1.5 hours", + badgeText: "Completed", + badgeColor: "bg-green-100 text-green-800", + recentLearners: 189 + }, + { + id: 3, + title: "Leadership Style Assessment", + description: "Discover your leadership style and develop targeted improvement strategies.", + type: "Assessment", + progress: 100, + lastAccessed: "1 day ago", + thumbnail: "https://images.unsplash.com/photo-1450101499163-c8848c66ca85?w=400&h=240&fit=crop", + duration: "30 minutes", + badgeText: "Completed", + badgeColor: "bg-green-100 text-green-800", + recentLearners: 276 + }, + { + id: 4, + title: "Team Management Fundamentals", + description: "Build essential skills for managing and developing high-performing teams.", + type: "Course", + progress: 45, + lastAccessed: "2 days ago", + thumbnail: "https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=400&h=240&fit=crop", + duration: "6.1 hours", + badgeText: "In Progress", + badgeColor: "bg-blue-100 text-blue-800", + recentLearners: 198 + } + ]; + + const navigate = useNavigate(); + + return ( +
+
+
+

+ Recently Viewed +

+

+ Continue where you left off or revisit completed content +

+
+ +
+ +
+ {recentItems.map((item) => ( + + {/* Course Thumbnail */} +
+ +
+ + {item.badgeText} + +
+ {/* Progress overlay for in-progress items */} + {item.progress > 0 && item.progress < 100 && ( +
+ Progress: {item.progress}% +
+ )} +
+ + {/* Make content take full space and push button down */} + +
+ {/* Course Title */} +

+ {item.title} +

+ + {/* Course Description */} +

+ {item.description} +

+ + {/* Duration and Recent Learners */} +
+
+ + {item.duration} +
+
+ + {item.recentLearners} +
+
+
+ + {/* Action Button fixed at bottom */} + + + + + ))} +
+
+ ); +} diff --git a/src/pages/learner/WeeklyProgressModal.tsx b/src/pages/learner/WeeklyProgressModal.tsx new file mode 100644 index 0000000..b1042c6 --- /dev/null +++ b/src/pages/learner/WeeklyProgressModal.tsx @@ -0,0 +1,121 @@ +import React, { useState } from "react"; +import { + Dialog, + DialogContent, + DialogDescription, + DialogHeader, + DialogTitle, +} from "../../components/ui/dialog"; +import { Checkbox } from "../../components/ui/checkbox"; +import { Button } from "../../components/ui/button"; + +// Weekly Progress Goal Setting Modal component +export function WeeklyProgressModal({ + isOpen, + onClose, + weeklyGoal, + setWeeklyGoal, + completedDays, + setCompletedDays, +}: { + isOpen?: boolean; + onClose?: () => void; + weeklyGoal?: number; + setWeeklyGoal?: (goal: number) => void; + completedDays?: number[]; + setCompletedDays?: (days: number[]) => void; +}) { + const [selectedDays, setSelectedDays] = useState(completedDays ?? []); + + const daysOfWeek = [ + { label: "Monday", index: 0 }, + { label: "Tuesday", index: 1 }, + { label: "Wednesday", index: 2 }, + { label: "Thursday", index: 3 }, + { label: "Friday", index: 4 }, + { label: "Saturday", index: 5 }, + { label: "Sunday", index: 6 }, + ]; + + const toggleDay = (dayIndex: number) => { + setSelectedDays((prev) => + prev.includes(dayIndex) + ? prev.filter((d) => d !== dayIndex) + : [...prev, dayIndex] + ); + }; + + const handleSave = () => { + setCompletedDays?.(selectedDays); + setWeeklyGoal?.(selectedDays.length); + onClose?.(); + }; + + const handleCancel = () => { + setSelectedDays(completedDays ?? []); + onClose?.(); + }; + + return ( + + + + + Set your weekly learning goal + + + Consistency is key to success! Choose your learning days so we can + estimate your course completion dates and schedule assignment + deadlines, helping you stay on track. + + + +
+
+

+ Choose your learning days +

+

+ The days you select will apply to all your courses on KLC +

+ +
+ {daysOfWeek.map((day) => ( +
+ toggleDay(day.index)} + className="h-5 w-5" + /> + +
+ ))} +
+
+
+ +
+ + +
+ + + ); +} diff --git a/src/pages/learner/WeeklyProgressTracker.tsx b/src/pages/learner/WeeklyProgressTracker.tsx new file mode 100644 index 0000000..af2f64a --- /dev/null +++ b/src/pages/learner/WeeklyProgressTracker.tsx @@ -0,0 +1,133 @@ +import React, { useState } from "react"; +import { BookOpen, Clock } from "lucide-react"; +import { + Card, + CardContent, + CardHeader, + CardTitle, +} from "../../components/ui/card"; +import { Button } from "../../components/ui/button"; +import { WeeklyProgressModal } from "./WeeklyProgressModal"; + +// Weekly Progress component based on the provided design + export function WeeklyProgressTracker() { + const [weeklyGoal, setWeeklyGoal] = useState("Learn 1 day a week on KLC"); + const [completedDays, setCompletedDays] = useState([0, 1, 2]); + const [isModalOpen, setIsModalOpen] = useState(false); + + const kpiData = [ + { + id: 'courses', + value: 8, + label: "Courses Completed", + change: "+2 this month", + icon: BookOpen, + iconBg: "bg-gradient-to-br from-emerald-500 to-emerald-600" + }, + { + id: 'hours', + value: 47, + label: "Learning Hours", + change: "+8 this week", + icon: Clock, + iconBg: "bg-gradient-to-br from-blue-500 to-blue-600" + } + ]; + + const daysOfWeek = [ + { label: 'M', full: 'Monday', index: 0 }, + { label: 'T', full: 'Tuesday', index: 1 }, + { label: 'W', full: 'Wednesday', index: 2 }, + { label: 'T', full: 'Thursday', index: 3 }, + { label: 'F', full: 'Friday', index: 4 }, + { label: 'S', full: 'Saturday', index: 5 }, + { label: 'S', full: 'Sunday', index: 6 } + ]; + + return ( + <> +
+ {kpiData.map((data) => { + const Icon = data.icon; + return ( + + +
+
+
+ {data.label} +
+
+ +
+
+ +
+ {data.value}{data.id === 'hours' ? 'h' : ''} +
+
+ +
+ {data.change} +
+ + + ); + })} + + + +
+ + Weekly Learning Goal + + +
+ + + +
+

+ {weeklyGoal} +

+ +
+ {daysOfWeek.map((day) => ( +
+
+ {day.label} +
+
+ ))} +
+
+ +

+ {completedDays.length} days completed +

+ + +
+ + setIsModalOpen(false)} + weeklyGoal={1} + setWeeklyGoal={() => {}} + completedDays={completedDays} + setCompletedDays={setCompletedDays} + /> + + ); +} \ No newline at end of file diff --git a/src/pages/learner/WhatOthersLearning.tsx b/src/pages/learner/WhatOthersLearning.tsx new file mode 100644 index 0000000..f977736 --- /dev/null +++ b/src/pages/learner/WhatOthersLearning.tsx @@ -0,0 +1,141 @@ +import React from "react"; +import { useNavigate } from "react-router-dom"; +import { Clock, Users } from "lucide-react"; + +import { Card, CardContent } from "../../components/ui/card"; +import { Button } from "../../components/ui/button"; +import { Badge } from "../../components/ui/badge"; +import { ImageWithFallback } from "../../components/figma/ImageWithFallback"; + +// What are others learning component - redesigned to match course card layout +export function WhatOthersLearning({ userType = 'individual' }: { userType?: 'individual' | 'corporate' }) { + const trendingContent = [ + { + id: 1, + title: "AI in Leadership Decision Making", + description: "Explore how artificial intelligence is reshaping leadership strategies and decision-making processes.", + trend: "Hot", + enrollments: 2340, + duration: "5.2 hours", + badgeColor: "bg-red-100 text-red-800", + thumbnail: "https://images.unsplash.com/photo-1485827404703-89b55fcc595e?w=400&h=240&fit=crop", + recentLearners: 423 + }, + { + id: 2, + title: "Remote Team Management", + description: "Master the art of leading distributed teams effectively in the modern workplace.", + trend: "Trending", + enrollments: 1890, + duration: "3 sessions", + badgeColor: "bg-orange-100 text-orange-800", + thumbnail: "https://images.unsplash.com/photo-1556761175-b413da4baf72?w=400&h=240&fit=crop", + recentLearners: 267 + }, + { + id: 3, + title: "Sustainable Leadership Practices", + description: "Build leadership approaches that create lasting organizational change and impact.", + trend: "Rising", + enrollments: 1560, + duration: "1 day", + badgeColor: "bg-green-100 text-green-800", + thumbnail: "https://images.unsplash.com/photo-1542744094-3a31f272c490?w=400&h=240&fit=crop", + recentLearners: 198 + }, + { + id: 4, + title: "Data-Driven Leadership", + description: "Learn to make strategic decisions using data analytics and business insights.", + trend: "Popular", + enrollments: 2100, + duration: "4.8 hours", + badgeColor: "bg-blue-100 text-blue-800", + thumbnail: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=400&h=240&fit=crop", + recentLearners: 356 + } + ]; + + const navigate = useNavigate(); + + return ( +
+
+
+

+ What are others learning +

+

+ Trending courses and popular content among your peers +

+
+ +
+ +
+ {trendingContent.map((content) => ( + + {/* Course Thumbnail */} +
+ +
+ + {content.trend} + +
+
+ + {/* Make content flex column so button sticks to bottom */} + +
+ {/* Course Title */} +

+ {content.title} +

+ + {/* Course Description */} +

+ {content.description} +

+ + {/* Duration and Recent Learners */} +
+
+ + {content.duration} +
+
+ + {content.recentLearners} +
+
+
+ + {/* Enroll Button at bottom */} + + + + + ))} +
+
+ ); +} \ No newline at end of file From b21b7a87c50fba598991f9c42149e3515f3262bd Mon Sep 17 00:00:00 2001 From: AnsariTufail <168163201+AnsariTufail@users.noreply.github.com> Date: Mon, 8 Sep 2025 15:28:28 +0530 Subject: [PATCH 3/3] Fixed Ui --- src/components/HeroSection.tsx | 3 ++- src/components/Navigation.tsx | 11 +++++++---- src/components/learner/LibraryStats.tsx | 2 +- src/pages/CorporateLeaderboard.tsx | 1 + 4 files changed, 11 insertions(+), 6 deletions(-) diff --git a/src/components/HeroSection.tsx b/src/components/HeroSection.tsx index 5974eb4..881d134 100644 --- a/src/components/HeroSection.tsx +++ b/src/components/HeroSection.tsx @@ -2,7 +2,8 @@ import React from 'react'; import { Button } from './ui/button'; import { ArrowRight, ChevronLeft, ChevronRight } from 'lucide-react'; import { ImageWithFallback } from './figma/ImageWithFallback'; -import heroBannerImage from 'figma:asset/1bb9c22c86c0892d4716564b7135835f04869298.png'; +// import heroBannerImage from 'figma:asset/1bb9c22c86c0892d4716564b7135835f04869298.png'; +const heroBannerImage = 'https://images.unsplash.com/photo-1504384308090-c894fdcc538d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80'; interface HeroSectionProps { showAnnouncementBar?: boolean; diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx index b4194af..f47a6cb 100644 --- a/src/components/Navigation.tsx +++ b/src/components/Navigation.tsx @@ -19,10 +19,12 @@ import { SheetTrigger, } from './ui/sheet'; import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/collapsible'; -import { navigate } from './Router'; +// import { navigate } from './Router'; import { useAuth } from './AuthContext'; -import klcLogo from 'figma:asset/209958db0c439ec78be82ab4f3e335a6aed5de89.png'; -import exampleImage from 'figma:asset/6cae567b6bf6a44cb03b767e4308c4c705340d08.png'; +// import klcLogo from 'figma:asset/209958db0c439ec78be82ab4f3e335a6aed5de89.png'; +// import exampleImage from 'figma:asset/6cae567b6bf6a44cb03b767e4308c4c705340d08.png'; +const klcLogo = 'https://res.cloudinary.com/dt3k2apqd/image/upload/v1697045531/Kautilya_Leadership_Centre_Logo_hor_uxh0v4.png'; +const exampleImage = 'https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?w=150&h=150&fit=crop&crop=face'; import { Menu, ChevronDown, @@ -51,7 +53,8 @@ import { Check, ArrowRight } from 'lucide-react'; - +import { useNavigate } from 'react-router-dom'; +const navigate = useNavigate(); interface NavigationProps { currentPage?: string; } diff --git a/src/components/learner/LibraryStats.tsx b/src/components/learner/LibraryStats.tsx index 83622b9..b85b27d 100644 --- a/src/components/learner/LibraryStats.tsx +++ b/src/components/learner/LibraryStats.tsx @@ -1,6 +1,6 @@ import React, { useState, useEffect } from 'react'; import { Card, CardContent, CardHeader, CardTitle } from '../ui/card'; -import { Progress } from '../ui/progress'; +// import { Progress } from '../ui/progress'; import { Badge } from '../ui/badge'; import { Button } from '../ui/button'; import { diff --git a/src/pages/CorporateLeaderboard.tsx b/src/pages/CorporateLeaderboard.tsx index c0f526b..ec86c25 100644 --- a/src/pages/CorporateLeaderboard.tsx +++ b/src/pages/CorporateLeaderboard.tsx @@ -39,6 +39,7 @@ import { Flag, Sparkles } from 'lucide-react'; +import { useNavigate } from 'react-router-dom'; const navigate = useNavigate(); // Mock data for leaderboard