Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Bug fixes and updates #73

Merged
merged 2 commits into from
Aug 29, 2023
Merged

Bug fixes and updates #73

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b1c75d8
links added in carousal
abinth11 Aug 28, 2023
9c701df
logout confirmation added
abinth11 Aug 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
136 changes: 77 additions & 59 deletions client/src/components/elements/carousel-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,107 +1,125 @@
import { Carousel, Typography, Button } from "@material-tailwind/react";

import { Link } from "react-router-dom";

export default function CarouselComponent() {
return (
<Carousel className="rounded-none h-[30rem]" autoplay={true} autoplayDelay={4000} loop={true}>
<div className="relative h-full w-full">
<Carousel
className='rounded-none h-[30rem]'
autoplay={true}
autoplayDelay={7000}
loop={true}
>
<div className='relative h-full w-full'>
<img
src="https://res.cloudinary.com/dwucedjmy/image/upload/v1687722374/Tutor-Trek/09206fc2-d0f1-41f6-b714-36242be94ee7_zhgvax.jpg"
alt="image 2"
className="h-full w-full object-cover"
src='https://res.cloudinary.com/dwucedjmy/image/upload/v1687722374/Tutor-Trek/09206fc2-d0f1-41f6-b714-36242be94ee7_zhgvax.jpg'
alt='image 2'
className='h-full w-full object-cover'
/>
<div className="absolute inset-0 grid h-full w-full items-center bg-black/75">
<div className="w-3/4 pl-12 md:w-2/4 md:pl-20 lg:pl-32">
<div className='absolute inset-0 grid h-full w-full items-center bg-black/75'>
<div className='w-3/4 pl-12 md:w-2/4 md:pl-20 lg:pl-32'>
<Typography
variant="h1"
color="white"
className="mb-4 text-3xl md:text-4xl lg:text-5xl"
variant='h1'
color='white'
className='mb-4 text-3xl md:text-4xl lg:text-5xl'
>
Welcome to TutorTrek
</Typography>
<Typography
variant="lead"
color="white"
className="mb-12 opacity-80"
variant='lead'
color='white'
className='mb-12 opacity-80'
>
Enhance your knowledge and skills with our comprehensive courses
taught by expert instructors.
</Typography>
<div className="flex gap-2">
<Button size="lg" color="white">
Explore Courses
</Button>
<Button size="lg" color="white" variant="text">
About Us
</Button>
<div className='flex gap-2'>
<Link to='/courses'>
<Button size='lg' color='white'>
Explore Courses
</Button>
</Link>
<Link to='/about'>
<Button size='lg' color='white' variant='text'>
About Us
</Button>
</Link>
</div>
</div>
</div>
</div>
<div className="relative h-full w-full">
<div className='relative h-full w-full'>
<img
src="https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTh8fHRlYWNoZXJ8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60"
alt="image 1"
className="h-full w-full object-cover"
src='https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTh8fHRlYWNoZXJ8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60'
alt='image 1'
className='h-full w-full object-cover'
/>
<div className="absolute inset-0 grid h-full w-full place-items-center bg-black/75">
<div className="w-3/4 text-center md:w-2/4">
<div className='absolute inset-0 grid h-full w-full place-items-center bg-black/75'>
<div className='w-3/4 text-center md:w-2/4'>
<Typography
variant="h1"
color="white"
className="mb-4 text-3xl md:text-4xl lg:text-5xl"
variant='h1'
color='white'
className='mb-4 text-3xl md:text-4xl lg:text-5xl'
>
Learn Anytime, Anywhere
</Typography>
<Typography
variant="lead"
color="white"
className="mb-12 opacity-80"
variant='lead'
color='white'
className='mb-12 opacity-80'
>
Access our courses from the comfort of your own home and learn at
your own pace. No restrictions or time limits.
</Typography>
<div className="flex justify-center gap-2">
<Button size="lg" color="white">
Browse Courses
</Button>
<Button size="lg" color="white" variant="text">
FAQs
</Button>
<div className='flex justify-center gap-2'>
<Link to='/courses'>
<Button size='lg' color='white'>
Browse Courses
</Button>
</Link>
<Link to='#'>
<Button size='lg' color='white' variant='text'>
FAQs
</Button>
</Link>
</div>
</div>
</div>
</div>
<div className="relative h-full w-full">
<div className='relative h-full w-full'>
<img
src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTd8fGxlYXJuaW5nfGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
alt="image 3"
className="h-full w-full object-cover"
src='https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTd8fGxlYXJuaW5nfGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60'
alt='image 3'
className='h-full w-full object-cover'
/>
<div className="absolute inset-0 grid h-full w-full items-end bg-black/75">
<div className="w-3/4 pl-12 pb-12 md:w-2/4 md:pl-20 md:pb-20 lg:pl-32 lg:pb-32">
<div className='absolute inset-0 grid h-full w-full items-end bg-black/75'>
<div className='w-3/4 pl-12 pb-12 md:w-2/4 md:pl-20 md:pb-20 lg:pl-32 lg:pb-32'>
<Typography
variant="h1"
color="white"
className="mb-4 text-3xl md:text-4xl lg:text-5xl"
variant='h1'
color='white'
className='mb-4 text-3xl md:text-4xl lg:text-5xl'
>
Expand Your Knowledge
</Typography>
<Typography
variant="lead"
color="white"
className="mb-12 opacity-80"
variant='lead'
color='white'
className='mb-12 opacity-80'
>
Discover new subjects and gain expertise in your area of interest.
Our platform offers a wide range of courses to cater to your
learning goals.
</Typography>
<div className="flex gap-2">
<Button size="lg" color="white">
Start Learning
</Button>
<Button size="lg" color="white" variant="text">
Testimonials
</Button>
<div className='flex gap-2'>
<Link to='/courses'>
<Button size='lg' color='white'>
Start Learning
</Button>
</Link>
<Link to='#'>
<Button size='lg' color='white' variant='text'>
Testimonials
</Button>
</Link>
</div>
</div>
</div>
Expand Down
131 changes: 73 additions & 58 deletions client/src/components/elements/profile-menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from "react";
import React,{useState} from "react";
import {
Typography,
Button,
Expand All @@ -21,6 +21,7 @@ import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import { USER_AVATAR } from "../../constants/common";
import { selectStudent } from "../../redux/reducers/studentSlice";
import LogoutConfirmationModal from "./student-logout-modal";

// profile menu component
const profileMenuItems = [
Expand Down Expand Up @@ -50,83 +51,97 @@ export default function ProfileMenu() {
const dispatch = useDispatch();
const navigate = useNavigate();
const student = useSelector(selectStudent);

const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false);
const [logoutConfirmationOpen, setLogoutConfirmationOpen] = useState<boolean>(false);


const handleAction = (action: string) => {
switch (action) {
case "My Profile":
navigate("/dashboard/my-profile");
break;
case "Settings":
case "Settings":
navigate("/dashboard/settings");
break;
case "Inbox":
break;
case "Help":
break;
case "Sign Out":
dispatch(clearToken());
navigate("/");
setLogoutConfirmationOpen(true);
break;
default:
break;
}
};
const [isMenuOpen, setIsMenuOpen] = React.useState(false);

const handleLogout = () => {
setTimeout(()=>{
dispatch(clearToken());
navigate("/");
},2000)
};


return (
<Menu open={isMenuOpen} handler={setIsMenuOpen} placement='bottom-end'>
<MenuHandler>
<Button
variant='text'
color='blue-gray'
className='flex items-center gap-1 rounded-full py-0.5 pr-2 pl-0.5 lg:ml-auto'
>
<Avatar
variant='circular'
size='sm'
alt='candice wu'
className='border border-blue-500 p-0.5'
src={
student.studentDetails?.profilePic?.url|| USER_AVATAR
}
/>
<ChevronDownIcon
strokeWidth={2.5}
className={`h-3 w-3 transition-transform ${
isMenuOpen ? "rotate-180" : ""
}`}
/>
</Button>
</MenuHandler>
<MenuList className='p-1'>
{profileMenuItems.map(({ label, icon }, key) => {
const isLastItem = key === profileMenuItems.length - 1;
return (
<MenuItem
key={key}
onClick={() => handleAction(label)}
className={`flex items-center gap-2 rounded ${
isLastItem
? "hover:bg-red-500/10 focus:bg-red-500/10 active:bg-red-500/10"
: ""
<>
<Menu open={isMenuOpen} handler={setIsMenuOpen} placement='bottom-end'>
<MenuHandler>
<Button
variant='text'
color='blue-gray'
className='flex items-center gap-1 rounded-full py-0.5 pr-2 pl-0.5 lg:ml-auto'
>
<Avatar
variant='circular'
size='sm'
alt='candice wu'
className='border border-blue-500 p-0.5'
src={student.studentDetails?.profilePic?.url || USER_AVATAR}
/>
<ChevronDownIcon
strokeWidth={2.5}
className={`h-3 w-3 transition-transform ${
isMenuOpen ? "rotate-180" : ""
}`}
>
{React.createElement(icon, {
className: `h-4 w-4 ${isLastItem ? "text-red-500" : ""}`,
strokeWidth: 2,
})}
<Typography
as='span'
variant='small'
className='font-normal'
color={isLastItem ? "red" : "inherit"}
/>
</Button>
</MenuHandler>
<MenuList className='p-1'>
{profileMenuItems.map(({ label, icon }, key) => {
const isLastItem = key === profileMenuItems.length - 1;
return (
<MenuItem
key={key}
onClick={() => handleAction(label)}
className={`flex items-center gap-2 rounded ${
isLastItem
? "hover:bg-red-500/10 focus:bg-red-500/10 active:bg-red-500/10"
: ""
}`}
>
{label}
</Typography>
</MenuItem>
);
})}
</MenuList>
</Menu>
{React.createElement(icon, {
className: `h-4 w-4 ${isLastItem ? "text-red-500" : ""}`,
strokeWidth: 2,
})}
<Typography
as='span'
variant='small'
className='font-normal'
color={isLastItem ? "red" : "inherit"}
>
{label}
</Typography>
</MenuItem>
);
})}
</MenuList>
</Menu>
<LogoutConfirmationModal
open={logoutConfirmationOpen}
setOpen={setLogoutConfirmationOpen}
onConfirmLogout={handleLogout}
/>
</>
);
}
Loading
Loading