Skip to content

Commit 6ef848e

Browse files
deepraj21deepraj21
authored
Merge pull request #52 from DanielAgbeni/Danny-Update-Profile-page
Danny update profile page
2 parents cb84077 + 6071b5d commit 6ef848e

File tree

4 files changed

+1138
-997
lines changed

4 files changed

+1138
-997
lines changed

‎client/src/components/Sidebar/HomeSidebar.tsx‎

Lines changed: 109 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -1,129 +1,130 @@
1-
import React, { useState } from "react";
1+
import React, { useState } from 'react';
22
import { useNavigate } from 'react-router-dom';
3-
import { Sidebar, SidebarBody, SidebarLink } from "@/components/ui/sidebar";
4-
import {
5-
IconArrowLeft,
6-
IconBrandTabler
7-
} from "@tabler/icons-react";
3+
import { Sidebar, SidebarBody, SidebarLink } from '@/components/ui/sidebar';
4+
import { IconArrowLeft, IconBrandTabler } from '@tabler/icons-react';
85
import { Link } from 'react-router-dom';
9-
import { motion } from "framer-motion";
6+
import { motion } from 'framer-motion';
107

118
interface HomeProps {
12-
onLogout: () => void;
13-
username: string;
9+
onLogout: () => void;
10+
username: string;
1411
}
1512

1613
const HomeSidebar: React.FC<HomeProps> = ({ onLogout, username }) => {
17-
const navigate = useNavigate();
14+
const navigate = useNavigate();
1815

19-
const handleLogout = async () => {
20-
try {
21-
await onLogout();
22-
navigate('/');
23-
} catch (error) {
24-
console.error('Logout failed:', error);
25-
}
26-
};
16+
const handleLogout = async () => {
17+
try {
18+
await onLogout();
19+
navigate('/');
20+
} catch (error) {
21+
console.error('Logout failed:', error);
22+
}
23+
};
2724

28-
const goToProfile = () => {
29-
navigate(`/u/${username}`);
30-
};
25+
const goToProfile = () => {
26+
navigate(`/u/${username}`);
27+
};
3128

32-
const goToHome = () => {
33-
navigate('/home');
34-
};
29+
const goToHome = () => {
30+
navigate('/home');
31+
};
3532

36-
const links = [
37-
{
38-
label: "Dashboard",
39-
href: "#",
40-
icon: (
41-
<IconBrandTabler className="text-neutral-700 dark:text-neutral-200 h-5 w-5 flex-shrink-0" />
42-
),
43-
onClick: goToHome,
44-
}
45-
];
33+
const links = [
34+
{
35+
label: 'Dashboard',
36+
href: '#',
37+
icon: (
38+
<IconBrandTabler className='text-neutral-700 dark:text-neutral-200 h-5 w-5 flex-shrink-0' />
39+
),
40+
onClick: goToHome,
41+
},
42+
];
4643

47-
const [open, setOpen] = useState(false);
44+
const [open, setOpen] = useState(false);
4845

49-
return (
50-
51-
<Sidebar open={open} setOpen={setOpen}>
52-
<SidebarBody className="justify-between gap-10">
53-
<div className="flex flex-col flex-1 overflow-y-auto overflow-x-hidden">
54-
{open ? <Logo /> : <LogoIcon />}
55-
<div className="mt-8 flex flex-col gap-2">
56-
{links.map((link, idx) => (
57-
<SidebarLink key={idx} link={link} />
58-
))}
59-
</div>
60-
</div>
61-
<div>
62-
<SidebarLink
63-
link={{
64-
label: username,
65-
href: "#",
66-
icon: (
67-
<img
68-
src="https://img.freepik.com/free-vector/user-blue-gradient_78370-4692.jpg?size=338&ext=jpg&ga=GA1.1.1700460183.1712707200&semt=ais"
69-
className="h-7 w-7 flex-shrink-0 rounded-full"
70-
width={50}
71-
height={50}
72-
alt="Avatar"
73-
/>
74-
),
75-
onClick: goToProfile
76-
}}
77-
78-
/>
79-
<SidebarLink
80-
link={{
81-
label: "Logout",
82-
href: "#",
83-
icon: (
84-
<IconArrowLeft className="text-neutral-700 dark:text-neutral-200 h-5 w-5 flex-shrink-0" />
85-
),
86-
onClick: handleLogout,
87-
}}
88-
/>
89-
90-
</div>
91-
</SidebarBody>
92-
</Sidebar>
93-
94-
);
46+
return (
47+
<Sidebar
48+
open={open}
49+
setOpen={setOpen}>
50+
<SidebarBody className='justify-between gap-10 h-screen'>
51+
<div className='flex flex-col flex-1 overflow-y-auto overflow-x-hidden'>
52+
{open ? <Logo /> : <LogoIcon />}
53+
<div className='mt-8 flex flex-col gap-2'>
54+
{links.map((link, idx) => (
55+
<SidebarLink
56+
key={idx}
57+
link={link}
58+
/>
59+
))}
60+
</div>
61+
</div>
62+
<div>
63+
<SidebarLink
64+
link={{
65+
label: username,
66+
href: '#',
67+
icon: (
68+
<img
69+
src='https://img.freepik.com/free-vector/user-blue-gradient_78370-4692.jpg?size=338&ext=jpg&ga=GA1.1.1700460183.1712707200&semt=ais'
70+
className='h-7 w-7 flex-shrink-0 rounded-full'
71+
width={50}
72+
height={50}
73+
alt='Avatar'
74+
/>
75+
),
76+
onClick: goToProfile,
77+
}}
78+
/>
79+
<SidebarLink
80+
link={{
81+
label: 'Logout',
82+
href: '#',
83+
icon: (
84+
<IconArrowLeft className='text-neutral-700 dark:text-neutral-200 h-5 w-5 flex-shrink-0' />
85+
),
86+
onClick: handleLogout,
87+
}}
88+
/>
89+
</div>
90+
</SidebarBody>
91+
</Sidebar>
92+
);
9593
};
9694

9795
export const Logo = () => {
98-
return (
99-
<Link
100-
to="#"
101-
className="font-normal flex space-x-2 items-center text-sm text-black py-1 relative z-20"
102-
>
103-
{/* <div className="h-5 w-6 bg-black dark:bg-white rounded-br-lg rounded-tr-sm rounded-tl-lg rounded-bl-sm flex-shrink-0" /> */}
104-
<h1 style={{ fontSize: "1.3rem", fontWeight: "bold" }} className="font-medium text-black dark:text-white whitespace-pre"
105-
>dh</h1>
106-
<motion.span
107-
initial={{ opacity: 0 }}
108-
animate={{ opacity: 1 }}
109-
className="font-medium text-black dark:text-white whitespace-pre"
110-
>
111-
Devhub
112-
</motion.span>
113-
</Link>
114-
);
96+
return (
97+
<Link
98+
to='#'
99+
className='font-normal flex space-x-2 items-center text-sm text-black py-1 relative z-20'>
100+
{/* <div className="h-5 w-6 bg-black dark:bg-white rounded-br-lg rounded-tr-sm rounded-tl-lg rounded-bl-sm flex-shrink-0" /> */}
101+
<h1
102+
style={{ fontSize: '1.3rem', fontWeight: 'bold' }}
103+
className='font-medium text-black dark:text-white whitespace-pre'>
104+
dh
105+
</h1>
106+
<motion.span
107+
initial={{ opacity: 0 }}
108+
animate={{ opacity: 1 }}
109+
className='font-medium text-black dark:text-white whitespace-pre'>
110+
Devhub
111+
</motion.span>
112+
</Link>
113+
);
115114
};
116115

117116
export const LogoIcon = () => {
118-
return (
119-
<Link
120-
to="#"
121-
className="font-normal flex space-x-2 items-center text-sm text-black py-1 relative z-20"
122-
>
123-
<h1 style={{ fontSize: "1.3rem", fontWeight: "bold" }} className="font-medium text-black dark:text-white whitespace-pre"
124-
>dh</h1>
125-
</Link>
126-
);
117+
return (
118+
<Link
119+
to='#'
120+
className='font-normal flex space-x-2 items-center text-sm text-black py-1 relative z-20'>
121+
<h1
122+
style={{ fontSize: '1.3rem', fontWeight: 'bold' }}
123+
className='font-medium text-black dark:text-white whitespace-pre'>
124+
dh
125+
</h1>
126+
</Link>
127+
);
127128
};
128129

129-
export default HomeSidebar;
130+
export default HomeSidebar;

‎client/src/components/ui/skeleton.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { cn } from "@/lib/utils"
2+
3+
function Skeleton({
4+
className,
5+
...props
6+
}: React.HTMLAttributes<HTMLDivElement>) {
7+
return (
8+
<div
9+
className={cn("animate-pulse rounded-md bg-muted", className)}
10+
{...props}
11+
/>
12+
)
13+
}
14+
15+
export { Skeleton }

0 commit comments

Comments
 (0)