Skip to content

Commit

Permalink
render
Browse files Browse the repository at this point in the history
  • Loading branch information
@thakiyudheen
thakiyudheen committed Aug 21, 2024
1 parent 5e5a0b6 commit 1c1eb6f
Show file tree
Hide file tree
Showing 20 changed files with 191 additions and 59 deletions.
9 changes: 9 additions & 0 deletions src/Components/common/animations/animation.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import React from 'react';

const Animationss = ({ children } : any ) => {
return (
<div className=' rounded-lg p-4'>{children}</div>
);
};

export default Animationss;
4 changes: 2 additions & 2 deletions src/Components/common/user/Dashboard/Dashbord.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ const Dashboard = () => {
useEffect(() => {

const getData = async () => {
setLoading(true)
// setLoading(true)
const response: any = await dispatch(getAllInstructorsAction({}))
const response1: any = await dispatch(getAllStudentAction({}))
const response2 = await dispatch(getMoreEnrolledCourseAction())
Expand All @@ -56,7 +56,7 @@ const Dashboard = () => {
setCompletedCourse(response5.payload.data.filter((el: any) => el.completionStatus == 'completed'))
setMyStudents([...new Set(response5.payload.data.map((el: any) => el.userId))])
console.log('the students', MyStudents)
setLoading(false)
// setLoading(false)

}
}
Expand Down
2 changes: 1 addition & 1 deletion src/Components/ui/button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,4 +53,4 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
)
Button.displayName = "Button"

export { Button, buttonVariants }
export { Button, buttonVariants }
2 changes: 1 addition & 1 deletion src/Components/user/Dashboard/Dashboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ const Dashboard = () => {
return (

<div className="min-h-screen bg-gray-100 dark:bg-base-100 text-white p-4 mt-[4rem]">
{isLoading&& <LoadingIndicator/>}
{/* {isLoading&& <LoadingIndicator/>} */}
<div>
<h1 className='font-bold mb-5 text-gray-700 dark:text-gray-400'>Dashboard</h1>
</div>
Expand Down
102 changes: 71 additions & 31 deletions src/Components/user/course/course.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,25 +170,25 @@ const CourseCard: React.FC<IframeHTMLAttributes<HTMLIFrameElement>> = () => {
return (
<div className=" mx-auto font-Poppins shadow-md">
{isLoading && <LoadingIndicator />}
<div className="h-[26rem] flex bg-gradient-to-r from-gray-900 to-blue-800 bg-opacity-60 p-6 items-center relative " >
<div className="text-left w-3/4 z-10 p-10">
<h2 className="text-[2rem] font-bold text-white">{course?.courseTitle}</h2>
<h4 className="text-lg w-3/4 text-gray-300 mt-2">{course?.subTitle}</h4>
<div className="mt-4 text-gray-300">
<div className="md:h-[26rem] flex bg-gradient-to-r md:mt-8 mt-[3rem] from-gray-900 to-blue-800 bg-opacity-60 md:p-8 p-3 items-center relative " >
<div className="text-left text-sm md:w-3/4 z-10 md:p-10 p-5">
<h2 className="text-[2rem] font-semibold md:font-semibold text-white">{course?.courseTitle}</h2>
<h4 className=" w-3/4 text-gray-300 text-[14px] mt-2">{course?.subTitle}</h4>
<div className="mt-4 text-gray-300 hidden md:block">
<span>{"rating"} ⭐⭐⭐⭐⭐</span> ({5} ratings) {'10000'} students
</div>
<p className="mt-2 text-gray-300">Created by {course?.instructorRef?.firstName}</p>
<p className="mt-2 text-gray-300">Created by {course?.instructorRef?.firstName}</p>
<p className="mt-1 text-gray-300">Last updated {course?.updatedAt} | {course.language}</p>
</div>
</div>




<div className="flex justify-between bg-gray-200 dark:bg-base-100">
<div className="w-3/4 p-6 ">
<div className="flex justify-between bg-gray-200 dark:bg-base-100 max-w-7xl ">
<div className="md:w-3/4 p-6 ">

<div className="flex items-center w-[86%] bg-white dark:text-gray-400 mb-3 shadow-md dark:bg-gray-800 rounded-lg justify-between p-2 text-black">
<div className="flex items-center md:w-[86%] bg-white dark:text-gray-400 mb-3 shadow-md dark:bg-gray-800 rounded-lg justify-between p-2 text-black">
<div className="flex items-center ">
<img
src={course?.instructorRef?.profile?.avatar} // Replace with the actual profile image URL
Expand All @@ -206,18 +206,74 @@ const CourseCard: React.FC<IframeHTMLAttributes<HTMLIFrameElement>> = () => {
<IoIosShareAlt className='mr-2' /> Share
</button>


</div>
<hr className='md:w-[86%] bg-gray-700' />


<div className={` dark:bg-gray-800 md:hidden mb-5 mt-5 bg-white px-3 pt-9 shadow-xl rounded-lg md:relative right-[5rem] h-[33rem] bottom-[12rem]`}>
<div className=" inset-0 flex items-center justify-center mt-0">
<iframe src={course.videoTrailer} frameBorder="0"></iframe>
</div>
<hr className='w-[86%] bg-gray-700' />
<p className="text-[20px] font-bold text-black dark:text-gray-300 text-start mt-4">
{!isEnrolled ? course.pricing == 'free' ? 'Free' : `₹ ${course.priceAmount}` : ''}
</p>
{data?.data.role === 'student' && (
<div className='flex w-full justify-center flex-col '>
{isEnrolled ? (
<button disabled={true} className="border transition-all duration-300 hover:border-blue-700 hover:text-blue-600 text-white font-semibold px-4 py-2 mt-4 w-[100%] rounded-lg hover:bg-white bg-blue-700">
Already Enrolled
</button>
) : course.pricing === 'free' ? (
<button onClick={handleEnrollment} className="border transition-all duration-300 hover:border-blue-700 hover:text-blue-600 text-white font-semibold px-4 py-2 mt-4 w-[100%] rounded-lg hover:bg-white bg-blue-700">
Enroll Now
</button>
) : (
<button onClick={handlePayment} className="border transition-all duration-300 hover:border-blue-700 hover:text-blue-600 text-white font-semibold px-4 py-2 mt-4 w-[100%] rounded-lg hover:bg-white bg-blue-700">
Buy Now
</button>
)}
<small className="mt-2 text-center text-[11px]">30-Day Money-Back Guarantee</small>
</div>
)}


<div className="mb-6 border bg-white shadow-lg rounded-lg border-gary-600 dark:bg-gray-800 p-7 mt-2 w-[86%]">
<div className="z-10 text-center">
<div>
<hr className='mt-1 mb-3' />
</div>
<ul className='text-start mt-2 p-3 bg-gray-300 dark:text-gray-200 text-gray-700 border space-y-2 dark:bg-gray-700 rounded-md'>
<li>
<small><FaRupeeSign className='inline mr-2 ' /> Monthly fee required</small>
</li>
<li>
<small><FaLock className='inline mr-2' /> Exclusive content access</small>
</li>
<li>
<small><FaSync className='inline mr-2' /> Auto-renewal option</small>
</li>
<li>
<small><FaUsers className='inline mr-2' /> For teams of 2 or more users</small>
</li>
<li>
<small><FaBook className='inline mr-2' /> 26,000+ fresh & in-demand courses</small>
</li>
<li>
<small><FaToolbox className='inline mr-2' /> Learning Engagement tools</small>
</li>
</ul>
</div>

</div>

<div className="mb-6 border bg-white shadow-lg rounded-lg border-gary-600 dark:bg-gray-800 p-7 mt-2 md:w-[86%]">
<h3 className="text-xl font-semibold text-[20px] mb-4">What you'll learn</h3>
<small className='text-sm w-[100%]'>{course.description}</small>
</div>



<div className="mb-6 p-7 w-[86%] dark:bg-gray-800 bg-white border rounded-lg border-gray-200 dark:border-gray-800">
<div className="mb-6 p-7 md:w-[86%] dark:bg-gray-800 bg-white border rounded-lg border-gray-200 dark:border-gray-800">
<h3 className="text-xl font-semibold text-[20px]">This course includes:</h3>
{course?.lessons?.map((item: any, index: number) => (
<div className="collapse collapse-arrow bg-gray-200 text-gray-800 mt-2" key={index}>
Expand Down Expand Up @@ -257,7 +313,7 @@ const CourseCard: React.FC<IframeHTMLAttributes<HTMLIFrameElement>> = () => {



<div className="border dark:border-gray-800 dark:bg-gray-800 bg-white rounded-lg p-4 md:p-10 lg:p-8 w-[86%]">
<div className="border dark:border-gray-800 dark:bg-gray-800 bg-white rounded-lg p-4 md:p-10 lg:p-8 md:w-[86%]">
<h2 className="text-lg md:text-xl lg:text-2xl font-bold mb-2">
Top companies offer this course to their employees
</h2>
Expand All @@ -271,12 +327,13 @@ const CourseCard: React.FC<IframeHTMLAttributes<HTMLIFrameElement>> = () => {
<img src="https://s.udemycdn.com/partner-logos/v4/eventbrite-dark.svg" alt="Eventbrite" className="h-8 md:h-8 ml-3 w-[7rem] lg:h-16" />
</div>
</div>

</div>




<div className={` dark:bg-gray-800 bg-white p-3 shadow-xl rounded-lg relative right-[5rem] h-[33rem] bottom-[12rem]`}>
<div className={` dark:bg-gray-800 hidden md:block bg-white p-3 shadow-xl rounded-lg md:relative right-[5rem] h-[33rem] bottom-[12rem]`}>
<div className=" inset-0 flex items-center justify-center mt-0">
<iframe src={course.videoTrailer} frameBorder="0"></iframe>
</div>
Expand Down Expand Up @@ -329,23 +386,6 @@ const CourseCard: React.FC<IframeHTMLAttributes<HTMLIFrameElement>> = () => {
</ul>
</div>








{/* <div className=" z-10 text-center ">
<h1 className='text-center font-bold text-[17px] mt-4 mb-4'>Subscribe to LearnUp's top courses</h1>
<ul className='text-start mt-2 p-3 bg-gray-300 border dark:bg-gray-700 rounded-md'>
<li><small><FaRupeeSign className='inline mr-2' /> Monthly fee required</small></li>
<li><small><FaLock className='inline mr-2' /> Exclusive content access</small></li>
<li><small><FaSync className='inline mr-2' /> Auto-renewal option</small></li>
</ul>
</div> */}
</div>

</div>
Expand Down
35 changes: 34 additions & 1 deletion src/Components/user/enrollment/videoLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -269,8 +269,41 @@ const VideoLayout: React.FC = () => {
)}
</div>
</div>

<div className=" w-full p-4 mt-6 overflow-y-auto md:w-[30%] rounded-lg dark:bg-gray-800 md:mt-[3.5rem] bg-gray-300 shadow-xl">
<h2 className="text-2xl font-bold mb-4">Course Playlists</h2>
<ul>
{course?.lessons?.map((lesson: any, index: any) => (
<li key={index} className="mb-4">
<div
className={`p-2 cursor-pointer flex items-center space-x-4 bg-gray-100 dark:bg-gray-900 rounded-lg shadow-md ${activeIndex === index ? 'border-2 border-blue-500' : ''}`}
onClick={() => handleLessonClick(lesson.video, lesson.title, index, lesson.description)}
>
<img src={course?.courseThumbnail} alt="not available" className="w-16 h-16 object-cover rounded-md" />
<div>
<div className="text-lg font-semibold">{lesson.title}</div>
<small className="text-sm text-gray-600 dark:text-gray-400 line-clamp-2">{lesson.description}</small>
</div>
</div>
</li>
))}
{completedLessons.length === course?.lessons?.length&&(
<li className='w-full flex justify-center'>
{!examCompleted&& exam ?
(<button onClick={()=>navigate('/student/examination',{state:course?._id})} className='border border-blue-800 py-1 w-full px-7 rounded-md text-blue-700 hover:bg-blue-700 hover:text-white'>
Take Exam
</button>):(
<button onClick={async() => {generateCertificate(data.data.firstName + ' ' + data.data.lastName, 'HTML', '14/07/2024')}} className='border flex justify-center items-center border-blue-800 py-1 w-full px-7 rounded-md text-blue-700 hover:bg-blue-700 hover:text-white'>
<FiDownloadCloud className='text-blue-700 mr-2 size-7' /> Certificate
</button>
)}

</li>
)}
</ul>
</div>
</div>
<div className=" w-full p-4 min-h-screen overflow-y-auto md:w-[30%] rounded-lg dark:bg-gray-800 md:mt-[3.5rem] bg-gray-300 shadow-xl">
<div className=" w-full p-4 hidden min-h-screen overflow-y-auto md:w-[30%] rounded-lg dark:bg-gray-800 md:mt-[3.5rem] bg-gray-300 shadow-xl">
<h2 className="text-2xl font-bold mb-4">Course Playlists</h2>
<ul>
{course?.lessons?.map((lesson: any, index: any) => (
Expand Down
35 changes: 33 additions & 2 deletions src/Components/user/home/Homebanner.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { useNavigate } from 'react-router-dom';
import { useAppSelector } from '@/hooks/hooke';
import { RootState } from '@/redux/store';
import Home from '../../../assets/homebanner/telecommuting-animate.svg';
import Animationss from '@/Components/common/animations/animation';


const textItem = {
Expand All @@ -17,6 +18,8 @@ const variants = {
const Homebanner: React.FC = () => {
const { data } = useAppSelector((state: RootState) => state.user)
const navigate = useNavigate()
const text = "Grow up your skills by online courses with";
const brand = "learnUp";
return (
<div className="flex flex-col items-center justify-center min-h-screen font-Poppins max-w-10xl p-6">
<div className="w-full max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-6 items-center ">
Expand All @@ -26,10 +29,38 @@ const Homebanner: React.FC = () => {
transition={{ duration: 1 }}
className="space-y-8 mt-[6rem] md:mt-0 md:p-0 p-4"
>
<h1 className="text-4xl text-[2rem] font-bold text-gray-900 dark:text-white">
<Animationss>
{/* <h1 className="text-4xl text-[2rem] font-bold text-gray-900 dark:text-white">
Grow up your skills by online courses with
<span className="text-blue-600"> learnUp</span>
</h1>
</h1> */}
<h1 className="text-4xl text-[2rem] font-bold text-gray-900 dark:text-white">
{text.split('').map((char, index) => (
<motion.span
key={index}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: index * 0.05 }}
>
{char}
</motion.span>
))}
<span> </span>
<span className="text-blue-600">
{brand.split('').map((char, index) => (
<motion.span
key={index}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: (text.length + index) * 0.05 }}
>
{char}
</motion.span>
))}
</span>
</h1>

</Animationss>
<p className="text-lg md:text-xl text-gray-700 dark:text-gray-300">
<small>
Welcome to learnUp, where interactive online courses make learning engaging and effective. Designed for all learners, our courses help you achieve your goals. Join us today!
Expand Down
2 changes: 1 addition & 1 deletion src/Components/user/home/features.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const Features: React.FC = () => {
}, []);

return (
<div className='mt-[3rem] font-Poppins p-6 md:p-0'>
<div className=' font-Poppins p-6 md:p-0'>
<h1 className='text-center font-bold text-[20px]'>
<span className='text-blue-900'>Our</span> <span className='text-blue-500'>Features</span>
</h1>
Expand Down
26 changes: 18 additions & 8 deletions src/common/endPoint.ts
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,24 @@
export const auth='api/auth/'
export const user='api/user/'
export const course='api/course/'
export const notification='api/notification/'
export const payment='api/payment/'
export const chat='api/chat/'
// xzc
// while connect with ingress

// export const auth='api/auth/'
// export const user='api/user/'
// export const course='api/course/'
// export const notification='api/notification/'
// export const payment='api/payment/'
// export const chat='api/chat/'
//
// while locally ------------------
// export const auth='api/auth/api/auth/'
// export const user='api/user/api/user/'
// export const course='api/course/api/course/'
// export const notification='api/notification/api/notification/'
// export const payment='api/payment/api/payment/'
// export const chat='api/chat/api/chat/'
// // xzc

// while render -----------------------
export const auth='https://learnup-auth.onrender.com/api/auth/'
export const user='https://learnup-user.onrender.com/api/user/'
export const course='https://learnup-course.onrender.com/api/course/'
export const notification='https://learnup-notification.onrender.com'
export const payment='https://learnup-payment.onrender.com/api/payment/'
export const chat='https://learnup-chat.onrender.com/api/chat/'
2 changes: 1 addition & 1 deletion src/context/socketContext.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@

import { createContext, useContext, useEffect, useState } from 'react';
import io, { Socket } from 'socket.io-client';
import { useAppDispatch, useAppSelector } from '@/hooks/hooke';
Expand Down
2 changes: 1 addition & 1 deletion src/custom.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ declare namespace JSX {
loop?: boolean;
className?: string;
autoplay?: boolean;
[key: string]: any; // Allow any other attributes
[key: string]: any;
};
}
}
5 changes: 3 additions & 2 deletions src/redux/store/actions/course/addCategoryAction.ts
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
import { config } from "@/common/configuration";
import { config } from "../../../../common/configuration";
import { api_client } from "../../../../axios";
import { createAsyncThunk } from "@reduxjs/toolkit";
import { AxiosError } from "axios";
import { course } from "../../../../common/endPoint";

export const addCategoryAction = createAsyncThunk(
'user/add-category',
async (data:{categoryName : string} , { rejectWithValue }) => {
try {
const response = await api_client.post(`/api/course/add-category`,data,config)
const response = await api_client.post(`${course}add-category`,data,config)

if(response.data.success){

Expand Down
Loading

0 comments on commit 1c1eb6f

Please sign in to comment.