Install Spinners
1
| npm install react-spinners
|
Add User Profile Page
add file pages/users/[userId].tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| import { useRouter } from "next/router";
import { ClipLoader } from "react-spinners"
import Header from "@/components/Header";
import useUser from "@/hooks/useUser";
import UserHero from "@/components/users/UserHero";
const UserView = () => {
const router = useRouter();
const { userId } = router.query;
const { data: fetechedUser, isLoading } = useUser(Number(userId));
if (isLoading || !fetechedUser) {
return (
<div className="
flex
justify-center
items-center
h-full
">
<ClipLoader color="lightblue" size={90} />
</div>
)
}
return (
<>
<Header showBackArrow label={fetechedUser?.name} />
<UserHero userId={ userId as string } />
</>
);
}
export default UserView;
|
Add UserHero Component
Add file components/users/UserHero.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| import Image from "next/image";
import useUser from "@/hooks/useUser";
import Avatar from "../Avatar";
import React from "react";
interface UserHeroProps {
userId: string
}
const UserHero: React.FC<UserHeroProps> = ({ userId }) => {
const { data: fetechedUser } = useUser(Number(userId));
return (
<div>
<div className="bg-neutral-700 h-44 relative">
{ fetechedUser?.coverImage && (
<Image
src={fetechedUser.coverImage}
fill
alt="Cover Image"
style={{ objectFit: 'cover'}}
/>
)}
<div className="absolute -bottom-16 left-4">
<Avatar userId={ userId } isLarge hasBorder />
</div>
</div>
</div>
);
}
export default UserHero;
|
Demo
run http://192.168.50.199:3000/users/3:
