src/app/u/[slug]/followers/page.tsx
Type error: Type 'Props' does not satisfy the constraint 'PageProps'.
  Types of property 'params' are incompatible.
    Type '{ slug: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]

import { notFound } from 'next/navigation';
import Image from 'next/image';
import Link from 'next/link';
import { Icon } from '@iconify/react'

import ProfileStyles from '@/assets/modules/profiles.module.css'

interface Follower {
    username: string;
    displayName: string;
    profilePicture: string;
    description: string;
}

async function getFollowers(slug: string) {
    const res = await fetch(`${process.env.NEXT_PUBLIC_URL}/api/interact/get/${slug}/followers`, {
        cache: 'no-store'
    });

    if (!res.ok) return notFound();
    return res.json();
}

type Props = {
    params: { slug: string }
    searchParams: { [key: string]: string | string[] | undefined }
}

export default async function ProfileFollowers({ params }: Props) {
    const data = await getFollowers(params.slug);

    return (
        <div className="mx-auto p-4">
            {data.followers.length > 0 ? (
                <div className={`${ProfileStyles.flwGrid} grid lg:space-y-0 space-y-6`}>
                    <div className="space-y-4">
                        {data.followers.map((follower: Follower) => (
                            <Link
                                key={follower.username}
                                href={`/u/${follower.username}`}
                                className="block bg-[var(--mantle)] rounded-[15px] p-4 hover:bg-[var(--crust)] transition-colors"
                            >
                                <div className="">
                                    <Image
                                        src={`${process.env.NEXT_PUBLIC_MEDIA}/${follower.profilePicture}`}
                                        alt={follower.displayName}
                                        width={70}
                                        height={70}
                                        className="rounded-[15px] m-auto object-cover"
                                    />
                                    <div className='text-center'>
                                        <h3 className="font-semibold text-lg">{follower.displayName}</h3>
                                        <p className="text-gray-400 mt-[-3px]">@{follower.username}</p>
                                        <p className="text-sm mt-3">{follower.description}</p>
                                    </div>
                                </div>
                            </Link>
                        ))}
                    </div>
                </div>
            ) : (
                <div className="text-center py-8">
                    <div className='flex flex-col justify-center'>
                        <Icon className='text-[70px] m-auto' icon='solar:user-heart-rounded-bold' />
                        <div className='mt-3'>
                            No followers yet
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
}