Built Twitter Like App - 17

Install Spinners

npm install react-spinners

Add User Profile Page

add file pages/users/[userId].tsx

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

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: