Gabriel Kaszewski
f1e891413a
- Updated UserAvatar component to accept additional className for better customization. - Refined ProfilePage layout with responsive avatar styling. - Enhanced Header component with improved background and text styles. - Improved PopularTags and TopFriends components with better spacing and text shadows. - Updated ThoughtCard and ThoughtThread components for better visual hierarchy and responsiveness. - Enhanced UI components (Button, Badge, Card, DropdownMenu, Input, Popover, Separator, Skeleton, Textarea) with new styles and effects. - Added a new background image for visual enhancement.
64 lines
2.0 KiB
TypeScript
64 lines
2.0 KiB
TypeScript
import Link from "next/link";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { UserAvatar } from "./user-avatar";
|
|
import { getUserProfile, User } from "@/lib/api";
|
|
import { cookies } from "next/headers";
|
|
|
|
interface TopFriendsProps {
|
|
usernames: string[];
|
|
}
|
|
|
|
// This is an async Server Component
|
|
export async function TopFriends({ usernames }: TopFriendsProps) {
|
|
const token = (await cookies()).get("auth_token")?.value ?? null;
|
|
|
|
if (usernames.length === 0) {
|
|
return (
|
|
<Card className="p-4">
|
|
<CardHeader className="p-0 pb-2">
|
|
<CardTitle className="text-lg text-shadow-md">Top Friends</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="p-0">
|
|
<p className="text-sm text-muted-foreground">
|
|
No top friends to display.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
// Fetch all top friend profiles in parallel
|
|
const friendsResults = await Promise.allSettled(
|
|
usernames.map((username) => getUserProfile(username, token))
|
|
);
|
|
|
|
const friends = friendsResults
|
|
.filter(
|
|
(result): result is PromiseFulfilledResult<User> =>
|
|
result.status === "fulfilled"
|
|
)
|
|
.map((result) => result.value);
|
|
|
|
return (
|
|
<Card className="p-4">
|
|
<CardHeader className="p-0 pb-2">
|
|
<CardTitle className="text-lg text-shadow-md">Top Friends</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="p-0">
|
|
{friends.map((friend) => (
|
|
<Link
|
|
href={`/users/${friend.username}`}
|
|
key={friend.id}
|
|
className="flex items-center gap-3 py-2 px-2 -mx-2 rounded-lg hover:bg-accent/50 transition-colors"
|
|
>
|
|
<UserAvatar src={friend.avatarUrl} alt={friend.username} />
|
|
<span className="text-xs truncate w-full group-hover:underline font-medium text-shadow-sm">
|
|
{friend.displayName || friend.username}
|
|
</span>
|
|
</Link>
|
|
))}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|