45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
|
import { useAppContext } from "../../app/AppContext";
|
||
|
|
import { Button } from "../../components/ui";
|
||
|
|
import { friends } from "../../data/friends.mock";
|
||
|
|
import { getFriendStatusLabel } from "./friendStatus";
|
||
|
|
|
||
|
|
export function SocialSidebar() {
|
||
|
|
const { notify } = useAppContext();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<aside className="social-sidebar" aria-label="Friends and social status">
|
||
|
|
<header>
|
||
|
|
<span className="eyebrow">Social</span>
|
||
|
|
<h2>Friends</h2>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div className="social-list">
|
||
|
|
{friends.map((friend) => (
|
||
|
|
<article key={friend.id} className="social-card">
|
||
|
|
<span className={`status-dot status-${friend.status}`} />
|
||
|
|
<div>
|
||
|
|
<h3>{friend.displayName}</h3>
|
||
|
|
<p>{getFriendStatusLabel(friend.status)}</p>
|
||
|
|
<span>{friend.activity}</span>
|
||
|
|
</div>
|
||
|
|
<Button
|
||
|
|
variant="ghost"
|
||
|
|
size="sm"
|
||
|
|
disabled={friend.status === "offline"}
|
||
|
|
onClick={() =>
|
||
|
|
notify({
|
||
|
|
title: "Invite sent",
|
||
|
|
message: `${friend.displayName} received a prototype party invite.`,
|
||
|
|
variant: "success"
|
||
|
|
})
|
||
|
|
}
|
||
|
|
>
|
||
|
|
Invite
|
||
|
|
</Button>
|
||
|
|
</article>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</aside>
|
||
|
|
);
|
||
|
|
}
|