@rpg-engine/long-bow 0.8.123 → 0.8.124
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/long-bow.cjs.development.js +18 -2
- package/dist/long-bow.cjs.development.js.map +1 -1
- package/dist/long-bow.cjs.production.min.js +1 -1
- package/dist/long-bow.cjs.production.min.js.map +1 -1
- package/dist/long-bow.esm.js +18 -2
- package/dist/long-bow.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Friends/FriendList.tsx +77 -38
package/package.json
CHANGED
|
@@ -79,45 +79,53 @@ export const FriendList: React.FC<IFriendListProps> = ({
|
|
|
79
79
|
}
|
|
80
80
|
};
|
|
81
81
|
|
|
82
|
-
const friendsTabContent =
|
|
83
|
-
|
|
84
|
-
<
|
|
85
|
-
<
|
|
86
|
-
<
|
|
87
|
-
<
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
</thead>
|
|
92
|
-
<tbody>
|
|
93
|
-
{friends.map(friend => (
|
|
94
|
-
<TableRow key={friend._id}>
|
|
95
|
-
<TableCell>
|
|
96
|
-
<IsOnlineBadge $isOnline={friend.isOnline} />
|
|
97
|
-
</TableCell>
|
|
98
|
-
<TableCell>{friend.name}</TableCell>
|
|
99
|
-
<TableCell>
|
|
100
|
-
<ActionButtons>
|
|
101
|
-
<UserActionLink
|
|
102
|
-
color={uiColors.white}
|
|
103
|
-
onClick={() => onOpenPrivateMessage(friend)}
|
|
104
|
-
>
|
|
105
|
-
Chat
|
|
106
|
-
</UserActionLink>
|
|
107
|
-
<UserActionLink
|
|
108
|
-
color={uiColors.red}
|
|
109
|
-
onClick={() => onRemoveFriend(friend)}
|
|
110
|
-
>
|
|
111
|
-
Remove
|
|
112
|
-
</UserActionLink>
|
|
113
|
-
</ActionButtons>
|
|
114
|
-
</TableCell>
|
|
82
|
+
const friendsTabContent =
|
|
83
|
+
friends.length > 0 ? (
|
|
84
|
+
<ScrollableArea>
|
|
85
|
+
<Table>
|
|
86
|
+
<thead>
|
|
87
|
+
<TableRow>
|
|
88
|
+
<TableHeader>Online</TableHeader>
|
|
89
|
+
<TableHeader>Name</TableHeader>
|
|
90
|
+
<TableHeader>Actions</TableHeader>
|
|
115
91
|
</TableRow>
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
92
|
+
</thead>
|
|
93
|
+
<tbody>
|
|
94
|
+
{friends.map(friend => (
|
|
95
|
+
<TableRow key={friend._id}>
|
|
96
|
+
<TableCell>
|
|
97
|
+
<IsOnlineBadge $isOnline={friend.isOnline} />
|
|
98
|
+
</TableCell>
|
|
99
|
+
<TableCell>{friend.name}</TableCell>
|
|
100
|
+
<TableCell>
|
|
101
|
+
<ActionButtons>
|
|
102
|
+
<UserActionLink
|
|
103
|
+
color={uiColors.white}
|
|
104
|
+
onClick={() => onOpenPrivateMessage(friend)}
|
|
105
|
+
>
|
|
106
|
+
Chat
|
|
107
|
+
</UserActionLink>
|
|
108
|
+
<UserActionLink
|
|
109
|
+
color={uiColors.red}
|
|
110
|
+
onClick={() => onRemoveFriend(friend)}
|
|
111
|
+
>
|
|
112
|
+
Remove
|
|
113
|
+
</UserActionLink>
|
|
114
|
+
</ActionButtons>
|
|
115
|
+
</TableCell>
|
|
116
|
+
</TableRow>
|
|
117
|
+
))}
|
|
118
|
+
</tbody>
|
|
119
|
+
</Table>
|
|
120
|
+
</ScrollableArea>
|
|
121
|
+
) : (
|
|
122
|
+
<EmptyStateContainer>
|
|
123
|
+
<EmptyStateText>You don't have any friends yet</EmptyStateText>
|
|
124
|
+
<AddFriendCTA onClick={() => setActiveTab('search')}>
|
|
125
|
+
Add your first friend
|
|
126
|
+
</AddFriendCTA>
|
|
127
|
+
</EmptyStateContainer>
|
|
128
|
+
);
|
|
121
129
|
|
|
122
130
|
const searchTabContent = (
|
|
123
131
|
<ListContainer>
|
|
@@ -305,3 +313,34 @@ const EmptyMessage = styled.p`
|
|
|
305
313
|
padding: 1rem;
|
|
306
314
|
font-size: ${uiFonts.size.small};
|
|
307
315
|
`;
|
|
316
|
+
|
|
317
|
+
const EmptyStateContainer = styled.div`
|
|
318
|
+
display: flex;
|
|
319
|
+
flex-direction: column;
|
|
320
|
+
align-items: center;
|
|
321
|
+
justify-content: center;
|
|
322
|
+
padding: 2rem;
|
|
323
|
+
gap: 1rem;
|
|
324
|
+
`;
|
|
325
|
+
|
|
326
|
+
const EmptyStateText = styled.p`
|
|
327
|
+
text-align: center;
|
|
328
|
+
color: #888;
|
|
329
|
+
font-size: ${uiFonts.size.small};
|
|
330
|
+
margin: 0;
|
|
331
|
+
`;
|
|
332
|
+
|
|
333
|
+
const AddFriendCTA = styled.button`
|
|
334
|
+
background-color: ${uiColors.lightGreen};
|
|
335
|
+
color: #000;
|
|
336
|
+
border: none;
|
|
337
|
+
padding: 0.5rem 1rem;
|
|
338
|
+
font-size: ${uiFonts.size.small};
|
|
339
|
+
cursor: pointer;
|
|
340
|
+
border-radius: 4px;
|
|
341
|
+
transition: opacity 0.2s;
|
|
342
|
+
|
|
343
|
+
&:hover {
|
|
344
|
+
opacity: 0.8;
|
|
345
|
+
}
|
|
346
|
+
`;
|