-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
cd9b116
commit 30f704b
Showing
16 changed files
with
455 additions
and
31 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 2 additions & 0 deletions
2
src/app/(dashboard)/workspaces/[workspaceId]/documents/page.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,5 @@ | ||
| 'use client'; | ||
|
|
||
| import { NextPage } from 'next'; | ||
|
|
||
| import { | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| 'use client'; | ||
|
|
||
| import { ClientSideSuspense } from '@liveblocks/react'; | ||
| import { useOthers, useSelf } from '@liveblocks/react/suspense'; | ||
|
|
||
| import { Separator } from '@/common/components/ui/separator'; | ||
|
|
||
| interface AvatarProps { | ||
| src: string; | ||
| name: string; | ||
| } | ||
|
|
||
| const AVATAR_SIZE = 36; | ||
|
|
||
| const Avatar: React.FC<AvatarProps> = ({ src, name }) => { | ||
| return ( | ||
| <div | ||
| style={{ width: AVATAR_SIZE, height: AVATAR_SIZE }} | ||
| className="group relative -ml-2 flex shrink-0 place-content-center rounded-full border-4 border-white bg-gray-400" | ||
| > | ||
| <div className="absolute top-full z-10 mt-2.5 whitespace-nowrap rounded-lg bg-black px-2 py-1 text-xs text-white opacity-0 transition-opacity group-hover:opacity-100"> | ||
| {name} | ||
| </div> | ||
| <img alt={name} src={src} className="size-full rounded-full" /> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| const AvatarStack: React.FC = () => { | ||
| const users = useOthers(); | ||
| const currentUser = useSelf(); | ||
|
|
||
| if (users.length === 0) return null; | ||
|
|
||
| return ( | ||
| <> | ||
| <div className="flex items-center"> | ||
| {currentUser && ( | ||
| <div className="relative ml-2"> | ||
| <Avatar src={currentUser.info.avatar} name="You" /> | ||
| </div> | ||
| )} | ||
| <div className="flex"> | ||
| {users.map(({ connectionId, info }) => { | ||
| return ( | ||
| <Avatar key={connectionId} src={info.avatar} name={info.name} /> | ||
| ); | ||
| })} | ||
| </div> | ||
| </div> | ||
| <Separator orientation="vertical" className="h-6" /> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| const Avatars: React.FC = () => ( | ||
| <ClientSideSuspense fallback={null}> | ||
| <AvatarStack /> | ||
| </ClientSideSuspense> | ||
| ); | ||
|
|
||
| export default Avatars; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| /* eslint-disable simple-import-sort/imports */ | ||
| 'use client'; | ||
|
|
||
| import { ClientSideSuspense } from '@liveblocks/react'; | ||
| import { InboxNotification, InboxNotificationList } from '@liveblocks/react-ui'; | ||
| import { useInboxNotifications } from '@liveblocks/react/suspense'; | ||
| import { BellIcon } from 'lucide-react'; | ||
|
|
||
| import { Button } from '@/common/components/ui/button'; | ||
| import { | ||
| DropdownMenu, | ||
| DropdownMenuContent, | ||
| DropdownMenuTrigger, | ||
| } from '@/common/components/ui/dropdown-menu'; | ||
| import { Separator } from '@/common/components/ui/separator'; | ||
|
|
||
| const InboxMenu: React.FC = () => { | ||
| const { inboxNotifications } = useInboxNotifications(); | ||
|
|
||
| return ( | ||
| <> | ||
| <DropdownMenu> | ||
| <DropdownMenuTrigger asChild> | ||
| <Button variant="ghost" className="relative" size="icon"> | ||
| <BellIcon className="size-5" /> | ||
| {inboxNotifications.length > 0 && ( | ||
| <span className="absolute -right-1 -top-1 flex size-4 items-center justify-center rounded-full bg-sky-500 text-xs text-white"> | ||
| {inboxNotifications.length} | ||
| </span> | ||
| )} | ||
| </Button> | ||
| </DropdownMenuTrigger> | ||
| <DropdownMenuContent align="end" className="w-auto"> | ||
| {inboxNotifications.length > 0 ? ( | ||
| <InboxNotificationList> | ||
| {inboxNotifications.map((inboxNotification) => ( | ||
| <InboxNotification | ||
| key={inboxNotification.id} | ||
| inboxNotification={inboxNotification} | ||
| /> | ||
| ))} | ||
| </InboxNotificationList> | ||
| ) : ( | ||
| <div className="w-[400px] p-2 text-center text-sm text-muted-foreground"> | ||
| 无消息 | ||
| </div> | ||
| )} | ||
| </DropdownMenuContent> | ||
| </DropdownMenu> | ||
| <Separator orientation="vertical" className="h-6" /> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| const Inbox: React.FC = () => ( | ||
| <ClientSideSuspense | ||
| fallback={ | ||
| <> | ||
| <Button variant="ghost" disabled className="relative" size="icon"> | ||
| <BellIcon className="size-5" /> | ||
| </Button> | ||
| <Separator orientation="vertical" className="h-6" /> | ||
| </> | ||
| } | ||
| > | ||
| <InboxMenu /> | ||
| </ClientSideSuspense> | ||
| ); | ||
|
|
||
| export default Inbox; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.