user follow list item

components/user-item.tsx

-import { User } from "@/components/ui/user";
 import Image from "next/image";
 import Link from "next/link";
+import FollowButton from "./following-button";
 
 // this is a single user helper-component, only for design purposes
-export default function User({ id, userName, image }: { id: number, userName: string, image: { url: string } }) {
+export default function FollowUser({ id, followId, userName, image }: { id: number, followId: number, userName: string, image: { url: string } }) {
     return (
-        <User>
+        <div>
             <Link href={`/user/${id}`}>
                 <div className="">
                     <Image
                         src={image.url}
                         alt={userName}
-                        width={264}
-                        height={374}
-                        priority={true}
-                        style={{ width: '100%', height: '100%' }} />
+                        width={50}
+                        height={50}
+                        priority={true} />
                 </div>
+                <p>{userName}</p>
+                <FollowButton userId={id} followerId={followId} />
             </Link>
-            <p className="truncate">{userName}</p>
-        </User>
+        </div>
     )
 }
\ No newline at end of file