Skip to content

Commit

Permalink
fix: update invitation fab
Browse files Browse the repository at this point in the history 
Signed-off-by: Innei <i@innei.in>
  • Loading branch information
@Innei
Innei committed Aug 30, 2024
1 parent 47d9fe6 commit 0cd1837
Showing 1 changed file with 90 additions and 80 deletions.
170 changes: 90 additions & 80 deletions src/renderer/src/modules/settings/tabs/invitations.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,7 @@ import {
} from "@renderer/components/ui/avatar"
import { Button, MotionButtonBase } from "@renderer/components/ui/button"
import { CopyButton } from "@renderer/components/ui/code-highlighter"
import { RootPortal } from "@renderer/components/ui/portal"
import { useScrollViewElement } from "@renderer/components/ui/scroll-area/hooks"
import { ScrollArea } from "@renderer/components/ui/scroll-area"
import {
Table,
TableBody,
Expand All @@ -15,6 +14,7 @@ import {
TableHeader,
TableRow,
} from "@renderer/components/ui/table"
import { Tooltip, TooltipContent, TooltipTrigger } from "@renderer/components/ui/tooltip"
import { useAuthQuery } from "@renderer/hooks/common"
import { apiClient, getFetchErrorMessage } from "@renderer/lib/api-fetch"
import { usePresentUserProfileModal } from "@renderer/modules/profile/hooks"
Expand All @@ -41,91 +41,101 @@ export const SettingInvitations = () => {
})
const presentUserProfile = usePresentUserProfileModal("drawer")

const scrollViewElement = useScrollViewElement()

return (
<>
<SettingsTitle />
<div className="relative mt-4">
<RootPortal to={scrollViewElement!}>
<MotionButtonBase
type="button"
onClick={() => {
newInvitation.mutate()
}}
className="center absolute bottom-4 right-4 size-8 rounded-full bg-accent text-white drop-shadow"
>
<i className="i-mingcute-user-add-2-line size-4" />
</MotionButtonBase>
</RootPortal>
<div className="absolute inset-x-0 bottom-10 top-4 flex flex-col">
<Tooltip>
<TooltipTrigger>
<MotionButtonBase
type="button"
onClick={() => {
newInvitation.mutate()
}}
className="center absolute bottom-0 right-2 size-10 rounded-full bg-accent text-white drop-shadow"
>
<i className="i-mingcute-user-add-2-line size-4" />
</MotionButtonBase>
</TooltipTrigger>

{invitations.data?.length ? (
<Table className="mt-4">
<TableHeader className="border-b">
<TableRow className="[&_*]:!font-semibold">
<TableHead className="w-16 text-center" size="sm">
Code
</TableHead>
<TableHead className="text-center" size="sm">
Creation Time
</TableHead>
<TableHead className="text-center" size="sm">
Used by
</TableHead>
</TableRow>
</TableHeader>
<TableBody className="border-t-[12px] border-transparent">
{invitations.data?.map((row) => (
<TableRow key={row.code}>
<TableCell align="center" size="sm">
<div className="group relative flex items-center justify-center gap-2 font-mono">
<span>{row.code}</span>
<CopyButton
value={row.code}
className="absolute -right-6 p-1 opacity-0 group-hover:opacity-100 [&_i]:size-3"
/>
</div>
</TableCell>
<TableCell align="center" className="tabular-nums" size="sm">
{row.createdAt && new Date(row.createdAt).toLocaleString()}
</TableCell>
<TableCell align="center" size="sm">
{row.users ? (
<div
onClick={() => {
presentUserProfile(row.users?.id)
}}
>
<Avatar className="aspect-square size-5 border border-border ring-1 ring-background">
<AvatarImage src={row.users?.image || undefined} />
<AvatarFallback>
{row.users?.name?.slice(0, 2)}
</AvatarFallback>
</Avatar>
</div>
) : (
"Not used"
)}
</TableCell>
<TooltipContent>
new invitation
</TooltipContent>
</Tooltip>
<ScrollArea.ScrollArea scrollbarClassName="w-1" rootClassName="flex grow">
{invitations.data?.length ? (
<Table className="mt-4">
<TableHeader className="border-b">
<TableRow className="[&_*]:!font-semibold">
<TableHead className="w-16 text-center" size="sm">
Code
</TableHead>
<TableHead className="text-center" size="sm">
Creation Time
</TableHead>
<TableHead className="text-center" size="sm">
Used by
</TableHead>
</TableRow>
))}
</TableBody>
</Table>
) : (
<div className="mt-36 w-full text-center text-sm text-zinc-400">
<p>No invitations</p>
</TableHeader>
<TableBody className="border-t-[12px] border-transparent">
{invitations.data?.map((row) => (
<TableRow key={row.code}>
<TableCell align="center" size="sm">
<div className="group relative flex items-center justify-center gap-2 font-mono">
<span>{row.code}</span>
<CopyButton
value={row.code}
className="absolute -right-6 p-1 opacity-0 group-hover:opacity-100 [&_i]:size-3"
/>
</div>
</TableCell>
<TableCell
align="center"
className="tabular-nums"
size="sm"
>
{row.createdAt &&
new Date(row.createdAt).toLocaleString()}
</TableCell>
<TableCell align="center" size="sm">
{row.users ? (
<div
onClick={() => {
presentUserProfile(row.users?.id)
}}
>
<Avatar className="aspect-square size-5 border border-border ring-1 ring-background">
<AvatarImage src={row.users?.image || undefined} />
<AvatarFallback>
{row.users?.name?.slice(0, 2)}
</AvatarFallback>
</Avatar>
</div>
) : (
"Not used"
)}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
) : (
<div className="mt-36 w-full text-center text-sm text-zinc-400">
<p>No invitations</p>

<div className="mt-6">
<Button
onClick={() => {
newInvitation.mutate()
}}
>
Create Invitation
</Button>
<div className="mt-6">
<Button
onClick={() => {
newInvitation.mutate()
}}
>
Create Invitation
</Button>
</div>
</div>
</div>
)}
)}
</ScrollArea.ScrollArea>
</div>
</>
)
Expand Down

0 comments on commit 0cd1837

Please sign in to comment.