feat(frontend): link remote user card avatar/name to profile page
Some checks failed
lint / lint (push) Has been cancelled
test / unit (push) Has been cancelled
test / integration (push) Has been cancelled
lint / lint (pull_request) Failing after 9m42s
test / unit (pull_request) Failing after 11m13s
test / integration (pull_request) Failing after 17m23s
Some checks failed
lint / lint (push) Has been cancelled
test / unit (push) Has been cancelled
test / integration (push) Has been cancelled
lint / lint (pull_request) Failing after 9m42s
test / unit (pull_request) Failing after 11m13s
test / integration (pull_request) Failing after 17m23s
This commit is contained in:
@@ -2,6 +2,7 @@
|
|||||||
|
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { useAuth } from "@/hooks/use-auth";
|
import { useAuth } from "@/hooks/use-auth";
|
||||||
|
import Link from "next/link";
|
||||||
import { followUser, RemoteActor } from "@/lib/api";
|
import { followUser, RemoteActor } from "@/lib/api";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import { UserAvatar } from "@/components/user-avatar";
|
import { UserAvatar } from "@/components/user-avatar";
|
||||||
@@ -36,13 +37,16 @@ export function RemoteUserCard({ actor }: RemoteUserCardProps) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex items-center justify-between p-4 border rounded-lg">
|
<div className="flex items-center justify-between p-4 border rounded-lg">
|
||||||
<div className="flex items-center gap-3">
|
<Link
|
||||||
|
href={`/users/${actor.handle}`}
|
||||||
|
className="flex items-center gap-3 hover:opacity-80"
|
||||||
|
>
|
||||||
<UserAvatar src={actor.avatarUrl} alt={actor.displayName ?? actor.handle} />
|
<UserAvatar src={actor.avatarUrl} alt={actor.displayName ?? actor.handle} />
|
||||||
<div>
|
<div>
|
||||||
<p className="font-medium">{actor.displayName ?? actor.handle}</p>
|
<p className="font-medium">{actor.displayName ?? actor.handle}</p>
|
||||||
<p className="text-sm text-muted-foreground">{actor.handle}</p>
|
<p className="text-sm text-muted-foreground">{actor.handle}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Link>
|
||||||
<Button
|
<Button
|
||||||
onClick={handleFollow}
|
onClick={handleFollow}
|
||||||
disabled={loading || followed}
|
disabled={loading || followed}
|
||||||
|
|||||||
Reference in New Issue
Block a user