Skip to content

Commit

Permalink
feat: invitations tips and confirm modal
Browse files Browse the repository at this point in the history
  • Loading branch information
@DIYgod
DIYgod committed Sep 4, 2024
1 parent 7a5000f commit c919e59
Show file tree
Hide file tree
Showing 3 changed files with 142 additions and 110 deletions.
243 changes: 135 additions & 108 deletions src/renderer/src/modules/settings/tabs/invitations.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,11 @@ import {
AvatarFallback,
AvatarImage,
} from "@renderer/components/ui/avatar"
import { Button, MotionButtonBase } from "@renderer/components/ui/button"
import { Button } from "@renderer/components/ui/button"
import { CopyButton } from "@renderer/components/ui/code-highlighter"
import { Divider } from "@renderer/components/ui/divider"
import { LoadingCircle } from "@renderer/components/ui/loading"
import { useModalStack } from "@renderer/components/ui/modal"
import { ScrollArea } from "@renderer/components/ui/scroll-area"
import {
Table,
Expand Down Expand Up @@ -46,121 +48,146 @@ export const SettingInvitations = () => {
},
})
const presentUserProfile = usePresentUserProfileModal("drawer")
const { present } = useModalStack()

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

<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>
</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 ? (
<Tooltip>
<TooltipTrigger>
<button
type="button"
className="cursor-pointer"
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>
</button>
</TooltipTrigger>
{row.users?.name && (
<TooltipPortal>
<TooltipContent>{row.users?.name}</TooltipContent>
</TooltipPortal>
)}
</Tooltip>
) : (
"Not used"
)}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
) : invitations.isLoading ?
(
<LoadingCircle size="large" className="center absolute inset-0" />
) :
(
<div className="mt-36 w-full text-center text-sm text-zinc-400">
<p>No invitations</p>

<div className="mt-6">
<section className="mt-4">
<div className="mb-4 space-y-2 text-sm">
<p>
Follow is currently in
{" "}
<strong>early access</strong>
{" "}
and
requires an invitation code to use.
</p>
<p className="flex items-center"><span>You can spend 10 </span><i className="i-mgc-power ml-1 mr-0.5 text-base" /><span> Power to generate an invitation code for your friends.</span></p>
</div>
<Button
onClick={() => {
present({
title: "Confirm",
content: ({ dismiss }) => (
<>
<div className="flex items-center">
<span>Generating an invitation code will cost you 10 </span><i className="i-mgc-power mx-1 text-base" /><span>Power. Are you sure you want to continue?</span>
</div>
<div className="mt-4 flex items-center justify-end gap-3">
<Button variant="outline" onClick={dismiss}>
Cancel
</Button>
<Button
onClick={() => {
newInvitation.mutate()
}}
isLoading={newInvitation.isPending}
onClick={() => newInvitation.mutateAsync().then(() => dismiss())}
>
Create Invitation
Continue
</Button>
</div>
</div>
)}
</ScrollArea.ScrollArea>
</div>
</>
),
})
}}
>
<i className="i-mgc-heart-hand-cute-re mr-1" />
Generate new code
</Button>
<Divider className="mb-6 mt-8" />
<div className="flex flex-1 flex-col">
<ScrollArea.ScrollArea viewportClassName="max-h-[380px]">
{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 ? (
<Tooltip>
<TooltipTrigger>
<button
type="button"
className="cursor-pointer"
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>
</button>
</TooltipTrigger>
{row.users?.name && (
<TooltipPortal>
<TooltipContent>{row.users?.name}</TooltipContent>
</TooltipPortal>
)}
</Tooltip>
) : (
"Not used"
)}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
) : invitations.isLoading ?
(
<LoadingCircle size="large" className="center absolute inset-0" />
) :
(
<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>
</div>
)}
</ScrollArea.ScrollArea>
</div>
</section>
</>
)
}
4 changes: 4 additions & 0 deletions src/renderer/src/modules/settings/tabs/wallet/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { Divider } from "@renderer/components/ui/divider"

import { SettingsTitle } from "../../title"
import { MyWalletSection } from "./my-wallet-section"
import { TransactionsSection } from "./transaction-section"
Expand All @@ -8,6 +10,8 @@ export const SettingWallet = () => (

<MyWalletSection />

<Divider className="my-8" />

<TransactionsSection />
</div>
)
5 changes: 3 additions & 2 deletions src/renderer/src/modules/settings/tabs/wallet/transaction-section/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
import { MotionButtonBase } from "@renderer/components/ui/button"
import { RelativeTime } from "@renderer/components/ui/datetime"
import { LoadingCircle } from "@renderer/components/ui/loading"
import { ScrollArea } from "@renderer/components/ui/scroll-area"
import {
Table,
TableBody,
Expand Down Expand Up @@ -45,7 +46,7 @@ export const TransactionsSection = () => {
<div className="mt-8">
<SettingSectionTitle title="Transactions" />

<div className="overflow-x-auto">
<ScrollArea.ScrollArea viewportClassName="max-h-[210px]">
<Table>
<TableHeader>
<TableRow className="[&_*]:!font-semibold">
Expand Down Expand Up @@ -97,7 +98,7 @@ export const TransactionsSection = () => {
No transactions
</div>
)}
</div>
</ScrollArea.ScrollArea>
</div>
)
}
Expand Down

0 comments on commit c919e59

Please sign in to comment.